Title: Custom Infinite Scroll bug
Last modified: August 21, 2016

---

# Custom Infinite Scroll bug

 *  [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/custom-infinite-scroll-bug/)
 * Hi all,
 * i got task to make blog page to have same infinte scroll witch is used on homepage
   of a website.
 * This is working code of current homepage.
 *     ```
       <?php  global $wp_query;
               $big = 999999999; // need an unlikely integer
               query_posts(array('post_type' => 'project', 'paged' => get_query_var('page'), 'posts_per_page' => 6));
               ?>
               <?php while (have_posts()) : the_post(); ?>
                   <div class="thumb">
                       <a href="<?php echo get_permalink($post->ID); ?>">
                           <div class="overlay">
                               <div class="inner">
                                   <div class="vertically-centered">
                                       <h3>Truth:</h3>
                                   </div>
                               </div>
                           </div>
                       </a>
                       <div class="project-details">
                           <div class="project-title"><?php the_field('client'); ?> ~ <?php the_title(); ?></div>
                           <div class="head-office"><?php if ($office) {
                                   echo $office;
                               }  ?></div>
                       </div>
                   </div>
               <?php endwhile; ?>
           </div>
           <div id="load-next">
               <a href="#" rel="retrieve">More Work</a>
           </div>
           <div class="navigation">
               <?php echo paginate_links(array(
                   'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                   'format' => '?paged=%#%',
                   'current' => max(1, get_query_var('paged')),
                   'total' => $wp_query->max_num_pages
               )); ?>
           </div>
       ```
   
 * This is .js for that part. I just added new divs to function.
 *     ```
       //Initial fader in of thumbnails
       $(document).ready(function () {
           if ($('#gallery, #more').length > 0) {
               fadeThumbsIn();
           }
       });
   
       $('#gallery, #more').infinitescroll({
           loading: {
               finishedMsg: '',
               img: "/wp-content/themes/rrde/images/bg/ajax-loader-large.gif",
               msg: null,
               msgText: "",
               speed: 'slow'
           },
           appendCallback: true,
           navSelector: ".navigation .next",
           nextSelector: ".navigation .next",
           itemSelector: "#gallery .thumb, #more .load",
           debug: false,
           dataType: 'html'
       }, function (newElements) {
           checkScreenSize(screenSizeIndex);
           fadeThumbsIn();
           valignText();
           $('div.content.full').expander({
               slicePoint:       800,  // default is 100
               expandPrefix:     ' ', // default is '... '
               expandText:       'Read full article...', // default is 'read more'
               userCollapseText: 'Hide article...'  // default is 'read less'
           });
   
       });
       $('#load-next').find('a').click(function (e) {
           e.preventDefault();
           $('#gallery, #more').infinitescroll('retrieve');
       });
   
       function fadeThumbsIn() {
           ($).each($('#gallery .thumb, #more .load'), function (i) {
               $(this).delay(500).animate({opacity: 1}, 1000);
           });
       }
       ```
   
 * And this is my code on blog page template.
 *     ```
       <div id="more">
                   <?php
                   $big = 999999999; // need an unlikely integer
                   $args = array(
                       'order' => 'DESC',
                       'paged' => get_query_var('page'),
                       'posts_per_page' => 6
                   );
                   query_posts($args);
                   while (have_posts()): the_post(); ?>
                       <article class="load">
                           <h2 class="block-header green"><?php echo get_the_title(); ?></h2>
                           <div class="clear">&nbsp;</div>
                           <div class="content full">
                               <?php the_content(); ?>
                           </div>
                           <div class="content excerpt">
                               <?php the_excerpt(); ?>
                               <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>" class="more-link">More
                                   »</a>
                           </div>
                       </article>
                   <?php endwhile; ?>
                   <?php wp_reset_query(); ?>
               </div>
               <div id="load-next">
                   <a href="#" rel="retrieve">More Work</a>
               </div>
               <div class="navigation">
                   <?php echo paginate_links(array(
                       'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                       'format' => '?paged=%#%',
                       'current' => max(1, get_query_var('paged')),
                       'total' => $wp_query->max_num_pages
                   )); ?>
               </div>
       ```
   
 * My problem is that, after first 6 loaded posts, every time when i scroll to bottom
   it loads same 6 posts, instead of rest of posts.
 * Thanks
 * Alex

The topic ‘Custom Infinite Scroll bug’ is closed to new replies.

## Tags

 * [pagination](https://wordpress.org/support/topic-tag/pagination/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 0 replies
 * 1 participant
 * Last reply from: [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/custom-infinite-scroll-bug/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics