Skip to content

Instantly share code, notes, and snippets.

Last active February 16, 2024 17:55
Show Gist options
  • Save sheabunge/f8f4b244f5e97aae8e195908c7555fed to your computer and use it in GitHub Desktop.
Save sheabunge/f8f4b244f5e97aae8e195908c7555fed to your computer and use it in GitHub Desktop.
const ACTION_NAME = 'shea_ajax_example';
$handler = function () {
check_ajax_referer( ACTION_NAME );
wp_send_json_success( 'it works!' );
add_action( 'wp_ajax_' . ACTION_NAME, $handler );
add_action( 'wp_ajax_nopriv_' . ACTION_NAME, $handler );
add_shortcode( 'shea_ajax_button', function () {
return '<button id="shea-ajax-button">Click me for AJAX</button>';
} );
add_action( 'wp_footer', function () {
$data = [
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'action' => ACTION_NAME,
'nonce' => wp_create_nonce( ACTION_NAME ),
const data = <?php echo wp_json_encode( $data ); ?>;
const ajaxButton = document.getElementById('shea-ajax-button');
ajaxButton.addEventListener('click', () => {
const request = new XMLHttpRequest();'POST', data.ajaxurl, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = () => {
if (200 > request.status || 400 <= request.status) {
alert('AJAX failure :( We received error code ' + request.status);
const response = JSON.parse(request.responseText)
alert('AJAX success! Message: ' +;
<?php } );
Copy link

Forgive me for being new to using ajax. I see these two example files but no idea on how to get them into wordpress site

Copy link

@eswartwout You can use this WordPress plugin:

Copy link

I have that plugin and have dozens of working snippets. I copied all your code into a new snippet but it does nothing

Copy link

@eswartwout did you add the [shea_ajax_button] shortcode? The code is intended to be more of a starting point for a proper example – it doesn't really do a huge amount by itself.

Copy link

is there a missing php ending tag? that does make it work but stops the crash

Copy link

I copied all the code above as listed. all code in one snippet.

Copy link

Your filenames listed above code are confusing. I thought the code goes in a snippet not in a php file

Copy link

The shortcode button is included in the code above. I still cannot get it to do anything

Copy link

etzel42 commented Nov 18, 2023

@eswartwout I was just checking out this example and saw your comments and seeing as no one as commented in a while I thought I would interject my own.. not sure if you still cannot get it to work.

If you look at the link at the very top above the code example that page explains a lot.. but to answer some of your questions, yes all the code goes in a snippet, and within a snippet you don't need to start <?php nor end ?> with php tags so ignore line #1.

The shortcode button is included in the code but you have to add the actual shortcode tag [shea_ajax_button] to your wordpress page to display the button.

As for them calling this example as a ajex.php file, that's because they needed to add a file on GItHub in order to create this repo to show this example. So you can ignore the fact thats its a file.. its just for this example.. and as I started above, all the code goes in one snippet.

Copy link

Thank you for your explanation and the provided code. I would have hoped to find it earlier, as combining AJAX with a snippet is not that difficult after all.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment