How To Use AJAX Into WordPress

Ajax with WordPress

Ajax technology is being used by all types of websites and also into WordPress.
Currently, the core of WordPress uses ajax only into administration.

Note: If you are using Ajax at front-end, you need to use “wp_localize_script()” to make your JavaScript to aware of admin-ajax.php URL for JavaScript global variable “ajaxurl”.

Action hooks for Ajax into WordPress

Here are two action hooks that allow user to create a custom handler for his/her own custom Ajax request.

• wp_ajax_
• wp_ajax_nopriv_

wp_ajax_ is only called at administrator side but in other hand wp_ajax_nopriv_ called front-end side.

wp_ajax_ and wp_ajax_nopriv_ hooks use like wp_ajax_$youraction or wp_ajax_nopriv_$youraction where $youraction is your Ajax request’s ‘action’ property.

You need to create two functions one for enqueue you ajax script and another one is a callback function that handles the request.

Example for AJAX at administrator side:

1. Enqueuing Ajax js file.

<?php add_action('admin_enqueue_scripts', 'my_admin_ajax'); function my_admin_ajax() {   wp_enqueue_script('my-script', 'path_of_your_js_file/myscript.js',array('jquery')); }

Into myscript.js file

jQuery(document).ready(function($) {   var ajaxData = {     'action': 'my_action',     'whatever': 'Hello World'   }   jQuery.post(ajaxurl, ajaxData, function(response){     alert(response);   }); });

2. Call action and handle the request with a callback function.

add_action('wp_ajax_my_action', 'my_callback'); function my_callback() {   $whatever = $_POST['whatever'];   echo $whatever;   wp_die(); }

Example for AJAX at front-end side:

1. Enqueuing Ajax js file and localize script for global variable “ajaxurl”.

add_action('admin_enqueue_scripts', 'my_admin_ajax'); function my_admin_ajax() {   wp_enqueue_script('my-script', 'path_of_your_js_file/myscript.js',array('jquery'));   wp_localize_script( 'my-script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ))); }

Into myscript.js file

jQuery(document).ready(function($) {   var ajaxData = {     'action': 'my_action',     'whatever': 'Hello World'   }   jQuery.post(myAjax.ajaxurl, ajaxData, function(response){     alert(response);   }); });

2. Call action and handle the request with a callback function.

add_action('wp_ajax_my_action', 'my_callback'); function my_callback() {   $whatever = $_POST['whatever'];   echo $whatever;   wp_die(); }

Hope you all enjoyed Ajax feature in WordPress. You can also implement similar Ajax concept for other frameworks like Drupal, Laravel, Yii, Magento, CakePHP, etc. the only change would be the syntax, Hire wordpress developer if you need help.

Feel free to share any questions, we are ready to help always 🙂 

Ajax is powerful JavaScript based technology which enables the website to dynamically fetch data and show data without refreshing page. This will provide more speed up website and great user experience.

Ajax with WordPress

Ajax technology is being used by all types of websites and also into WordPress.
Currently, the core of WordPress uses ajax only into administration.

Note: If you are using Ajax at front-end, you need to use “wp_localize_script()” to make your JavaScript to aware of admin-ajax.php URL for JavaScript global variable “ajaxurl”.

Action hooks for Ajax into WordPress

Here are two action hooks that allow user to create a custom handler for his/her own custom Ajax request.

• wp_ajax_
• wp_ajax_nopriv_

wp_ajax_ is only called at administrator side but in other hand wp_ajax_nopriv_ called front-end side.

wp_ajax_ and wp_ajax_nopriv_ hooks use like wp_ajax_$youraction or wp_ajax_nopriv_$youraction where $youraction is your Ajax request’s ‘action’ property.

You need to create two functions one for enqueue you ajax script and another one is a callback function that handles the request.

Example for AJAX at administrator side:

1. Enqueuing Ajax js file.

<?php

add_action('admin_enqueue_scripts', 'my_admin_ajax');

function my_admin_ajax() {
  wp_enqueue_script('my-script', 'path_of_your_js_file/myscript.js',array('jquery'));
}

Into myscript.js file

jQuery(document).ready(function($) {
  var ajaxData = {
    'action': 'my_action',
    'whatever': 'Hello World'
  }
  jQuery.post(ajaxurl, ajaxData, function(response){
    alert(response);
  });
});

2. Call action and handle the request with a callback function.

add_action('wp_ajax_my_action', 'my_callback');

function my_callback() {
  $whatever = $_POST['whatever'];
  echo $whatever;
  wp_die();
}

Example for AJAX at front-end side:

1. Enqueuing Ajax js file and localize script for global variable “ajaxurl”.

add_action('admin_enqueue_scripts', 'my_admin_ajax');

function my_admin_ajax() {
  wp_enqueue_script('my-script', 'path_of_your_js_file/myscript.js',array('jquery'));
  wp_localize_script( 'my-script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}

Into myscript.js file

jQuery(document).ready(function($) {
  var ajaxData = {
    'action': 'my_action',
    'whatever': 'Hello World'
  }
  jQuery.post(ajaxurl, ajaxData, function(response){
    alert(response);
  });
});

2. Call action and handle the request with a callback function.

add_action('wp_ajax_my_action', 'my_callback');

function my_callback() {
  $whatever = $_POST['whatever'];
  echo $whatever;
  wp_die();
}

Example for AJAX at front-end side:

1. Enqueuing Ajax js file and localize script for global variable “ajaxurl”.

add_action('admin_enqueue_scripts', 'my_admin_ajax');

function my_admin_ajax() {
  wp_enqueue_script('my-script', 'path_of_your_js_file/myscript.js',array('jquery'));
  wp_localize_script( 'my-script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}

Into myscript.js file

jQuery(document).ready(function($) {
  var ajaxData = {
    'action': 'my_action',
    'whatever': 'Hello World'
  }
  jQuery.post(myAjax.ajaxurl, ajaxData, function(response){
    alert(response);
  });
});

2. Call action and handle the request with a callback function.

add_action('wp_ajax_my_action', 'my_callback');

function my_callback() {
  $whatever = $_POST['whatever'];
  echo $whatever;
  wp_die();
}

Hope you all enjoyed Ajax feature in WordPress. You can also implement similar Ajax concept for other frameworks like Drupal, Laravel, Yii, Magento, CakePHP, etc. the only change would be the syntax, Hire WordPress Developer if you need help.

Feel free to share any questions, we are ready to help always 🙂 

Frequently Asked Questions