Get an overview of how to use Ajax in your WordPress plugins. Thanks to WordPress's built-in Ajax functionality, you can add Ajax to any plugin with just a few functions and a bit of jQuery. Using Ajax in your plugins improves the user experience and conserves server resources.
- [Instructor] In this video, we look at how to implement Ajax in WordPress plug-ins. Ajax is one of the more advanced areas of WordPress development, so if you are unfamiliar check out some of these video courses. These tutorials will get you up to speed on the world of Ajax. This video presents an overview of how to use the Ajax functionality provided by WordPress. Here is an example of WordPress Ajax in action.
Notice that the category was added, but the page didn't reload. Here it is again. Ajax enables the webpage to interact with the server without having to reload the entire page. This saves time and resources. WordPress provides built-in Ajax functionality that can make our plug-ins extra awesome. Here we have the Ajax Admin plug-in demo from the exercise files. This demo includes three essential functions.
And click the button. Bam! Instant results powered by Ajax. Let's try another. Notice that the new content is loaded without having to reload the entire page. That's Ajax magic. What we're doing here is looking up the headers for various URLs. Yes, it's basic, but that's what we want when learning how things work.
This second function does exactly that. Before doing anything, we check the nonce value using check_ajax_referer. Then, if the nonce is valid, we check if the user has the required capability. If so, we grab the post data to get the URL, which is used to make a get request using wp_safe_remote_get. You can learn more about this function in the previous video on using the HTTP API.
Then from there, we get the response headers and display the results on the plug-in page. And then we make sure to exit the script, using the wp_die function. This is important to do for security reasons. Notice the hook we are using for our handling function. This hook is used to make Ajax requests for users who are logged in to WordPress. It is made up of two parts. This first part is wp_ajax_.
This is the part that tells WordPress that the request is for logged in users. The second part of the hook is the name of the action that is passed in the Post request, via the jQuery post method. Lastly, the third function outputs the markup that displays the Ajax form and response data. First we add some basic CSS to style the page.
Then we display the post form along with a few URL examples. And then lastly, we add the ajax-response div, which is used by the jQuery script to display the results. Again, we can see how all of this looks on the plug-in page. Here is the form, here are the example URLs and here is the response div, hidden. It displays the results.
Here's an overview of how it works. When the form is submitted, we stopped the page from reloading. And then we display a loading message and get the URL. Then we use jQuery's post method to make a post request to WordPress. Here, the first parameter is the Ajax URL. For Ajax in the admin area, this variable is defined automatically by WordPress.
WordPress automatically adds this variable to all pages in the admin area. WordPress does not automatically add this variable to any public facing pages. Next is the second parameter of the jQuery post function. It contains the data that we want to send with the post request. This includes to nonce value, the name of the action hook and the submitted URL. Next is the third parameter of the post function.
I encourage you to deconstruct this plug-in demo and experiment to better understand how it works. Here, again, is the plug-in demo in action. Before wrapping up this tutorial, I want to point out the other plug-in demo provided in the exercise files for this video. This plug-in demo provides an example of how to use WordPress Ajax on public-facing pages. It's very similar to the previous plug-in, with a few exceptions. Because we are targeting public facing pages, we must define the Ajax URL.
In the previous plug-in, the Ajax URL was added automatically by WordPress on all pages in the admin area. But for public facing pages, we need to define this value ourselves. We do this with these two lines. First, we define the admin URL and then we add it to the inline script here. The next important change is the action hook that is used for the Ajax handler function.
The first hook we use is for logged in users. It is prefixed by wp_ajax_. For public facing Ajax, we add another hook for users who are not logged in. So we need both of these hooks to do Ajax on public-facing pages, so with both of these hooks we ensure that all users can use the public facing Ajax functionality. Add one more thing to note, our third function in this plug-in displays the markup required to display a learn more link for each post.
Let's take a quick look. Here is the Ajax link displayed on a WordPress post. When this link is clicked, Ajax is used to display the author's bio. This information is retrieved from the author's profile in the database. Again, this technique uses the same basic code that's used for the admin ajax plug-in. So I encourage you to explore and experiment to see how everything works.
- WordPress APIs
- Action and filter hooks
- Activating and deactivating plugins
- Plugin security
- Creating the directory and files
- Adding menus and the settings page
- Inserting custom functionality
- Testing and debugging WordPress plugins
- Creating widgets
- Managing users and roles
- Adding custom post types and taxonomies
- Working with custom fields and database queries
- Using APIs: Transients, HTTP, and REST