I was recently working on a WP site that required AJAX functionality on the frontend. Having implemented WordPress AJAX for my Book It! Transportation plugin on the backend, I figured it would be a cinch. Come to find out, it required a little more work to accomplish.
After digging around multiple blogs and the WordPress Codex, I found it a little difficult to find full working examples. Get ahead of the learning curve by learning how to implement WordPress AJAX for both the frontend and backend below.
WordPress AJAX for the Backend
This is a cinch to do. Currently, the core of WordPress uses AJAX only in the administration screens. For instance, AJAX is used for instant updates when you are doing comment moderation, and when you are adding and deleting items from lists such as categories, blogroll, and posts; AJAX is also the technology behind the auto-save functionality on post and page editing screens. Several themes and plugins also use AJAX; for instance, some post rating plugins use AJAX to store the visitor’s rating in the database and then display an updated average rating.
Since AJAX is already built into the core WordPress administration screens, adding more administration-side AJAX functionality to your plugin or theme is fairly straightforward, check out the example below.
This should be fairly straight forwared. It uses WP’s
admin_footer action (see
add_action) to include some JS in the footer that makes the AJAX magic happen. Take a look at
$.post if you’re not familiar with it.
With the code above, you’re defining your action, a WordPress nonce for security, and any other data you want to send. You’ll use the action you define as part of the WP function you’ll create that handles the AJAX request. See below:
We’re using WP’s
wp_ajax_(action) hook to handle the AJAX request. This hook allows you to create custom handlers for your own custom AJAX requests. The
wp_ajax_ hook follows the format “wp_ajax_$youraction”, where
$youraction is your AJAX request’s ‘action’ property you sent in the JS above.
Also, be sure to include the
check_ajax_referer to verify that the request came from the right place.
That’s it! You will need to add a few details, such as error checking, but hopefully the example above will be enough to get you started on your own administration-side AJAX plugin.
WordPress AJAX Backend Example
Here’s a full working example of WordPress AJAX in the backend. This will produce a JS alert box with the text 1044 when a page has been loaded in the administration panel. In the
WordPress AJAX for the Frontend
This takes a little extra work to accomplish. Since WordPress 2.8, there is a hook similar to
wp_ajax_nopriv_(action)executes for users that are not logged in.
You’ll need to use this hook if you’re planning on implementing WordPress AJAX on the frontend. If you want to fire your AJAX function both both logged-in and logged-out users, you’d do this:
Something else to keep in mind when implementing WordPres AJAX on the frontend is, unlike on the admin side, the
wp_localize_script() to make the URL available to your script, and generate it using this expression:
admin_url( 'admin-ajax.php' ). See below:
Another thing to keep in mind is, both front-end and back-end AJAX requests use
is_admin() will always return true in your action handling code. When selectively loading your AJAX script handlers for the frontend and backend, and using the
is_admin() function, your
wp_ajax_nopriv_(action) hooks MUST be inside the
is_admin() === true part.
AJAX requests bound to either
wp_ajax_nopriv_ actions are executed in the WP Admin context. Carefully review the actions you are performing in your code since unprivileged users or visitors will be able to trigger requests with elevated permissions that they may not be authorized for. See below:
Here the AJAX action
my_frontend_action will trigger the PHP function
my_frontend_action_callback() for all users. The AJAX action
my_backend_action will trigger the PHP function
my_backend_action_callback() for logged-in users only.
WordPress AJAX Frontend Example
Here’s a full working example of WordPress AJAX in the frontend. This will produce a JS alert box with the text 1044 when a page has been loaded in the administration panel. In the
Learn more about WordPress AJAX
- WordPress Codex AJAX
- WordPress Codex AJAX in Plugins
- WordPress AJAX Login Without a Plugin – The Right Way by Natko Hasic
- Delete A WordPress Post Using AJAX by Daniel Pataki
- How to Use AJAX With PHP on Your WordPress Site Without a Plugin by David Albert
- Getting Started with AJAX & WordPress Pagination by Soumitra Chakraborty
- 5 tips for using AJAX in WordPress by Gary Cao