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

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.