How to Make a WordPress AJAX Call

Using AJAX within WordPress can be a little hard to understand. Heck, using AJAX in general can be a little hard to understand.

Okay, so Ajax is going to call me back? Is he going to call my cellphone or the office line? Click To Tweet

All kidding aside, I did actually struggle a bit understanding how AJAX works within the WordPress framework. Then I read Devin Price’s post titled Simple Ajax Example and all the lights started to flicker on. Eureka!!

Making a WordPress AJAX call is a bit different then how you do it with just PHP and Javascript. AJAX is actually built into the WordPress framework. This has a lot of advantages, but you have to use it the way it’s described in the codex.
https://codex.wordpress.org/AJAX_in_Plugins

As much as I love the WordPress codex I sometimes find that the explanations in it are written with the assumption that you already understand everything about WordPress. Well, I say “boooooo” to hard to understand code examples.

Since I struggled a bit to find a good explanation on how to make a WordPress AJAX call I thought I would write this post on how to do so.

Let’s get started…

Step 1:

Download my example file here. Or you can use the two code sections below.

Javascript (The Call)

// This would normally be enqueued as a file, but for the sake of ease we will just print to the footer
function add_this_script_footer(){ ?>
 
<script>
jQuery(document).ready(function($) {
 
    // This is the variable we are passing via AJAX
    var fruit = 'Banana';
     
    // This does the ajax request (The Call).
    $.ajax({
        url: ajaxurl, // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
        data: {
            'action':'example_ajax_request', // This is a our PHP function below
            'fruit' : fruit // This is the variable we are sending via AJAX
        },
        success:function(data) {
    // This outputs the result of the ajax request (The Callback)
            window.alert(data);
        },  
        error: function(errorThrown){
            window.alert(errorThrown);
        }
    });   
              
});
</script>
<?php } 

add_action('in_admin_footer', 'add_this_script_footer');

PHP (The Callback)

function example_ajax_request() {
 
    // The $_REQUEST contains all the data sent via AJAX from the Javascript call
    if ( isset($_REQUEST) ) {
     
        $fruit = $_REQUEST['fruit'];
         
        // This bit is going to process our fruit variable into an Apple
        if ( $fruit == 'Banana' ) {
            $fruit = 'Apple';
        }
     
        // Now let's return the result to the Javascript function (The Callback) 
        echo $fruit;        
    }
     
    // Always die in functions echoing AJAX content
   die();
}
 
// This bit is a special action hook that works with the WordPress AJAX functionality. 
add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

Step 2:

Copy and paste the downloaded file contents or the code sections above to your WordPress theme functions.php file.

Step 3:

Login to WordPress and you will see a popup that says “Apple”.

That’s it!! You just made your first WordPress AJAX call.

The Breakdown

Okay, so what just happened there? Let’s break down the code:

  • When you logged into the admin area WordPress loaded the Javascript above in the page footer and the script executed.
  • The Javascript then created a variable named fruit which equals “Banana”.
  • It then sent the fruit variable to WordPress’s ajaxurl (admin-ajax.php) and told it to run the PHP function “example_ajax_request” above that you created in your functions.php.
  • Then the fruit variable was passed to the “example_ajax_request” PHP function and processed, the result being “Apple”.
  • PHP then made a callback to Javascript with the result.
  • Finally, Javascript received the callback and displayed the result in a window alert.

I made a bunch of comments in the code above and in the example file as well. This should help further with understanding the process.

The Hook

Something I wanted to point out is the action hook for the PHP function.

add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

You will notice that the name of the function “example_ajax_request” is included in the hook. This is a good practice to remind yourself which “wp_ajax_” hook goes with which function. The hook has to have something after wp_ajax_ in order to make it unique, so it’s a good naming convention to just add the function name you’re calling.

The above example will work in the admin area only. If you would like to use AJAX in the front-end you will have to add an extra action hook to your PHP code.

add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

You will also have to make sure the Javascript loads on the front end and that the ajaxurl is defined.

If you would like me to create a tutorial on how to use AJAX on the front-end please let me know in the comments below.

That’s it for this tutorial and I hope this helps!!

1 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Featured Posts

"Like" Us On Facebook

Facebook By Weblizar Powered By Weblizar