• Handling Ajax Requests in WordPress Programmatically using jQuery
  • How to Send an Ajax Request in WordPress for both plugins and themes developers
  • Tutorial on how to programmatically use ajax in WordPress

Ever wanted to handle ajax requests in WordPress but didn’t know how? Well, this tutorial gives a step-by-step guide on the simplest and best way to send ajax in WordPress programmatically.

All ajax requests in WordPress are handled in /wp-admin/admin-ajax.php/.

Handling Ajax Requests in WordPress

Following are steps on how to send ajax requests in WordPress

  1. Write a JavaScript code that will send the request, in our case we shall use jQuery
  2. Define an action in the JQuery which is a normal POST or GET variable
  3. Hook your action to the wp_ajax and wp_ajax_nopriv hooks

Before we see a simple example it’s worth mentioning that wp_ajax and wp_ajax_nopriv are hooked to the action as I’m going to illustrate shortly.

For example, let’s assume your action name is hacksmile_hello_world, so your action hook will look something like this:

  • wp_ajax_hacksmile_hello_world
  • wp_ajax_nopriv_hacksmile_hello_world

We are going to see an example in the code shortly

wp_ajax applies for the logged-in users and wp_ajax_nopriv applies for non-logged-in users. Therefore, it’s a good practice to use both of them hand in hand, as I’m going to illustrate shortly

Let’s start with the first point on creating a javascript code. We shall hook our JS in the wp_head.

add_action( 'wp_head', 'hacksmile_ajax_js' );
function hacksmile_ajax_js(){
?> 

<script>
  jQuery( function(){
    jQuery.ajax({
      url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
      type: 'post',
      data: {
        action: 'hacksmile_hello_world',
        example_variable: 'user_data_here'
      },
      cache: false,
      async: true,
      success: function( data ){
        alert( data );
      },
      error: function(){
        alert( 'network error' );
      }
    })
  } );
</script>

<?php
}

Please note how we have passed the action and example variable above.

How to Send Ajax Request in WordPress

From the above script, we have created the javascript and added it to the head section of the DOM.

Next, let’s create an ajax receiver of the above script. Please note how we have defined our action hacksmile_hello_world from the above js code

add_action( 'wp_ajax_hacksmile_hello_world', 'hacksmile_ajax_receiver' );
add_action( 'wp_ajax_nopriv_hacksmile_hello_world', 'hacksmile_ajax_receiver' );
function hacksmile_ajax_receiver(){

  $example_variable = $_POST['example_variable'];

  _e(  "Hello World\n\nPost Variable is: $example_variable"  , 'hacksmile' );

  wp_die();
}

Please realize how wp_ajax and wp_ajax_nopriv hooks to our action, hacksmile_hello_world. 

add_action( ‘wp_ajax_hacksmile_hello_world‘, ‘hacksmile_ajax_receiver’ );
add_action( ‘wp_ajax_nopriv_hacksmile_hello_world‘, ‘hacksmile_ajax_receiver’ );

The first parameter is wp_ajax and wp_ajax_nopriv which hooks on the action hacksmile_hello_world and the second parameter is the callback function.  You must have the basic knowledge of WordPress hooks for you to get the concept

Following is the Full Code on  How to Send Ajax Requests in WordPress

/*!
 * 
 * sending ajax request 
 * 
 * */

add_action( 'wp_head', 'hacksmile_ajax_js' );
function hacksmile_ajax_js(){
?> 

<script>
  jQuery( function(){
    jQuery.ajax({
      url: "<?php echo admin_url( 'admin-ajax.php' ); ?>",
      type: 'post',
      data: {
        action: 'hacksmile_hello_world',
        example_variable: 'user_data_here'
      },
      cache: false,
      async: true,
      success: function( data ){
        alert( data );
      },
      error: function(){
        alert( 'network error' );
      }
    })
  } );
</script>

<?php
}

add_action( 'wp_ajax_hacksmile_hello_world', 'hacksmile_ajax_receiver' );
add_action( 'wp_ajax_nopriv_hacksmile_hello_world', 'hacksmile_ajax_receiver' );
function hacksmile_ajax_receiver(){

  $example_variable = $_POST['example_variable'];

  _e(  "Hello World\n\nPost Variable is: $example_variable"  , 'hacksmile' );

  wp_die();
}

 

 

Similar Posts