What Is AJAX and How to Use It in WordPress (A Step-by-Step Guide)

Key Takeaways

• AJAX enables asynchronous data exchange, allowing you to update specific parts of a webpage without reloading the entire screen.
• WordPress supports AJAX through two primary channels: the legacy admin-ajax.php (ideal for backend tasks) and the REST API (faster and preferred for frontend applications).
• Every AJAX request in WordPress must use Nonces (security tokens) to verify requests and prevent Cross-Site Request Forgery (CSRF) attacks.
• Since dynamic AJAX requests often bypass page caching, high-traffic sites require robust hosting solutions like Cloudways to maintain speed and stability.

Using AJAX with WordPress is the standard technique web developers use to create dynamic, interactive, and “app-like” experiences. Whether it’s a live search bar, an infinite scroll feed, or a contact form that submits instantly, AJAX allows you to update content without forcing the user to wait for a page refresh.

At its core, AJAX (Asynchronous JavaScript and XML) combines JavaScript and server-side logic to send and receive data in the background. While the name historically references XML, modern WordPress development almost exclusively uses JSON to transport data. It is faster and lighter.

In this guide, we will explore how AJAX works in the WordPress ecosystem, compare the two major implementation methods (REST API vs. admin-ajax), and provide a step-by-step tutorial to help you build your own AJAX functionality securely.

Experience Superior & Hands-Off WordPress Hosting with Autonomous

Manage your WordPress site with ease on Cloudways Autonomous. Get fast, secure hosting that scales with your traffic—all without any setup headaches.

Try Today

Brief Overview of AJAX

AJAX stands for Asynchronous JavaScript And XML. It is not a single programming language, but rather a set of web development techniques that allows a website to communicate with a server in the background.

The primary goal of AJAX is to update specific parts of a web page, like a news feed, a shopping cart, or a comment section, without requiring the user to reload the entire page. This creates a faster, smoother, and more “app-like” experience for visitors. Speaking of offering a mobile app-like experience to your visitors, you may also want to check out my detailed guide on WordPress PWA.

The Role of JSON (vs. XML)

Historically, AJAX relied on XML (Extensible Markup Language) to transport data between the browser and the server. This is where the “X” in AJAX comes from.

However, in modern WordPress development, JSON (JavaScript Object Notation) has largely replaced XML. JSON is lighter, easier for humans to read, and natively understood by JavaScript, making it significantly faster for browsers to parse and render. While the technology is still called “AJAX” out of habit, you will almost always be working with JSON data today.

A Real-World Example

A simple example is an appointment booking form on a website. When you select a date from a calendar, a second drop-down menu instantly updates to show the available time slots for that specific day.

Behind the scenes, an AJAX script detects your date selection, sends a request to the server to ask, “What times are free on this date?”, and updates only the time slot dropdown with the answer, all without refreshing the page or interrupting your workflow.

AJAX vs. WordPress REST API

For over a decade, WordPress developers routed almost all AJAX requests through a single file: admin-ajax.php. While this method still works, the introduction of the WordPress REST API has shifted the landscape significantly.

The term “AJAX” refers to the technique of sending data in the background, but where you send that data matters for performance.

Cloudways Performance Bootcamp · Free · Mar 10–11

From CDN to Core Web Vitals, watch experts fix real WordPress performance issues, live.

Register Now →

1. The Legacy Way: admin-ajax.php

The admin-ajax.php file was originally designed for the WordPress backend. When you use it for frontend requests (like a contact form), it forces WordPress to load a large portion of the admin dashboard environment for every single click. This can be resource-heavy and slower, especially on high-traffic sites. It remains the standard for backend admin tasks but is less ideal for public-facing features.

2. The Modern Way: WordPress REST API

The REST API is the modern standard for handling AJAX requests in WordPress. It allows you to create custom endpoints (URLs) that are lightweight, cache-friendly, and natively support JSON. Because it doesn’t load the full admin dashboard, it is generally faster and more efficient for frontend applications.

Feature	admin-ajax.php (Legacy)	REST API (Modern)
Best Use Case	Backend / Admin Dashboard Tasks	Frontend Applications & External Apps
Performance	Slower: Loads heavy admin scripts	Faster: Lightweight & Optimized
Caching	Difficult to cache reliably	Native HTTP Caching support
Data Format	Requires manual parsing (POST/GET)	Native JSON support

How Does AJAX Work?

Regardless of whether you use the REST API or admin-ajax.php, the core mechanics of an AJAX request remain the same. It creates a continuous loop of communication between the visitor’s browser and your WordPress server.

Here is the step-by-step lifecycle of an AJAX request:

• Event Trigger: A user interacts with a page element (e.g., clicks a “Load More” button, submits a contact form, or types in a search bar).
• Browser Request: JavaScript intercepts this action and sends a data request to the server in the background. Modern WordPress sites use the Fetch API for this, while older themes may use XMLHttpRequest.
• Server Processing: WordPress receives the request, runs the necessary PHP code (like querying the database for new posts), and generates a result.
• The Response: The server sends the data back to the browser, typically in JSON format (a lightweight text format).
• DOM Update: JavaScript takes this new data and inserts it directly into the HTML of the page (the Document Object Model), updating the screen instantly without a reload.

This entire process happens in milliseconds. To the user, it feels like the website is reacting instantly to their actions, rather than waiting for a new page to load.

Managed WordPress Hosting Built for Dynamic Sites

Run AJAX powered WordPress features smoothly with Cloudways’ optimized server stacks, and caching configurations designed for dynamic requests.

TRY 3 DAYS FREE

Why Is AJAX Useful? (Real-World Use Cases)

AJAX is the engine behind the smooth, “app-like” feel of modern websites. By eliminating full page reloads, you significantly improve User Experience (UX) and server efficiency. Here are the most common ways developers use it in WordPress:

Use Case #1: Infinite Scroll & “Load More” Posts

Instead of forcing users to click “Page 2” and wait for a reload, AJAX allows you to load new content dynamically. This is often called Infinite Scroll.

Example: When a user reaches the bottom of your blog, an AJAX script automatically fetches the next set of posts and appends them to the current list instantly. This keeps users engaged longer.

Use Case #2: Real-Time Updates (Chat & Notifications)

AJAX allows a page to check for new data in the background without user intervention.

Example: In a live chat widget, the browser periodically asks the server, “Are there any new messages?” If yes, AJAX inserts them into the chat window immediately. This same logic powers Facebook notifications and live sports scores.

Use Case #3: Dynamic Form Submission

Submitting a contact form usually requires a page reload. If the user makes a typo, the reload wipes their data, causing frustration. AJAX solves this.

Example: When a user clicks “Submit,” AJAX sends the data for validation. If there’s an error, such as a missing email, an error message appears instantly next to the field. In the Cloudways hosting calculator tool, for example, the email field is highlighted with a red outline. If everything is valid, a “Thank You” message appears, all without the page ever refreshing.

Use Case #4: Auto-Saving Drafts

AJAX auto-saves drafts in WordPress. This helps prevent data loss and provides a seamless writing experience for WordPress users.

Example: WordPress itself uses AJAX (via the Heartbeat API) to auto-save your post editor content every 60 seconds. It sends your current text to the database in the background so that if your browser crashes, you don’t lose your draft.

Using AJAX in WordPress (The Core Concepts)

WordPress supports AJAX natively. If you look inside the wp-admin folder, you will see a file named admin-ajax.php. This file was initially created to handle AJAX requests for the WordPress Admin Dashboard, but today it is used for both backend and frontend requests.

The Golden Rule

All WordPress AJAX requests must go through a PHP script. In the classic WordPress architecture, admin-ajax.php is the central hub. It acts as the gatekeeper: it receives the request, finds the correct PHP function to run, and returns the content.

How It Works: The “Action” Parameter

To initiate an AJAX request, your JavaScript must send an action parameter with the request data (using either GET or POST). This is the secret handshake that tells WordPress which code to run.

For example, if you send an action named my_post_like, admin-ajax.php constructs two specific “hooks” based on that name:

• wp_ajax_my_post_like: Fires if the user is logged in.
• wp_ajax_nopriv_my_post_like: Fires if the user is not logged in (a guest).

You must “hook” your PHP function to these tags so WordPress knows what to do when it receives that action.

The Developer’s Toolkit

If you are new to WordPress development, understanding the workflow is critical before writing code. You need four key components:

• wp_enqueue_script(): You cannot just paste JavaScript into your header. You must use this function to properly load your script file in the WordPress queue.
• wp_localize_script(): This is the bridge. JavaScript cannot read your database or know your website’s URL. This function allows you to pass PHP data (like the admin-ajax.php URL and Security Nonces) into a JavaScript object so your script can use it.
• check_ajax_referer(): The security guard. This checks the “Nonce” (Number Used Once) to ensure the request is valid and coming from your actual site, not a hacker.
• wp_send_json_success() / wp_send_json_error(): The response. After your PHP function finishes its job, you use these functions to send the data back to the browser in JSON format and properly close the connection.

Mini Project: Creating an AJAX-Powered “Post Like” Button in WordPress

Theory is great, but let’s be honest, you’ll be better able to explain how to implement Ajax in WordPress with a practical mini project. So, let’s build something real together.

In this mini-project, we are going to build a “Like Button” for your blog posts.

• The Goal: When a visitor clicks “Like,” the number goes up instantly.
• The Catch: We won’t reload the page. That’s the magic of AJAX.

What you will need: I recommend using the free plugin “WPCode” or any plugin to add code snippets to WordPress. It’s safer than editing files directly and ensures this tutorial works on any theme, even the new Twenty Twenty-Five block theme.

Let’s get started…

Step 1: Add the Like Button to Your Posts

First things first: We can’t click a button if it doesn’t exist.

We need to tell WordPress to automatically add a small “Like” button to the bottom of every blog post. To do this, we will use a small “filter” function.

What to do:

• Open WPCode and create a new PHP Snippet.

• Paste the following code:

// ---------------------------------------------------------
// 1. ADD THE BUTTON (Automatically at the end of posts)
// ---------------------------------------------------------
add_filter('the_content', 'my_auto_add_like_button');

function my_auto_add_like_button($content) {
    // We only want this button on single blog posts, not pages or archives
    if ( is_singular('post') ) {
        $post_id = get_the_ID();
        // Check if there are existing likes; default to '0' if none
        $likes = get_post_meta($post_id, '_post_likes', true) ? : '0';

        // Create the HTML for the button
        // We use 'data-id' to store the Post ID so JavaScript can find it later
        $button = '<div style="margin-top: 30px; padding: 20px; background: #f9f9f9; border-radius: 8px;">
            <button id="post-like-button" data-id="' . esc_attr($post_id) . '" style="cursor:pointer; padding: 10px 20px; background: #0073aa; color: white; border: none; border-radius: 5px; font-size: 16px;">
            ❤️ Like (<span id="like-count">' . esc_html($likes) . '</span>)
            </button>
        </div>';

        // Append the button to the end of the post content
        return $content . $button;
     }
    return $content;
}

Make sure for the Location option, you leave it as “Run Everywhere“.

Lastly, toggle the switch from Inactive to Active (top right) and click Save Snippet.

Go ahead and visit any blog post on your site. You should now be able to see a ❤️ Like button.

Like this:

But right now, if you click it, nothing happens. That’s because the button has no brain yet.

Let’s fix that.

Step 2: Create the PHP Handler for Likes

Now we need to teach WordPress what to do when someone clicks that button. We need a function that receives the request, talks to the database, updates the count, and sends the new number back.

What to do: In the same PHP snippet you just created, paste this code right below the previous block:

// ---------------------------------------------------------
// 2. THE AJAX HANDLER (Updates the Database)
// ---------------------------------------------------------
// We register two hooks: one for logged-in users, one for guests
add_action('wp_ajax_my_post_like', 'my_post_like_handler'); 
add_action('wp_ajax_nopriv_my_post_like', 'my_post_like_handler'); 

function my_post_like_handler() {
    // SECURITY FIRST: Verify the "nonce" (security token).
    // If the check fails, the script dies immediately. This prevents hackers from faking clicks.
    check_ajax_referer('my_like_nonce_action', 'security');

    // Get the Post ID from the request
    $post_id = intval($_POST['post_id']);

    // Get current likes, add 1, and save it back to the database
    $current_likes = get_post_meta($post_id, '_post_likes', true);
    $current_likes++;
    update_post_meta($post_id, '_post_likes', $current_likes);

    // Send the success message (JSON) back to the browser
    wp_send_json_success(array('new_count' => $current_likes));
    
    // Always end AJAX functions with wp_die()
    wp_die();
}

Okay great! We have now created the logic. WordPress now knows that if it receives a signal named my_post_like, it should update the database. But there is still a missing link: The Bridge.

Step 3: The “Bridge” (Passing Data to JavaScript)

Here is a tricky part about WordPress: JavaScript files are blind. Your JavaScript file runs in the browser, so it doesn’t know your website’s database URL or the secret security handshake (Nonce). We have to explicitly pass these details from PHP to JavaScript.

What to do: Add this final block to your PHP snippet:

// ---------------------------------------------------------
// 3. PASS DATA TO JAVASCRIPT
// ---------------------------------------------------------
function my_enqueue_ajax_scripts() {
    // This creates a global variable called "ajax_object" that JS can read
    // It contains the URL to send requests to, and the Security Token
    wp_enqueue_script('my-custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true);

    wp_localize_script('my-custom-js', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'security' => wp_create_nonce('my_like_nonce_action')
    ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_ajax_scripts');

Step 4: Add the JavaScript to Handle Clicks

Now for the final piece. We need a script that listens for the click, packages up the data, sends it to our PHP “Brain,” and then updates the screen when the answer comes back.

What to do:

• Create a new snippet in WPCode.
• Set the Code Type to JavaScript Snippet.
• Paste this code:

document.addEventListener('DOMContentLoaded', function() {
    // 1. Find the button
    const likeBtn = document.getElementById('post-like-button');

    // Only run this code if the button actually exists on the page
    if (likeBtn) {
        likeBtn.addEventListener('click', function(e) {
            e.preventDefault(); // Stop the button from jumping around
            
            // 2. Prepare the data to send
            let postId = this.dataset.id; // Get the ID from the button
            let formData = new FormData();
            
            formData.append('action', 'my_post_like'); // This MUST match the PHP action name
            formData.append('post_id', postId);
            formData.append('security', ajax_object.security); // Send the Security Token

            // 3. Give the user feedback (Make the button say "Updating...")
            let countSpan = document.getElementById('like-count');
            likeBtn.innerHTML = 'Updating...';

            // 4. Send the Request (Using the modern Fetch API)
            fetch(ajax_object.ajax_url, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json()) 
            .then(data => {
                if (data.success) {
                    // 5. If successful, update the number!
                    countSpan.innerText = data.data.new_count;
                    likeBtn.innerHTML = '❤️ Liked! (' + data.data.new_count + ')';
                } else {
                    alert('Something went wrong.');
                }
            })
            .catch(error => console.error('Error:', error));
        });
    }
});

We now have a complete working flow:

• Button Added: The Like button is displayed on each blog post.
• Server Logic Ready: The PHP handler can receive the request and update the database.
• Data Passed Securely: AJAX URL and security nonce are available to JavaScript.
• Interaction Handled: JavaScript listens for clicks, sends the request, and updates the count instantly.

Step 5: Test the Like Button

Let’s see what we built actually works. To do this:

• Go back to your blog post.
• Refresh the page (to make sure the new scripts are loaded).
• Click the ❤️ Like button.
• Watch closely.

Does the text change to “Updating…” and then instantly flip to “Liked! (1)“?

If yes, congratulations! You just successfully implemented AJAX in WordPress. You updated the server database from the frontend without ever reloading the page.

Here’s the GIF of our Ajax WordPress mini project in action:

Handling the “Heartbeat API” & Server Load

Back in 2013, WordPress introduced the Heartbeat API. This feature connects the server and browser to provide real-time communication. It is responsible for several critical features you use daily:

• Auto-Save: Saving your drafts automatically so you don’t lose work.
• Login Expiration: Warning you if your session times out.
• Post Lock: Managing collaborative editing.

Example: The “Post Lock” Feature

When you try to edit a post that another user is already working on, the Heartbeat API detects this instantly. A pop-up warning appears with three actions:

• Go Back: Return to the posts list.
• Preview: View the post without editing.
• Take Over: Kick the other user out and start editing.

The Hidden Performance Cost

These features are possible because the Heartbeat API sends a request to admin-ajax.php every 15 to 60 seconds (depending on whether you are active in the tab).

Imagine you log into your dashboard and start drafting a post. Then, you open a new tab and browse other sites for 20 minutes. Even though you aren’t clicking anything, your dashboard tab is still logged in and the Heartbeat is continuously hitting your server every minute.

This is not an exaggeration. I actually did this myself and attached the screenshot below for you guys:

If you have 5 editors working at once, that is hundreds of extra requests hitting your server CPU unnecessarily. This usually slows down the WordPress admin area significantly.

Solution: Optimizing Heartbeat with Cloudways Breeze

To speed up the WordPress backend, the best practice is not to disable Heartbeat (which breaks auto-save) but to limit its frequency.

If you are a Cloudways customer, you don’t need a separate plugin. Cloudways Breeze comes pre-installed and handles this natively.

• Log in to your WordPress Admin Dashboard.
• Navigate to Settings → Breeze → Heartbeat API.

• You will find granular controls for different areas of your site:
  • Heartbeat Frontend: You can usually Disable this, as most visitors don’t need real-time server communication.
  • Heartbeat Backend (Dashboard): Set this to 2 minutes (120 seconds). This reduces server load by 8x compared to the default 15 seconds.
  • Heartbeat Post Editor: Set this to 2 minutes (120 seconds). This is frequent enough to save drafts but slow enough to save CPU.

Analyzing Requests on admin-ajax.php

Plugin requests are the most common cause of admin-ajax.php issues. Many plugins like popup builders, social share counters, or live chat widgets constantly poll your server and can slow down the WordPress admin. However, not all requests are bad. The goal is to identify which requests are slowing you down.

Here are the best ways to audit admin-ajax.php to improve performance :

1. Enable Debugging

First, make sure you can see errors if they happen. Enable WordPress debugging mode by adding the following line to your site’s wp-config.php file:
PHP

define('WP_DEBUG', true);

2. Monitor Network Requests (Browser)

Load your site in Chrome or Firefox and open Inspect > Network.

Reload: Press Ctrl + R to reload the page. Watch for requests that appear automatically. These are usually from plugins or the Heartbeat API polling the server. Pay attention to the “Time” column.

Filter: Click the Fetch/XHR filter button. This hides images and CSS so you only see AJAX requests.

Inspect: Click the “Like” button you just created. You should instantly see a new request appear in the list. Again, take a look at the Timing tab and compare the “Response Time” to what we noted earlier. If one request takes 2 seconds while others take 200ms, you have found a suspect.

In my case, the “Like” button’s response time is 816 ms, more then the other requests. This is a clear sign for me to start optimizing.

3. Identify the Culprit (Cloudways Method)

Sometimes the browser doesn’t tell the whole story. If you can’t spot the issue in the Network tab, look at your server data.

• If you are a Cloudways customer, you can check this directly in the dashboard:
• Navigate to Monitoring > Analytics.
• Click the PHP tab.

Scroll down to the list labeled “Top Requested PHP Pages”.

Here you will see a list of URLs like /wp-cron.php and /wp-admin/admin-ajax.php.

• Request Count: If admin-ajax.php has a significantly higher count than other pages, a plugin is likely spamming your server.
• Avg. Duration: If the duration is high (e.g., >1 second), the script is struggling to process the request, which indicates a heavy database query or a plugin conflict.

4. Deactivate Plugins

Once you have a suspect (e.g., a specific calendar or gallery plugin):

Deactivate the plugin.

Reload the page and monitor the Network tab again.

If the response time drops significantly or the heavy admin-ajax.php requests disappear, you have confirmed the culprit.

AJAX Security Considerations

There are certain security considerations to be mindful of when dealing with AJAX. Because AJAX endpoints are publicly accessible, they are a favorite target for attackers.

Cross-Site Scripting (XSS): AJAX apps are vulnerable to XSS. This means if you don’t sanitize input (using functions like sanitize_text_field), a hacker can inject malicious JavaScript into your database. When other users load that content via AJAX, the malicious script runs in their browser.

CSRF Attacks (Missing Nonces): Without a “Nonce” (Number Used Once), a hacker can trick a logged-in admin into clicking a link that triggers a background AJAX request (like deleting a post) without the admin knowing. Always use check_ajax_referer() to prevent this.

Data Exposure: AJAX function calls often return data in JSON. If you don’t check user capabilities (using current_user_can()), you might accidentally send sensitive private data to a guest user who inspects the AJAX response.

Browser Compatibility: While modern AJAX (Fetch API) is widely supported, older AJAX implementations can behave inconsistently across different browsers if not handled correctly (e.g., using jQuery as a fallback).

Summary

After reaching this point, you have moved beyond just knowing what AJAX is—you have built a working feature with it.

We explored how WordPress AJAX allows for seamless updates, compared the modern REST API vs. the classic admin-ajax.php, and built a live “Like” button from scratch. Most importantly, we learned that AJAX requires a solid hosting foundation—using tools like Redis and Breeze on Cloudways WordPress hosting ensures your dynamic features scale without slowing down your site.

Hope you have found this blog post helpful and informative, and I encourage you to try out AJAX in your WordPress websites.