Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to use infinite scroll in my page as below. http://phototravel.flop.jp/category/japan/mothersfarm/

All photos are actually custom posts under a category. It's using jquery masonry layout. I would like this posts to be set to automatically reloaded when it's scrolled at the end of the page.

My code is as follows:

<php    
$args = array(
    'post_type'     => 'custom_post',
    'posts_per_page' => '-1',
    'category_name' => "$cat_name",
    'post_status'   => 'publish',
    'order'         => 'ASC'
);

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

<div id="contents">

    <div id="masonryArea" class="clearfix">

    <?php while($loop->have_posts()): $loop->the_post(); ?>
    **** displaying my html here ****
    <?php endwhile; ?>
    <div class="page-nav">
        <a href="#"></a>
    </div>
    </div>
</div>

My jquery and masonry:

jQuery(document).ready(function(){
    // masonry
    var $container = jQuery('#masonryArea');
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.entry',
            columnWidth: 250
        });
    });

    // infinite scroll
    $container.infinitescroll({
        navSelector : '#page-nav',
        nextSelector : '#page-nav a',
        itemSelector: '.entry',
        loading: {
            finishedMsg: 'End of entry',
            img: 'load.gif'
        }
    },
    function(newElements){
        var $newElems = $(newElements);
        $newElems.imagesLoaded(function(){
            $container.masonry('appended', $newElems, true);
        });
    }
    );
 });

But it shows off all the posts instead of waiting for the scroll action. I tried to change to 'posts_per_page' => '10', but instead it shows only 10 posts (as expected) and not reloading after that.

My question is, if i were to use the infinite scroll plugin, is it the right way for me to set my posts_per_page to the default number of posts i would like it to show up before scroll action? I'm not sure my problem lies where, whether it's the wrong way to specify posts_per_page or some problem with my jquery.

And i would appreciate if anyone can provide me links with someone creating the same style of website, ie displaying posts from wordpress using WP_Query with masonry and infinite scroll.

Thank you.

share|improve this question
add comment

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.