Using AJAX With PHP on Your WordPress (The right way)

Posted on

AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. With that said you could use Javascript in conjunction with PHP or other languages (in this case of course it will be PHP)  🙂
Before starting to making a call to ajax we might need to understand a little bit of:

  1. How are the ajax calls are being made
  2. How are the files involves in WordPress that can be update and how is the process.

Ajax calls.

In this post i will assume that we all know the existence of <a href=”” target=”_blank”>jQuery</a>. Which will allow us to make things a little easier to understand.
With jQuery you have one function that can be called like this:

type : 'post',
url : ajaxloading.ajaxurl,
data : {
action : 'sort_results',
parameter1: $value1
beforeSend : function() {
//some logic that will prevent for example execute twice the button
// you can disabled the button or showing a loading gif.
success : function( response ) {
// display the button again or hide the loading gif.

In this example we call ajax method which perform an asynchronous HTTP (Ajax) request. In this case we will do a ‘POST’ call.
In the data array we can pass the parameters which will be handled in the method that is called. One of this parameter needs to be the ‘action’ will be explaining later the purpose of this.
Lastly, we setup a ‘success’ method that will be the one which handles the return of the call and do some logic in the page.

WordPress files

functions.php or the theme functions file is a template used by WordPress themes. It acts like a plugin and gets automatically loaded in both admin and front-end pages of a WordPress site. In this file we will define the method which will be called from the javascript function

//function to sort results on resources page via AJAX
function sort_results() {
  $param1 = $_POST['parameter1'];
    $content = ob_get_clean();
    echo $content;
add_action( 'wp_ajax_sort_results', 'sort_results' );
add_action( 'wp_ajax_nopriv_sort_results', 'sort_results' );

In this code snippet we have two importants things.

  1. the call add_action which will be registering in wordpress that we have and wp_ajax_sort_results which will execute or tie to sort_results function.
  2. The actual function that handles the logic, get the parameters and echo the output.
  3. If you don’t, admin-ajax.php will execute it’s own die(0) code, echoing an additional zero in your response.

It is important that you realize that the name of the action will be the same as the wp_ajax_XXXX. The function can be named anything, I just used the same string as the action name for consistency.


Ajax is a powerful tool in a developers tool belt to add interactivity and to lower server strain. This can opens a lot of doors, but if you do not make the things in a right way your code could messy and hard to mantain. WordPress give you the possibility to use his framework to use it so it will be a good change to take advantage of it!.

Posted in Ajax, javascript, PHP, WordpressTagged , , , , , , ,