0

I am trying to infinite scroll posts on a wordpress page (called "News"). I have a simple custom query:

<?php
$args=array(
   'post_type'              => 'post',
   'posts_per_page'         => 4,
   'ignore_sticky_posts'    => true,
   'post_status'            => 'publish',
   'orderby'                => 'date',
   'paged'                  => $paged
);

$wp_query = new WP_Query($args); ?>

<?php if ( $wp_query->have_posts() ) : ?>
    <div class="infinite-container">
        <?php while ( $wp_query->have_posts() ) : ?>
           <div class="col-md-3 infinite-item">
            <?php $wp_query->the_post(); ?>
                <?php the_title(); ?>
            </div>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

and after this I have the "load more" button like in the Documentation:

<a class="infinite-more-link" href="http://localhost/greatwebsite/news/page/2">More</a>

So I have my "infinite-container" and within I have the "infinite-item" Elements.

But I have 1 problem:

This infinite loads all posts on scrolling and than starts at the beginning again. So it loads all 9 posts that exist and than repeats this forever.

This is the part where I create the class:

var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0]
})
1

You never seem to populate the $paged variable with a value. Try adding this before the query (from the codex):

if ( get_query_var( 'paged' ) ) { $paged = get_query_var( 'paged' ); }
elseif ( get_query_var( 'page' ) ) { $paged = get_query_var( 'page' ); }
else { $paged = 1; }

Also, your "load more" link has the page number hardcoded, so it will load the same page (2) every time. Try something like this (untested)

<a class="infinite-more-link" href="http://localhost/greatwebsite/news/page/<?php echo $paged + 1; ?>">More</a>
3
  • This works. I thought the waypoint script does the paging but I needed this "$paged + 1;" :) - thanks a lot hrk. Feb 6 '17 at 8:26
  • Now it tries to load more and more even if there are no more articles. The URL in the "infinite-more-link" adds more and more pages. Any idea how to stop this? "max_num_pages" does not work, I think because it only works when the paging is visible in the URL bar of the browser(?). Feb 6 '17 at 9:22
  • "max_num_pages" works ;). Feb 6 '17 at 13:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.