In the past four tutorials, we’ve looked at the basics of Javascript, jQuery and how to use basic JavaScript in WordPress. In this article, you’ll learn about what AJAX is, what it can be used for, and how to create cool functionality with it in WordPress.<\/p>\n
Let’s get started.<\/p>\n
Missed a tutorial in our JavaScript for WordPress Developers series? You can catch up on all five posts here:<\/strong><\/p>\n A common AJAX flow follows the steps below:<\/p>\n Let’s set this up in WordPress. Our first example will show a simple pop-up containing the number of comments a post has when we click on the title. We’ll use a child theme based on the default Twenty Sixteen WordPress theme so we all start from the same base.<\/p>\n Here’s what you need to do: Create a new folder in the themes<\/strong> directory in your WordPress install and name it “ajax-test.” Within the directory, create two files: Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The stylesheet from the parent theme needs to be loaded by the child theme. Once upon a time this was done by importing it from the child theme’s CSS file but the recommended way of achieving it now is by enqueueing it. If you need a refresher on enqueing, have another read over part four in this series<\/a>.<\/p>\n Let’s enqueue the parent’s stylesheet and our JavaScript file in one go:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n If you feel you have the energy to go one step further, find a nice image, crop it to 880px by 660px and place it in the child theme’s folder, and then name it it Since this child theme is based on Twenty Sixteen and we haven’t modified anything (yet!), the site should look exactly as if it were running the parent theme.<\/p>\n To get started, let’s add the “Show some love!” button. A great place to put it would be the sidebar of posts in the theme.<\/p>\n After some research, it turns out that the sidebar is created by a function named This function is “pluggable,” which means that we can modify it by defining it in our own functions.php<\/em> file. The first step of this is to copy-paste the whole function into our own functions.php<\/em> file:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Let’s add our button to the very bottom of all that metadata:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Let’s walkthrough what all that code means.<\/p>\n The first line retrieves the number of loves the post has received. In some cases, this data will not exist, i.e. when no one has clicked the button yet. Due to this, we use the second line in the code to set the value to The third line outputs the button, which consists of a span containing an image and the number of loves. I’ve left the source of the image empty because I want to use an SVG in there. You could use base64 encoded SVG to create an image inline. This saves you requests and will make your website perform better.<\/p>\n I used this free little heart image<\/a>, clicking on the Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n I also used a little CSS to style the button and give it a hover effect. It’s not very obvious that this is a button, but it will do for our simple test.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n Finally, we get to our JavaScript! We need to target our button element and detect a click on it. Here’s how to do it:<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n If you click on the button at this stage you should see a JavaScript alert with the text “Love is being given.”<\/p>\n Instead of that text we need to trigger an AJAX call. Before we write our code, let’s figure out what we need to send.<\/p>\n The AJAX URL<\/strong><\/p>\n First and foremost, we need a place to send the data. The place we send the data to will process the data and respond to the call. WordPress has a location built in to handle AJAX calls, which we can use: the The Add the following code to our existing Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The result of this will be an object named The Post ID<\/strong><\/p>\n We’ll be sending arbitrary data like the post’s ID (which we’ll use to identify the post we’re adding love to). This can be retrieved from the DOM. Take a look at the structure used in the Twenty Sixteen theme below:<\/p>\n Our button has an “article” element as one of its ancestors. This element has the class Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The Action<\/strong><\/p>\n WordPress also requires that we send a parameter named action. Since all actions will be sent to We can now put everything together. We need to create an AJAX call to Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n The success parameter is a function, which will run when the AJAX call has been completed. We’ll show a simple alert that shows “Success! The new count is” with our response tacked on the end.<\/p>\n\n Normally you would need to edit the If you named your action ‘add_love’, you need to attach a function (names anyway you like) to a hook named Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n We attached our function to both hooks, echoed To get the actual number of “loves” all we need to do is retrieve the current number, increment it by one, save it to the database and echo the new number.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n If you click the button now you should see the popup showing you “1”. If you refresh the page you should see the new number being shown. Clicking the button will return 2. All we need to do now is make sure the number is reflected in the UI immediately.<\/p>\n This part seems easy (because it is), but is usually the most difficult to get right \u2013 more on this later. For now all we need to do is pinpoint the element that contains the current number and change its content to the response.<\/p>\n Please update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n I’ve only added two lines to our previous JS code. On line 5, I store the element that contains the number in the AJAX isn’t too difficult on the surface but it gets very difficult when trying to create a nice UI. Sending data, processing it and creating a response is almost trivial but here are some issues regarding the usage of the response that you may not have thought of:<\/p>\n Solving these issues is not really within the scope of this tutorial. Some of this\u00a0can be learned reading other tutorials, but you partly need to rely on your experience to create a smooth and understandable UI for your actions.<\/p>\n Safety is another huge concern. In this simple love example it may not be obvious but you might want to build a button for admins that deletes posts. All actions should be protected by nonces<\/a>.<\/p>\n Creating smooth interfaces and useful user actions is easy using AJAX. You’ll need to send a request, which contains some data, process it on the server, send back a response and use the response to initiate UI changes.<\/p>\n The real challenge of AJAX, though, is using it responsibly and making sure that your UI is air-tight before, during and after your action has been performed.<\/p>\n While this is the final tutorial in JavaScript for WordPress Developers, your learning doesn’t have to stop here! If you would like to continue expanding your JavaScript knowledge, here are some great resources worth checking out:<\/p>\n As with learning any new skill, the more you read and practice, the easier learning will become and the sooner you\u2019ll be proficient in another language.<\/p>\n Good luck with your JavaScript journey!<\/p>\n","protected":false},"excerpt":{"rendered":" AJAX, or Asynchronous Javascript and XML, is used to communicate with server-side scripts and allows you to load content dynamically without having to reload the page. Say, for example, that you’re building a website for a local charity and you want to encourage a positive vibe. You\u00a0could add a button titled “Show some love!” with […]<\/p>\n","protected":false},"author":344049,"featured_media":158322,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557],"tags":[1256,505],"tutorials_categories":[],"class_list":["post-158277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-ajax","tag-javascript"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/158277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=158277"}],"version-history":[{"count":11,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/158277\/revisions"}],"predecessor-version":[{"id":159776,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/158277\/revisions\/159776"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/158322"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=158277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=158277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=158277"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=158277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Basic AJAX Flow<\/h3>\n
\n
Setting Up a New Theme Environment<\/h4>\n
style.css<\/code>, which is required by WordPress, and\u00a0functions.php<\/code>, which we’ll use to add our own functionality, and finally\u00a0script.js<\/code>, which will contain our JavaScript code. Add the following to the stylesheet:<\/p>\nscreenshot.png<\/code>. It will show up in the Appearance<\/strong> section when you’re ready to activate the theme.<\/p>\n![\"Add](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/08\/select-theme.png\")
Adding a\u00a0Button<\/h4>\n
twentysixteen_entry_meta()<\/code> which resides in inc\/template-tags.php<\/code> in the parent theme.<\/p>\n0<\/code> if the value is empty.<\/p>\nSVG - Base64<\/code> link below it. Copy-paste the code you receive into the image source like so:<\/p>\n![\"Our](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/08\/love-button.png\")
Triggering an Action<\/h4>\n
Data Requirements<\/h4>\n
admin-ajax.php<\/code> file within wp-admin<\/code>. We have no way to add this URL to our script (short of hardcoding it, which is out of the question) so we’ll use some WordPress trickery.<\/p>\nwp_localize_script()<\/code> function was originally intended to translate strings in JavaScript files, which it does well. We can also use it to pass variables to our JavaScript files, in this case the URL of our AJAX file.<\/p>\najax_test_scripts()<\/code> function like so:<\/p>\najaxTest<\/code>\u00a0, which will contain the array given in the final parameter as properties. To grab the value of ajax_url<\/code> we can use ajaxTest.ajax_url<\/code> in our JavaScript.<\/p>\n![\"Twenty](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/08\/twenty-sixteen-dom.png\")
post<\/code> and contains the numeric ID in the ID property. While not the most elegant solution we can grab the ID from there.<\/p>\nadmin-ajax<\/code> we need a way to differentiate between them \u2013 this is what this parameter is used for.<\/p>\nSending An AJAX Request<\/h4>\n
wp-admin\/admin-ajax.php<\/code> that contains the post ID and an action. Here’s how.<\/p>\n$.ajax()<\/code> is the function used which takes a bunch of parameters. url<\/code> contains the target which is currently our website’s ajax-url.php<\/code> file. The type is set to post<\/code> which should be familiar from HTML forms. The data parameter is an object that contains key-value pairs we want to send to the server. Later on, we’ll be able to read them with $_POST['action']<\/code> and $_POST['post_id']<\/code>.<\/p>\nProcessing the Request<\/h4>\n
admin-ajax.php<\/code> file since the request is sent there. This is a core file though, which means that editing is a big no-no. WordPress allows you to precess AJAX calls using hooks and the action parameter. The pattern is the following:<\/p>\nwp_ajax_add_love<\/code> and\/or wp_ajax_nopriv_add_love<\/code>. The nopriv one fires for logged out users, the one without it fires for logged in users only. In our case we’d like both. As a quick test, let’s hard-code a response:<\/p>\n4<\/code> and then used the die()<\/code> function. This is required in WordPress, otherwise you will receive a 0<\/code> at the end of every response. If you click the button now you should see the following:<\/p>\n![\"Ajax](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/08\/ajax-button.png\")
Performing UI Changes Using the Response<\/h4>\n
$number<\/code> variable. On line 14, I modify the text of this element to contain the response, which is the new love count.<\/p>\nAdditional Concerns<\/h3>\n
\n
WordPress and the Power of AJAX<\/h3>\n
\n