How to Implement an \'Load More\' Ajax Button for WordPress Posts?

Load More Posts Ajax Button in WordPress

This tutorial addresses the issue of implementing an "Load More" button in WordPress to incrementally load posts via Ajax. The problem involves integrating jQuery, Ajax, and WordPress functions to retrieve and display new posts on demand.

Solution:

In the index.php template file, create a container element with the ID "ajax-posts" and include PHP code to query and display a limited number of posts (e.g., three). Add a button with the ID "more_posts" to trigger the loading of additional posts.

In the functions.php file, create a function (more_post_ajax()) to handle the Ajax request. This function will receive the offset and number of posts per page as parameters and query the database to retrieve the next set of posts.

In the Ajax call (either in a script file or inline), set the Ajax URL, send the offset and number of posts per page as data, and handle the response by appending the retrieved posts to the "ajax-posts" container and incrementing the page number.

Example Code:

index.php

<div>
<p><strong>functions.php</strong></p>
<pre class="brush:php;toolbar:false">function more_post_ajax() {
    // Get offset and number of posts per page
    $offset = $_POST['offset'];
    $ppp = $_POST['ppp'];

    // Query database to retrieve next set of posts

    // Return retrieved posts
    echo $posts;
    exit;
}

Ajax call

// Set Ajax URL
var ajaxUrl = '<?php echo admin_url('admin-ajax.php') ?>';

// When "Load More" button is clicked
$('#more_posts').on('click', function() {
    // Disable button temporarily
    $(this).attr('disabled', true);

    // Send Ajax request with offset and number of posts per page
    $.post(ajaxUrl, {
        action: 'more_post_ajax',
        offset: (page * ppp) + 1,
        ppp: ppp
    })
    .success(function(posts) {
        // Append retrieved posts to container
        $('#ajax-posts').append(posts);
        // Increment page number
        page++;
        // Re-enable "Load More" button
        $('#more_posts').attr('disabled', false);
    });
});