I am building a wordpress theme with Masonry (Desandro) and Infinitescroll (Paul Irish).

In my index.php for masonry loop I have written:-

    $recentPosts = new WP_Query(array('paged'=>$paged)) ;

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

                    /* Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                    get_template_part( 'content', 'masonry' );


            <?php endwhile; ?>

        <?php else : ?>

            <?php //get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>
        <?php  wp_reset_postdata();  ?>

and for the paged link I have written:

<?php if($recentPosts != '-1') { ?>
        <div id="page-nav"  ><?php next_posts_link() ?></div> 

        <?php } ?> 

For masonry and infinite scroll in my JS file I have written:-

jQuery(function($) {

     var $container = $('.content-area');            
         itemSelector: '.mason',
         isAnimated: true,

         animationOptions: { //add animations if you want
            duration: 900,
            easing: 'easeInOutExpo'


                var $container = $('.masonrycontainer');

                    $container.infinitescroll ({
          navSelector  : '#page-nav',    // selector for the paged navigation 
          nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
          itemSelector : '.mason', 

          loading: {

              finished: undefined,
              //loadingText  : "Loading new posts...", 
             finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif',
              start: undefined
          //trigger Masonry as a callback
          function( newElements ) {
            var $newElems = $( newElements ).css({
                    opacity: 0
             $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );



Everything are working fine but what I see (you can see the demo here http://needlestosaymore.com/demo/)

  1. The .gif image is loading at the extreme topmost side which I want to make in center.

  2. The Paged 2 section i.e. all the old posts in the bottom section of the page, when loads first time those are overlapped. I have checked in Firefox's Inspector and found "<div id="primary" class="content-area" style="position: relative; height: 3762.33px;" , an inline-line style is generating giving a height of 3762.33px which I haven't coded anywhere, what I guess that the js code container.masonry( 'appended', $newElems, true ); is generating this inline style. But as soon as I refresh the page the overlapping issue moves off.

I am unable to understand what is the actual flaw I am doing.

Please help me to find out. Thanks in advance.

  • It sounds as if you are having either a CSS or a Masonry JS issue. Can you clarify how this is specifically a WordPress problem? – helgatheviking Feb 24 '14 at 14:07
  • No it is not wordpress problem . I am just asking that am I writing the code correctly or anything I am going wrong. Anyway I am checking all my files. I know it is a simple error which I did. Thanks – amitabhaghosh197 Feb 24 '14 at 14:59

Your Answer

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

Browse other questions tagged or ask your own question.