Minimal AJAX in WordPress

Here’s what it takes to create minimal AJAX in WordPress. First, let’s create a button:

<button id="ajax_button">Click me</button>

Then functions.php include a Javascript file called do_ajax.js. It has the dependencies jquery and wp-util:

wp_enqueue_script('base', get_stylesheet_directory_uri().'/js/do_ajax.js', ['jquery', 'wp-util'], false, 'footer' );

Also in functions.php, we set up a function to handle the AJAX call, and add the actions:

function handle_ajax() {
    if (isset($_POST['the_data'])) {
        wp_send_json_success($_POST['the_data']);
    }
}
add_action('wp_ajax_nopriv_handle_ajax', 'handle_ajax');
add_action('wp_ajax_handle_ajax', 'handle_ajax');

Finally, in our do_ajax.js file:

$(document.ready(function() {
    $('#ajax_button').click(function() {
        wp.ajax.post('handle_ajax', {'the_data': 'Hello!'})
            .done(function(response) {
                console.log(response);
            }
    }
});

And then in your console you should see “Hello!”.

That string is being sent from do_ajax.js to the server, and the server simply sends it back again.

That’s it – we have minimal AJAX in WordPress up and running! This post was based on this StackOverflow answer, and is intended as a much less detailed post than my Autocomplete with AJAX in WordPress article.

Hopefully from here you can build whatever you like!