Waypoints + infinite scroll with custom query

Question

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]
})

Answer 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>