How to Implement a \'Load More Posts\' Button with Ajax in WordPress?

Load More Posts Ajax Button in WordPress

Loading more posts through Ajax is a common need for websites with a large volume of content. This allows users to browse through multiple pages of content without refreshing the entire page. In this article, we will explore the steps involved in implementing a "Load More Posts" button using Ajax in WordPress.

Creating the Template Code

Begin by creating a template file where you want the "Load More Posts" button to appear. In this example, we'll use index.php. Add the following code to your template:

<div>
<p><strong>Function for Loading More Posts</strong></p>
<p>Next, create a function in your functions.php file to handle the Ajax call for loading more posts. This function will query for the next set of posts based on the current page and number of posts per page.</p>
<pre class="brush:php;toolbar:false">function more_post_ajax(){
    // Get parameters from the Ajax request
    $offset = $_POST["offset"];
    $ppp = $_POST["ppp"];

    // Prepare query arguments
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'offset' => $offset,
    ];

    // Perform the query
    $loop = new WP_Query($args);

    // Output the posts
    while ($loop->have_posts()) : $loop->the_post(); 
        the_content();
    endwhile;
    exit; 
}

// Hook the function to the WordPress Ajax action
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');

jQuery Ajax Script

In your footer, include the following jQuery script to handle the Ajax button functionality:

<script type="text/javascript">
    jQuery(document).ready( function($) {
        // Ajax post endpoint
        var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";

        // Page counter
        var page = 5; 
        // Posts per page
        var ppp = 3; 

        // Event handler for the "Load More Posts" button
        $("[id^=more_posts]").on("click", function() {
            $("[id^=more_posts]").attr("disabled", true);

            $.post(ajaxUrl, {
                action: "more_post_ajax",
                offset: (page * ppp) + 1,
                ppp: ppp
            })
            .success(function(posts) {
                page++;
                $("#ajax-posts").append(posts);
                $("[id^=more_posts]").attr("disabled", false);
            });
        });
    });
</script>

Customizing the Function

The provided code is a basic example. You can customize it to match your specific requirements, such as:

• Query parameters: Add additional parameters to the query args to filter posts based on specific criteria (e.g., category, tags).
• Pagination: Add pagination links to navigate between pages of posts.
• Infinite scrolling: Use the scroll event to automatically load more posts as the user scrolls down the page.

By following these steps, you can implement a functional "Load More Posts" button in WordPress using Ajax, enhancing the user experience for your visitors browsing large content sets.