How to use AJAX in WordPress themes?

I’m fairly experienced with using AJAX and it’s various jQuery shorthand implementations, but have never implemented AJAX into a WordPress theme.

I had to do quite a bit of Googling before i learned how to use AJAX along with the WordPress theme. Now I’m writing this post to show how I’ve implemented AJAX into WordPress step by step.

Step 1: In your function file, add the following code

// this code is used to add AJAX URL
add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
    <script type="text/javascript">
       var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; 
    </script>
<?php
}

Step 2: Now let say you want to send data from front page to back-end for creating a user, you can use a code similar to this:

<script>
function createUser(){
   jQuery(".register-form").hide();
   jQuery(".register-confirmation").show();jQuery.ajax({
     type:"POST",
     url: ajaxurl,
     data: {
       action: "review_vote_ajax_request",
       post_id: "1"
     },
     success:function(data){
       console.log(data);
     },
     error: function(errorThrown){
      console.log(errorThrown);
     }
   });
}
</script>

You can use the above code in a custom.js file or even inside the page. Depending upon how you want to implement it.

Step 3: Now in your function.php file, you will need a code to receive data.

Few things to note:

• WordPress requires you to explicitly make the AJAX function accessible to non-authenticated users. To enable the AJAX call to non-auth users, you must include action to explicitly enable this: wp_ajax_nopriv_review_vote_ajax_request
• You also need to include the action to explicitly enable this for authenticated users: wp_ajax_review_vote_ajax_request

add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'createUser' );
add_action( 'wp_ajax_review_vote_ajax_request', 'createUser' );
function createUser() {
   // Can add further code here and do your magic 
   echo "Received!"; 
   // Include the following at the end of your AJAX function
   wp_die();
}

Securing your AJAX requests

Because AJAX makes it so easy to pass data between script and backend, you should definitely take necessary steps to make your code secure. That includes sanitizing any data before saving it, but also utilizing WordPress’ “nonce” functionality to check if the requests are coming from corrent and accepted locations.

Let’s add some security to the example code we did above.

Step 1: Adding nounce variable

// this code is used to add AJAX URL
add_action('wp_head','ajaxurl');
function ajaxurl() {
?>
    <script type="text/javascript">
       var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; 
       var nounce = '<?php wp_create_nonce('reg-nonce'); ?>
</script>
<?php
}

Step 2: In our Javascript, we pick up the nonce value and pass it right back in our AJAX request:

<script>
function createUser(){
   jQuery(".register-form").hide();
   jQuery(".register-confirmation").show();jQuery.ajax({
     type:"POST",
     url: ajaxurl,
     data: {
       action: "review_vote_ajax_request",
       post_id: "1",
       nonce: nounce
     },
     success:function(data){
       console.log(data);
     },
     error: function(errorThrown){
      console.log(errorThrown);
     }
   });
}
</script>

Step 3: And finally in our wp_ajax hooked function we should start by checking if the nonce was valid with wp_verify_nonce().

add_action( 'wp_ajax_nopriv_review_vote_ajax_request', 'createUser' );
add_action( 'wp_ajax_review_vote_ajax_request', 'createUser' );
function createUser() {
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'reg-nonce')) {
  wp_die(-1);
 }
// Can add further code here and do your magic 
   echo "Received!";
// Include the following at the end of your AJAX function
   wp_die();
}

Was this helpful? Did I miss something? Do you have a question? Get in touch by placing your comment.

If this post was helpful…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!