Blueprint for AJAX in WordPress

In this members-only tutorial, we share a simplified blueprint/template for dynamically fetching/loading any piece of content (PHP code) when a link/button is clicked i.e., on-demand in WordPress.

Here's what happens behind the scenes in a nutshell:

1. User clicks on the button
2. Our custom JavaScript code executes ajax() function while passing it a) the URL to the file in WordPress AJAX API responsible for handling AJAX requests and b) name of an "action"
3. Request gets sent to admin-ajax.php
4. admin-ajax.php looks at the registered action and runs the function hooked to this action
5. The response gets sent back to JavaScript and we display that on the front end

After implementing the steps in this tutorial and seeing them work, you should be able to easily duplicate/extend this for your own specific requirements.

Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client and navigate to site's /wp-content/plugins/my-custom-functionality-master.

Create a file named say, ajax-blueprint.js in the plugin's assets/js directory.

Edit plugin.php and

a) add the following inside the custom_enqueue_files() function: