I am replacing the standard wordpress numeric pagination with an AJAX load more button.

I’ve got it working on archive.php that uses the main wp_query but when I try to implement it on a custom template page, I get the same posts every time I click the button.

I am using offset in the query because I already have other queries on that custom page template, when I remove the offset, the ajax load more works fine but it retrieves all posts from the beginning which is not what I want.

This is ajax.php custom php file for the ajax functionality. The first 4 if are for the archive and search page, the last else is meant for the custom page template.

add_action('wp_ajax_nopriv_load_more', 'load_more');
add_action('wp_ajax_load_more', 'load_more');

function load_more() {
    $paged = $_POST['page'] + 1;
    $category = $_POST['category'];
    $author = $_POST['author'];
    $tag = $_POST['tag'];
    $search = $_POST['search'];

    if($author) {
        $query = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'author' => $author,
            'paged' => $paged
        ));
    } elseif($category) {
        $query = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'cat' => $category,
            'paged' => $paged
        ));
    } elseif($tag) {
        $query = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'tag' => $tag,
            'paged' => $paged
        ));
    } elseif($search) {
        $query = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            's' => $search,
            'paged' => $paged
        ));
    } else {
        $query = new WP_Query(array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'offset' => 16,
            'paged' => $paged
        ));
    }

    if($query->have_posts()) :
        while($query->have_posts()) : $query->the_post();
            get_template_part( 'content', get_post_format() );
        endwhile;
    else :
        echo 0;
    endif;

    wp_reset_postdata();

    die();
}

The javascript

$('.load-more-button:not(.loading)').on('click', function() {
    var that = $(this);
    var page = that.data('page');
    var newPage = page + 1;
    var ajaxurl = that.data('url');
    var category = that.data('category');
    var author = that.data('author');
    var tag = that.data('tag');
    var search = that.data('search');

    that.addClass('loading').find('.load-more-text').slideUp(320);
    that.find('.load-more-icon').addClass('spin');

    $.ajax({
        url: ajaxurl,
        type: 'post',
        data: {
            page: page,
            category: category,
            author: author,
            tag: tag,
            search: search,
            action: 'load_more'
        },
        error: function(response) {
            console.log(response);
        },
        success: function(response) {
            if(response == 0) {
                $('.load-more-container').append('<div class="text-center"><h3>No more posts to load.</h3></div>');
                that.slideUp(320);
            } else {
                setTimeout(function() {
                    var page = that.data('page', newPage);
                    $('.load-more-container').append(response);
                    that.removeClass('loading').find('.load-more-text').slideDown(320);
                    that.find('.load-more-icon').removeClass('spin');

                    revealPosts();

                }, 1000);
            }
        }
    });
});

the HTML button

<a class="btn btn-lg btn-default load-more-button" data-page="1" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
    <i class="fa fa-refresh load-more-icon"></i>
    <span class="load-more-text">Load More</span>
</a>

Read more here: WordPress Query with AJAX is retrieving the same posts on each button click


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: