Why Isn\'t My WordPress \'Load More Posts\' Button Working with AJAX?

Implementing Load More Posts with AJAX in WordPress

Introduction:

Loading posts dynamically through AJAX is a commonly sought-after feature in WordPress development. It allows users to explore more content without reloading the entire page, enhancing user experience. This article addresses a common issue faced by many when implementing load more posts with AJAX.

Problem Statement:

The user attempted to implement pagination using AJAX but encountered difficulties, resulting in no visible changes on the page and malfunctioning of the Load More Button. Despite inspecting the element and observing the expected behavior in the jQuery, the posts were not being added to the page.

Solution:

Upon analysis of the provided code snippets, a few potential issues emerged:

1. jQuery: The offset property in the $.post call is using (page * ppp) 1 instead of (page - 1) * ppp. This formula should be adjusted to (page - 1) * ppp to correctly calculate the offset for the next set of posts.
2. AJAX Function: In the more_post_ajax function in functions.php, the offset property should be used in conjunction with the paged property. This ensures that the WP_Query retrieves the appropriate page of posts.
3. php: There might be a missing closing PHP tag somewhere in the code, which would break the code.
4. WordPress Script Localization: The more_post_ajax function needs to be localized as a WordPress script. The script localization should be placed before loading scripts in functions.js. This allows the ajax_posts object to be used within the JavaScript code.

Revised Code:**

Template File (index.php):

// Calculate the offset for page 2 onwards
$offset = ( isset( $_GET['page'] ) && $_GET['page'] > 1 ) ? ( $_GET['page'] - 1 ) * $postsPerPage : 0;

$args = [
    'post_type'             => 'post',
    'posts_per_page'        => $postsPerPage,
    'cat'                   => 1,
    'offset'                => $offset,
];

AJAX Function (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 = array(
        'suppress_filters'     => true,
        'post_type'             => 'post',
        'posts_per_page'        => $ppp,
        'cat'                   => 1,
        'paged'                 => $page + 1, // Increase the page by 1 since offset is already calculated in the template file
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop->have_posts()) :  while ($loop->have_posts()) : $loop->the_post();
        // Generate HTML for the post
        $out .= '<div class="small-12 large-4 columns">';
        $out .= '<h1>'.get_the_title().'</h1>';
        $out .= '<p>'.get_the_content().'</p>';
        $out .= '</div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

// Localize the 'more_post_ajax' script
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
    'ajaxurl'   => admin_url( 'admin-ajax.php' ),
    'noposts'   => __('No older posts found', 'twentyfifteen'),
));

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

ajax.js:

$(document).ready(function() {
    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) {
                $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
        return false;
    }

    $("#more_posts").on("click",function(){
        $("#more_posts").attr("disabled",true);
        load_posts();
    });
});

Conclusion:

By carefully addressing these issues, the load more posts functionality with AJAX can be implemented successfully. The offset formula and WordPress script localization play crucial roles in ensuring proper pagination and access to WordPress variables within the JavaScript code. These corrections should result in a fully functional Load More Button that dynamically loads additional posts onto the page.

The above is the detailed content of Why Isn\'t My WordPress \'Load More Posts\' Button Working with AJAX?. For more information, please follow other related articles on the PHP Chinese website!