Complete Guide to Implementing AJAX Load More Posts Button in WordPress

Technical Background and Problem Analysis

In WordPress development, implementing AJAX load more posts functionality is a common requirement, but developers often encounter various issues. According to the Q&A data, main problems include: AJAX requests not being handled correctly, pagination logic errors, and incomplete JavaScript code. The core issue lies in insufficient understanding of WordPress's AJAX mechanism and oversight in code implementation details.

Complete Implementation Solution

Template File Configuration

In the template file, first set up initial post display and the load button. Key points include:

<div id="ajax-posts" class="row">
    <?php
    $postsPerPage = 3;
    $args = [
        'post_type' => 'post',
        'posts_per_page' => $postsPerPage,
        'cat' => 8
    ];
    $loop = new WP_Query($args);
    while ($loop->have_posts()) : $loop->the_post();
    ?>
    <div class="small-12 large-4 columns">
        <h1><?php the_title(); ?></h1>
        <p><?php the_content(); ?></p>
    </div>
    <?php
    endwhile;
    wp_reset_postdata();
    ?>
</div>
<div id="more_posts">Load More</div>

Here, WP_Query is used to query posts from a specific category, ensuring post data is reset after the loop. The button's id attribute provides identification for subsequent JavaScript operations.

PHP Function Implementation

Add the AJAX handling function in functions.php:

function more_post_ajax() {
    $ppp = isset($_POST["ppp"]) ? $_POST["ppp"] : 3;
    $page = isset($_POST['pageNumber']) ? $_POST['pageNumber'] : 0;
    header("Content-Type: text/html");
    $args = [
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'cat' => 8,
        'paged' => $page,
    ];
    $loop = new WP_Query($args);
    $out = '';
    if ($loop->have_posts()) {
        while ($loop->have_posts()) {
            $loop->the_post();
            $out .= '<div class="small-12 large-4 columns"><h1>' . get_the_title() . '</h1><p>' . get_the_content() . '</p></div>';
        }
    }
    wp_reset_postdata();
    die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

This function receives parameters via $_POST, uses the paged parameter for pagination, and outputs HTML content via die(). Additionally, use wp_localize_script to pass the AJAX URL:

wp_localize_script('twentyfifteen-script', 'ajax_posts', [
    'ajaxurl' => admin_url('admin-ajax.php'),
    'noposts' => __('No older posts found', 'twentyfifteen'),
]);

JavaScript Code

The JavaScript part handles user interaction and AJAX requests:

var ppp = 3;
var cat = 8;
var pageNumber = 1;
function load_posts() {
    pageNumber++;
    var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data) {
            var $data = $(data);
            if ($data.length) {
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled", false);
            } else {
                $("#more_posts").attr("disabled", true);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }
    });
    return false;
}
$("#more_posts").on("click", function() {
    $("#more_posts").attr("disabled", true);
    load_posts();
});

The code uses jQuery to send POST requests and updates page content upon successful response. Error handling aids in debugging potential issues.

Advanced Feature: Infinite Scroll

Beyond click-to-load, infinite scroll functionality can be implemented:

$(window).on('scroll', function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        load_posts();
    }
});

This code automatically loads more posts when the user scrolls near the bottom of the page. The threshold can be adjusted to optimize triggering conditions.

Common Issues and Debugging

During implementation, common issues include: AJAX requests not triggering, posts not loading correctly, and pagination logic errors. Debugging methods include:

• Using browser developer tools to inspect network requests and responses.
• Adding console.log outputs in JavaScript for debugging information.
• Ensuring PHP functions return HTML content correctly.

For example, checking scroll trigger conditions:

$(window).on('scroll', function() {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        load_posts();
    }
});

Conclusion

By integrating template files, PHP functions, and JavaScript code, AJAX load more posts functionality can be efficiently implemented in WordPress. Key points include proper use of WP_Query pagination, handling AJAX requests, and optimizing user interaction. Infinite scroll further enhances user experience. Developers should adjust code based on specific needs and utilize debugging tools to ensure stable operation.