If you have an engaged and active customer base for your website, you might wonder how you can provide a truly interactive and enriched web experience for them. Offering real-time interactivity can be a big draw for your audience. <\/p>\n\n\n\n
Fortunately, Asynchronous JavaScript and XML (Ajax) is an approachable method of adding interactive features to your website. When it comes to WordPress, you can even simplify the process using an Ajax-based plugin. <\/p>\n\n\n\n
In this article, we\u2019ll introduce you to Ajax and how it works. We\u2019ll also walk you through getting started with Ajax in WordPress. Let\u2019s jump right in! <\/p>\n\n\n\n\n\n
Ajax brings together a number of different programming languages, such as HTML, CSS, JavaScript, and more. In action, it works behind the scenes to take requests from a web browser, send them to the server, and transfer the results back to the browser. <\/p>\n\n\n\n
As a web user, you won\u2019t know that Ajax is at work. You\u2019ll simply get a highly interactive experience. On your own site, for example, you might use Ajax to accept likes on posts from users who are logged in, and display a real-time tally.<\/p>\n\n\n\n
With Ajax, users don\u2019t have to reload a page to see certain changes to it. This means your site will stay fast, and deliver a smoother user experience. Since Ajax is efficient, sending only the data it needs back and forth, it can maximize bandwidth and avoid heavier data transfers. <\/p>\n\n\n\n
As web users, we reap the benefits of Ajax all the time. One example is Google\u2019s autocompleting search function.<\/p>\n\n\n\n
Other examples you might be familiar with include Facebook comments and Instagram likes. Ajax is likely at work anywhere you are able to interact with a web page and receive information in return instantly.<\/p>\n\n\n\n
When it comes to WordPress, there are a few ways Ajax comes in handy. First, we\u2019ll take a look at the Ajax URL and how to use it alongside WordPress function hooks<\/a>. <\/p>\n\n\n\n Since WordPress uses Ajax by default in the admin dashboard, adding more Ajax functionality there is not difficult. If you want to use Ajax on the front end of your site, however, you will need to understand how the Ajax URL<\/a> works. <\/p>\n\n\n\n In WordPress, your admin-ajax.php<\/em> file has a URL. This provides the information needed to send data for processing, and is vital to front-end Ajax development. WordPress employs a wp_localize_script()call to use the Ajax URL to connect JavaScript and PHP functions, as PHP can not directly mirror these without some help. <\/p>\n\n\n\n WordPress employs hooks in its programming<\/a>, as a way for plugins and themes to interact with the WordPress Core. Hooks come in two varieties: “actions” and “filters.” With Ajax, you\u2019ll be using action hooks to execute functions. <\/p>\n\n\n\n Actions enables you to add data to WordPress or change how it operates. With Ajax, you\u2019ll use the action wp_ajax_(action). A custom function can then be hooked into this, to be executed during an Ajax call. <\/p>\n\n\n\n For example, this WordPress sample code<\/a> shows how an Ajax call and a JavaScript object can be combined in the same file to execute an action:<\/p>\n\n\n\n <?php You can also create separate JavaScript files for your Ajax actions. You\u2019ll just need to be sure to use the Ajax URL, so the calls don\u2019t get lost. <\/p>\n\n\n\n If you want to experiment with Ajax, the best way is to build a plugin with it. Fortunately, there are many pieces of example code or bare-bones plugins out there that you can start from. For this example, we\u2019re going to use some downloadable WordPress Plugin Boilerplate sample code.<\/p>\n\n\n\n First, you\u2019ll need to name your plugin and create the appropriate file structures for it. The name must be unique, and not conflict with any other tool in the WordPress Plugin Directory<\/a>. That\u2019s because when a user uploads your plugin, it will go into their wp-content\/plugins\/<\/em> directory.<\/p>\n\n\n\n Once you\u2019ve decided on a name, you need to create at least the following three files in your own wp-content\/plugins\/<\/em> directory:<\/p>\n\n\n\n You\u2019ll want to put the .php<\/em> file in your new plugin\u2019s folder, and create separate subfolders for the JavaScript and CSS files to live in. All the files necessary for your plugin to function will need to be located in the same master folder. <\/p>\n\n\n\n In the next step, you\u2019ll see that the sample code we\u2019re using comes with pre-created file structures. We think it\u2019s important to understand how to start from scratch, however, and why your files need to be structured a certain way. <\/p>\n\n\n\n Using a sample code file is a good place to start when trying out Ajax on your first plugin. You always want to double-check your sample code, however, to make sure it\u2019s safe and doesn\u2019t contain errors. <\/p>\n\n\n\n As we mentioned earlier, we\u2019re going to use the WordPress Plugin Boilerplate<\/a> for our example. This sample code comes packaged with the files you\u2019ll need to complete your plugin.<\/p>\n\n\n\n This sample plugin also adheres to WordPress\u2019 coding<\/a> and documentation standards<\/a>. You can download the plugin\u2019s .zip<\/em> file from the boilerplate website to get started.<\/p>\n\n\n\n The plugin sample code we\u2019re using is built with Object-Oriented Programming (OOP). This helps programmers organize their code, and creates an easily sharable and reusable pattern of development.<\/p>\n\n\n\n Plus, the code comes packaged with all the files necessary for plugin development, including the activation and deactivation files in the \/includes\/<\/em> directory. You\u2019ll also find it easy to locate the public-facing and admin-facing files as needed.<\/p>\n\n\n\n Let\u2019s take a look at our sample plugin, by viewing the beginning of the plugin-name.php<\/em> file: <\/p>\n\n\n\n <?php All the information contained in this portion of the code is important for registering your plugin with WordPress. This is how the plugin directory will know what to display for your plugin. <\/p>\n\n\n\n Now you\u2019ll need to do a few things in order to connect all the dots, including: <\/p>\n\n\n\n One important element of the Ajax approach is defining who can use each function, especially when creating front-end interactivity. We\u2019ll hook in a front-end action with some sample code from WordPress<\/a>:<\/p>\n\n\n\n if ( is_admin() ) { Let\u2019s take note of a few things in this example. First, these actions will be available to anyone on the site, whether they are logged into an account or not. That\u2019s indicated by the \u2018wp_ajax_nonpriv_()\u2019 call. Second, you can see that there are also back-end, administrative actions being hooked in during the front-end actions.<\/p>\n\n\n\n To understand the process that takes place in this set of actions, it\u2019s also important to know that my_frontend_action will trigger the PHP function my_frontend_action_callback().<\/p>\n\n\n\n Once you set up all the action hooks and corresponding functions you need, you\u2019ll want to test and potentially debug your plugin (if there are any issues). Your web host might offer a debugging tool as a part of its hosting package.<\/p>\n\n\n\n Here at WP Engine, we provide the WP Engine Error Log<\/a> to help you find trouble spots.<\/p>\n\n\n\n Our error log provides a color-coded walkthrough of any errors in your site\u2019s code, and where they interact with our servers or other parts of your site. This makes troubleshooting a lot easier, whether you\u2019re working with Ajax or something else entirely.<\/p>\n\n\n\n Now that you\u2019re on your way to creating amazing WordPress plugins with Ajax, you might want to assess what other tools you\u2019ll need<\/a>. WP Engine is here to help you create new plugins for WordPress.<\/p>\n\n\n\n Whether you\u2019re interested in our WP Engine Error Log so you can execute a bug-free plugin, or you just need solid and secure hosting for WordPress sites<\/a>, we offer a wide variety of plans<\/a> and resources for you to use!\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":" If you have an engaged and active customer base for your website, you might wonder how you can provide a truly interactive and enriched web experience for them. Offering real-time interactivity can be a big draw for your audience. Fortunately, Asynchronous JavaScript and XML (Ajax) is an approachable method of adding interactive features to your…<\/span><\/span><\/p>\n","protected":false},"author":131,"featured_media":146003,"template":"","resource-topic":[904,901],"resource-role":[895,896],"resource-type":[916],"class_list":["post-93198","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nThe Ajax URL in WordPress<\/h3>\n\n\n\n
How to use the Ajax action hook in WordPress<\/h3>\n\n\n\n
add_action( ‘wp_ajax_my_action’, ‘my_action’ );
function my_action() {
global $wpdb; \/\/ this is how you get access to the database
$whatever = intval( $_POST[‘whatever’] );
$whatever += 10;
echo $whatever;
wp_die(); \/\/ this is required to terminate immediately and return a proper response
}<\/p>\n\n\n\nHow to use Ajax by working with an example plugin (3 steps)<\/h2>\n\n\n\n
Step 1: Create the appropriate file structures<\/h3>\n\n\n\n
\n
Step 2: Choose some sample code to start with<\/h3>\n\n\n\n
Step 3: Hook actions into your code<\/h3>\n\n\n\n
\/**
* The plugin bootstrap file
*
* This file is read by WordPress to generate the plugin information in the plugin
* admin area. This file also includes all of the dependencies used by the plugin,
* registers the activation and deactivation functions, and defines a function
* registers the activation and deactivation functions, and defines a function
* that starts the plugin.
*
* @link http:\/\/example.com
* @since 1.0.0
* @package Plugin_Name
*
* @wordpress-plugin
* Plugin Name: WordPress Plugin Boilerplate
* Plugin URI: http:\/\/example.com\/plugin-name-uri\/
* Description: This is a short description of what the plugin does. It’s displayed in the WordPress admin area.
* Version: 1.0.0
* Author: Your Name or Your Company
* Author URI: http:\/\/example.com\/
* License: GPL-2.0+
* License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.txt
* Text Domain: plugin-name
* Domain Path: \/languages
*\/<\/p>\n\n\n\n\n
add_action( ‘wp_ajax_my_frontend_action’, ‘my_frontend_action’ );
add_action( ‘wp_ajax_nopriv_my_frontend_action’, ‘my_frontend_action’ );
add_action( ‘wp_ajax_my_backend_action’, ‘my_backend_action’ );
\/\/ Add other back-end action hooks here
} else {
\/\/ Add non-Ajax front-end action hooks here
}<\/p>\n\n\n\nStep 4: Test and debug your plugin<\/h3>\n\n\n\n
Explore other WP Engine resources and Tools<\/h2>\n\n\n\n