Multiple wp_query loops showing first 5 posts on all pages instead of older posts[Resolved]

Question

I am trying to highlight the newest post in a separate layout and rest of them in a masonry index. There are 5 posts per page and I am getting the newest 5 posts on previous posts pages as well.

I had all posts in a single loop under masonry index. I tried making the first element of masonry index a different width via css first-of-type property but it disturbs the masonry layout. Then I decided to use a separate loop for first post and second one with masonry layout for rest of posts, but I ended up getting first 5 posts on every page where older posts should be shown. Please advise how this can be resolved. Thanks in advance!

<?php 
//First Query
$args1 = array(
'posts_per_page'   => 1,
'post_type'        => 'albums',
'post_status'      => 'publish',
 ); 
$query1 = new WP_Query($args1);

//First Loop
if ( $query1->have_posts() ) {
  while ( $query1->have_posts() ) {
    $query1->the_post();?>
    <?php get_template_part( 'entry-slide',get_post_type('albums') ); ?>
    <?php comments_template(); 
  }
 }
   wp_reset_postdata();

  echo'<div id="masonry-index">';
  //Query2

$args2 = array(
'offset'           => 1,
'post_type'        => 'albums',
'post_status'      => 'publish',
'suppress_filters' => true ); 

$query2 = new WP_Query( $args2 );

//loop2
if ( $query2->have_posts() ) {
 while( $query2->have_posts() ) {
    $query2->the_post();?>
    <div class="listalbums">
    <?php get_template_part( 'entry',get_post_type('albums') ); ?>
    </div>
   <?php comments_template(); 
   }
 } //end second loop 

 echo '</div><!--End Masonry Index-->';
 get_template_part( 'nav', 'below' );?>


    </div><!--End Main Content-->
   </div><!--End Col-->
 <div class="col-md-3">
 <?php get_sidebar(); ?>
 </div>
 </div></div><!--End Container Fluid-->
  </div><!--End Content Area-->

  <?php get_footer(); ?>

UPDATE #1: Wow! this worked(I added $paged variable before the loops):

  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

and then in the args i removed the offsets and added this instead:

  'paged' => $paged

But now I am getting a duplicate latest post because of removing the offset in the second loop. Please share your ideas on how the duplicate can be removed. Will this work : add offset in second loop in $args2 if it is the first page? Let me try and I'll share how that worked.

UPDATE #2 I have added this code to add an offset and remove duplicate latest post on the 1st page:

if ( $paged == 1 ){
          $offset=1;
      } else{
          $offset='';
      }

This helped but I am getting a post duplicate in the previous posts. I am yet to figure out why that's happening (and would appreciate if you can share your ideas). Rest all good.

Answer 1

Perhaps check to see within the first loop if its paged or not based on the value you set for the 'posts per page' arguments. If not paged show the results via your template, if it is paged, then do nothing...

//First Loop
if ( $query1->have_posts() ) {
  while ( $query1->have_posts() ) {
    $query1->the_post();?>
    <?php if ( is_paged() == false ) { get_template_part( 'entry-slide',get_post_type('albums') ); } ?>
    <?php comments_template(); 
  }
 }
   wp_reset_postdata();

I have not tested this. Reference for is_paged(); condition: http://codex.wordpress.org/Function_Reference/is_paged

Answer 2

This helped remove the issue of the same first 5 posts being repeated on all pages:

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

and then in the args i removed the offsets and added this instead:

'paged' => $paged

To avoid getting post duplicate in the first page:

 if ( $paged == 1 ){
      $offset=1;
  } else{
      $offset='';
  }

This is still giving a post duplicate in the previous pages. So I am yet to get a complete solution.