I have two loops that display posts: the 'default' loop (in home.php), which displays five posts. At the bottom of the page I have a button, that invokes an AJAX call, which calls a second loop and returns the html code for six new posts. Now I need the second loop to start with the sixth post, as if it was the first post. Each page in the second loop displays six posts.

The problem with the code at the bottom, is that my AJAX call gets the six posts from the 'second' page. But because only five posts are already shown, it skips on post. The problem would also be solved if I could change the second loop, so that the first 'page' has five posts and the other pages six.

The second loop code is placed in functions.php and the first in a template file called loop.php (it is called with get_template_part() into home.php). Below I have the code for both loops for clarity.

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => '5',
    'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>

<?php if ( $blog_posts->have_posts() ) : ?>
        <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>

        <div class="ambition-home-post-single override">
            <div class="ambition-home-post-contents override">      
                <img class="ambition-home-thumbnail-container override" src="<?php echo the_post_thumbnail_url(); ?>">
                <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
                <div class="ambition-home-post content override"><?php the_excerpt() ?></div>
            </div>
        </div>


        <?php endwhile; ?>
<?php endif; ?>

    add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
    add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');


    function load_posts_by_ajax_callback() {
        check_ajax_referer('load_more_posts', 'security');
        $paged = $_POST['page'];
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => '6',
            'paged' => $paged,
        );
        $blog_posts = new WP_Query( $args );
        ?>

        <?php if ( $blog_posts->have_posts() ) : ?>
                <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post();?>

                <div class="ambition-home-post-single override">
                    <div class="ambition-home-post-contents override">      
                        <img class="ambition-home-thumbnail-container override" src="<?php echo the_post_thumbnail_url(); ?>">
                        <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
                        <div class="ambition-home-post content override"><?php the_excerpt() ?></div>
                    </div>
                </div>


                <?php endwhile; ?>
        <?php endif;

        wp_die();
    }

I have two loops that display posts: the 'default' loop (in home.php), which displays five posts. At the bottom of the page I have a button, that invokes an AJAX call, which calls a second loop and returns the html code for six new posts. Now I need the second loop to start with the sixth post, as if it was the first post. Each page in the second loop displays six posts.

The problem with the code at the bottom, is that my AJAX call gets the six posts from the 'second' page. But because only five posts are already shown, it skips on post. The problem would also be solved if I could change the second loop, so that the first 'page' has five posts and the other pages six.

The second loop code is placed in functions.php and the first in a template file called loop.php (it is called with get_template_part() into home.php). Below I have the code for both loops for clarity.

<?php
$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => '5',
    'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>

<?php if ( $blog_posts->have_posts() ) : ?>
        <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>

        <div class="ambition-home-post-single override">
            <div class="ambition-home-post-contents override">      
                <img class="ambition-home-thumbnail-container override" src="<?php echo the_post_thumbnail_url(); ?>">
                <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
                <div class="ambition-home-post content override"><?php the_excerpt() ?></div>
            </div>
        </div>


        <?php endwhile; ?>
<?php endif; ?>

    add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
    add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');


    function load_posts_by_ajax_callback() {
        check_ajax_referer('load_more_posts', 'security');
        $paged = $_POST['page'];
        $args = array(
            'post_type' => 'post',
            'post_status' => 'publish',
            'posts_per_page' => '6',
            'paged' => $paged,
        );
        $blog_posts = new WP_Query( $args );
        ?>

        <?php if ( $blog_posts->have_posts() ) : ?>
                <?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post();?>

                <div class="ambition-home-post-single override">
                    <div class="ambition-home-post-contents override">      
                        <img class="ambition-home-thumbnail-container override" src="<?php echo the_post_thumbnail_url(); ?>">
                        <h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
                        <div class="ambition-home-post content override"><?php the_excerpt() ?></div>
                    </div>
                </div>


                <?php endwhile; ?>
        <?php endif;

        wp_die();
    }

• posts
• loop
• ajax
• query-posts

1 Answer 1

I solved the problem by applying an offset, as proposed in this question: How to exclude latest x posts from a paginated query?.