In WordPress, making an AJAX request is slightly different due to the way the platform handles backend requests. Let's walk through an example where we perform an AJAX request in a WordPress blog post to fetch a "Hello World" message using the WordPress AJAX API.

    Steps:
  1. **Set up the AJAX handler in PHP (functions.php or custom plugin).
  2. **Use JavaScript/jQuery in your blog post or theme to make the request.**

      3. Set Up the AJAX Handler in `functions.php`:

      Add the following code to your theme's `functions.php` file or inside a custom plugin. This sets up the AJAX handler for both logged-in and logged-out users. 

      // Enqueue the script to be used on the front-end
function my_enqueue_ajax_script() {
    wp_enqueue_script('my-ajax-script', get_template_directory_uri() . '/js/my-ajax.js', array('jquery'), null, true);

    // Localize script to pass AJAX URL to JS
    wp_localize_script('my-ajax-script', 'my_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php') // Required to call AJAX in WordPress
    ));
}
add_action('wp_enqueue_scripts', 'my_enqueue_ajax_script');

// The function to handle the AJAX request
function my_ajax_handler() {
    // Output 'Hello World' when the AJAX request is received
    echo 'Hello World from AJAX!';
    wp_die(); // End the request properly
}

// Set up for logged-in users
add_action('wp_ajax_my_ajax_action', 'my_ajax_handler');

// Set up for non-logged-in users
add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_handler');

      Explanation:

      - `wp_localize_script`: This function passes the `admin-ajax.php` URL to the JavaScript file, which is needed to make the AJAX call. - `wp_ajax_` and `wp_ajax_nopriv_`: These hooks handle AJAX requests for logged-in and logged-out users, respectively. - The `my_ajax_handler()` function outputs the "Hello World" message when called via AJAX.

      2. **Create the JavaScript File (`my-ajax.js`):

      You will create this JavaScript file inside your theme's `js` directory (create the directory if it doesn't exist). This script will send the AJAX request when a button is clicked.

      javascript

      jQuery(document).ready(function($) {
    // When the button is clicked
    $('#fetch-message').on('click', function() {
        $.ajax({
            url: my_ajax_obj.ajax_url, // The AJAX URL provided by wp_localize_script
            type: 'POST', // Method
            data: {
                action: 'my_ajax_action' // The action name set in the PHP handler
            },
            success: function(response) {
                $('#response').html('
      ' + response + '
      '); // Show the response
            },
            error: function() {
                $('#response').html('
      Something went wrong.
      ');
            }
        });
    });
});

      3. **Add the HTML to Your Blog Post:

      You can include this HTML inside any WordPress page or post using the Gutenberg editor or classic editor. 

      <p>Click the button below to get a message via AJAX:</p>
<button id="fetch-message">Get Message</button>
<div id="response"></div>

      Make sure the `my-ajax.js` file is properly enqueued in your theme or plugin.

      4. **Final Folder Structure Example (Theme):** ``` /your-theme/ functions.php /js/ my-ajax.js

      5. **How It Works:

      1. When the button is clicked, the JavaScript sends an AJAX request to the `admin-ajax.php` file using the action `my_ajax_action`. 2. WordPress routes the request to the `my_ajax_handler()` function defined in `functions.php`. 3. The handler sends back "Hello World from AJAX!", which is displayed inside the `<div id="response">`.

      This setup enables you to make a simple AJAX request within WordPress, following its API and security best practices.

      Also Read:

      If you're customizing your WordPress site, you might also like How to Create a Custom Contact Page.

      If you liked this guide or have any questions, feel free to leave a comment! Don't forget to subscribe to my YouTube channel for more tutorials: SK NetKing YouTube Channel.