How to use AJAX with WordPress.

I’m writing this article with the assumption that you know what AJAX is and does and you have a good idea of what you want to do with it.

If you are not familiar with AJAX, let me Google that for you.

Setting up AJAX calls in your WordPress themes and plugins can be confusing and there is not a whole lot of information out there to steer you in the right direction. A good rule to go by is: if you have to include a file from the WordPress core, you’re doing it wrong.

WordPress provides two action hooks you can use for building AJAX functionality; wp_ajax_ and wp_ajax_nopriv.

Register Your JavaScript File

You will need to register and enqueue your JavaScript file with WordPress so it gets included when the page loads.  If you’re writing a theme this will go in your functions.php file, if you’re writing a plugin you can put it wherever.

The name of the function (in the example “register_scripts”) and your JavaScript’s handle  (in the example “script-handle”) need to be unique in your WordPress install.

Specify the path to the file in a string. If you have any dependencies such as jQuery include those and a version number for your script if you have one. It is generally a good idea to load all JavaScript in the footer of your page as it helps the actual page content to load faster.

The call to the wp_localize_script() function passes the URL of WordPress’ built in AJAX functions as well as any parameters you need to pass to your JavaScript file as an array. Make your “ObjectName” something meaningful and unique to your script.

 Setup Your Callback

Your callback is the PHP function you want to run when the AJAX action is triggered. It will also be in your functions.php file or wherever you want to put it in your plugin.

This part is pretty straight forward. Put the functionality you want perform in the callback function (make sure to give the function a unique and meaningful name) and make sure to include the call to die() at the end. Calling die() is important because without it you will not get a proper response back to your JavaScript.

Then you’ll want to tie your callback to 1 or both of the AJAX action hooks. The hooks will always start with “wp_ajax_”, next you’ll include your script’s handled (note that you’ll need to replace any dashes ( – ) with underscores ( _ ). If you want the AJAX to work on the front end of the site you’ll want to append the hook with _nopriv. If you need it in the Dashboard just leave it as it is.

The JavaScript File

The last piece to this all is the JavaScript file that triggers and perform whatever actions you need to run.

Change “script-handle” and “ObjectName” to match what you chose when registering the script with WordPress.

The code $.post( ObjectName.ajaxurl, data, function ( response ) {} is what will call the callback you specified in the last section. You can place this inside an event such as a click. The “response” variable will contain any output you generated in the callback.

And that’s it. If you have any questions or suggestions to make this how-to a little more clear leave a comment or contact me directly.

Leave a Reply