Shelley Bassett



Using AJAX with WordPress

September 3, 2018

Using AJAX with WordPress is a little more complicated than the standard scripts. Follow this tutorial for any WordPress theme or plugin

AJAX requests are everywhere. Asynchronous JavaScript and XML (AJAX) allows calls to the server without interfering with the rest of the page load. This asynchronous behaviour is very useful, especially when loading times are important. When it comes to theme and plugin development Using AJAX with WordPress is a little more tricky than the standard application. Let’s get into it.First of all, we’re going to need our template files. The most basic files needed will be functions.php , scripts.js  and the output page, which could be any WordPress page, but there we’re using index.php . Our demo code is going to make each page talk to the others.

Defining our PHP

To begin, we’re going to need to import and localise our JavaScript file. This is done at the top of the functions.php  file. Don’t forget to update the location of your scripts to their correct paths. I also tend to include my CSS files in this script.

Then, we can write the function that will be run by our AJAX script. This tutorial will just leave a message in the console of any page that loads it, so the PHP isn’t too complex. Normally, this would be written at the same time as the JavaScript, but because we have such a clear idea of what we want returned, we can create the function now. Notice how we can use this like a normal WordPress function and take advantage of all the predefined actions. This little script is going to return two different strings, depending on if the user is logged in or not.

Notice the the two WordPress actions included before the start of the function? These are very important. They allow the code to be run asynchronously when a user is logged in, OR when there is no user logged in. Both need to be included, as well as the name of the function that we are allowing. After processing the function, don’t forget to include die();  to tell the function to finish. Neglecting to do so many result in unexpected results (most like a 500 error).

Using AJAX with WordPress

Next, the JavaScript. I always start my JavaScript files by defining the $ as JQuery, because WordPress sometimes has difficulty with this. Then, we can start our function.

I want this function to run as soon as the window has finished loading.  $(document).ready(function(){}); will allow me to do this. Then comes the tricky part, using AJAX with WordPress! The URL, which would normally be to a php file, needs to be to our localised script. So here we need to use the name we defined at the beginning followed by .ajaxurl. We’re using ‘POST’ to send the data to the server. Then, comes the actual data. For this to run, action needs to be defined as the function name. The next entry’s can be anything or nothing. This script isn’t sending any data to the function, but I’ve written scripts that send user ID’s, post ID’s and even page slugs.

Finally, we reach the success call! This is the function that is run when information is successfully returned from the server. Anything that is returned will be in the result variable, and able to be manipulated as the type of data determined by the function selected at action. Like the PHP function earlier, this function can include any JavaScript functions that might be needed, although today, it’s only using console.log(); .

And that’s it! When the page loads, our script will log to the console a message. The content of this string will change depending on the log in status of the page user. There are many more complex functions that can be run here, but this is a good place to start to become familiar with the concept of using AJAX with WordPress.