Use of rewind_posts() cause pagination to break

Question

I'm developing a site using Understrap's starter theme. I wanted to use a split design on home.php where the latest post is displayed on top of the others "full width" while the rest are positioned below within a three column layout.

Thanks to this very helpful post it works flawlessly.

However, now I'm having a hard time getting the pagination to work in conjunction to the altered loop. Without doing anything, the pagination shows up at the bottom of the page but when I press the link, same page is coming up.

This is my code:

<?php

  $args = [
     'posts_per_page' => 10
  ];

  $q = new WP_Query($args);

  if ($q->have_posts()) {

     while ($q->have_posts()) {
        $q->the_post();

        if ($q->current_post < 1) { ?>

           <!-- start .banner -->
           <section id="banner" class="ts-75 bs-100">
              <div class="content">
                 <h1 class="banner-blog-title">
                    <a class="post-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                 </h1>
                 <p class="lead"><?php echo wp_trim_words(get_the_excerpt(), 40); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-outline-secondary">Läs hela texten</a>
              </div>
              <a class="img-link half-w-lg" href="<?php the_permalink(); ?>">

                 <?php if (has_post_thumbnail()) : ?>
                    <img src="<?php the_post_thumbnail_url('blog_image'); ?>" class="img-fluid fit-cover" alt="<?php echo $image_alt; ?>">
                 <?php endif; ?>

              </a>
           </section><!-- / .banner -->

    <?php
        }
     } ?>

     <hr class="hr-royal hr-royal-thick bs-100">
     <div class="card-section">
        <div class="row mx-lg-n5">

           <?php

           $q->rewind_posts();

           while ($q->have_posts()) {
              $q->the_post();

              if ($q->current_post >= 1 && $q->current_post <= 10) { ?>

                 <div class="col-md-6 col-xl-4 mb-5 px-lg-5">
                    <div class="card">
                       <div class="card-image-wrapper">
                          <a href="<?php the_permalink(); ?>">
                             <?php if (has_post_thumbnail()) : ?>
                                <img src="<?php the_post_thumbnail_url('blog_image'); ?>" class="card-img-top fit-cover" alt="<?php echo $image_alt; ?>">
                             <?php endif; ?>
                          </a>
                       </div>
                       <div class="card-body">
                          <a href="#" class="card-post-date-link">
                             <div class="card-post-date">
                                <p class="card-post-date-text--lg"><?php the_time('d'); ?></p>
                                <p class="card-post-date-text--sm"><?php the_time('M'); ?></p>
                             </div>
                          </a>
                          <h4 class="card-title">
                             <a class="card-post-link" href="#"><?php the_title(); ?></a>
                          </h4>

                          <?php if (get_field('ingress')) : ?>
                             <div class="lead-wrapper">
                                <p class="lead"><?php echo wp_trim_words(get_field('ingress'), 32); ?></p>
                             </div>
                          <?php else : ?>
                             <p class="lead"><?php echo wp_trim_words(get_the_excerpt(), 24); ?></p>
                          <?php endif; ?>

                       </div>
                    </div>
                 </div>

        <?php

              }
           }

           // wp_reset_postdata(); // Initial reset
        } ?>

     </div>

   </div>

     <!-- This is where I try to continue the loop and retrieve the correct post data for pagination -->

    <?php

     $q->rewind_posts();

     while ($q->have_posts()) {
        $q->the_post();

        if ($q->current_post > 10) { ?>


     <?php understrap_pagination();
        }
        wp_reset_postdata();
     } ?>

Any help appreciated! Thank you.

Answer 1

The issue has nothing to do with rewind_posts(). The reason the same posts are showing up on page 2 is because your template is only ever going to show the 10 latest posts. This is because you're using your own secondary query to display posts:

$args = [
   'posts_per_page' => 10
];

$q = new WP_Query($args);

That's the query your template is displaying, and there's nothing there telling it to query a second page of posts when you're on page 2.

The problem is that in home.php you should not be using new WP_Query() to query posts for the loop. WordPress has already queried the correct posts for you, and you display them with The Loop.

The reason the solution you've copied uses it is because the original question it was answering was apparently regarding displaying those posts on a static homepage template that had not already queried the correct posts, and pagination isn't required.

Also, the reason the original answer uses rewind_posts() is because it seems to be for displaying different groups of posts out of order. That's not what you want. All you want to do is display the first post separately, and then the rest of the posts, without re-displaying the first one.

Given all that, the proper solution is to use this structure:

global $wp_query;

while ( have_posts() ) {
    the_post();

    // If we're on the first post.
    if ( 0 === $wp_query->current_post ) {
        // Display post as banner.
        break;
    }
}

// Display separator, open grid, etc.
while ( have_posts() ) {
    the_post();
    // Display post as card.
}

understrap_pagination();

Answer 2

Going to take a shot at this, I hope it's helpful. I think there are a couple things going on here.

First, I think you can accomplish your layout without needing to rewind the loop. Making this change will help clarify your code and help us isolate the problem you're having with the pagination. See the revised version of your code posted below for how to get rid of the rewind. Basically, you can add an extra conditional that adds the wrapper divs around the card section when the current_post property is 1.

Secondly, I changed your query slightly. I added the 'paged' parameter. I also caused it to overwrite the global $wp_query variable. This tricks wordpress into thinking your custom query is the main query, and wordpress will then display the pagination accordingly. You can read this article for more information on how this works.

I tested the code below on my local machine. I don't have Understrap so I didn't get to check if the css looks ok and I had to use the standard wordpress pagination function instead of understrap_pagination. The html and navigation functionality seemed to work fine, though.

$args = [
     'posts_per_page' => 10,
     'paged' => get_query_var( 'paged' ),
  ];
  global $wp_query;
  $wp_query = new WP_Query($args);

  if ($wp_query->have_posts()) {

    while ($wp_query->have_posts()) {
      $wp_query->the_post();

        if ($wp_query->current_post < 1) { ?>

           <!-- start .banner -->
           <section id="banner" class="ts-75 bs-100">
              <div class="content">
                 <h1 class="banner-blog-title">
                    <a class="post-link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                 </h1>
                 <p class="lead"><?php echo wp_trim_words(get_the_excerpt(), 40); ?></p>
                 <a href="<?php the_permalink(); ?>" class="btn btn-outline-secondary">Läs hela texten</a>
              </div>
              <a class="img-link half-w-lg" href="<?php the_permalink(); ?>">

                 <?php if (has_post_thumbnail()) : ?>
                    <img src="<?php the_post_thumbnail_url('blog_image'); ?>" class="img-fluid fit-cover" alt="<?php echo $image_alt; ?>">
                 <?php endif; ?>

              </a>
           </section><!-- / .banner -->

      <?php 
      } 
      if (1 === $wp_query->current_post ){ ?>
        <hr class="hr-royal hr-royal-thick bs-100">
        <div class="card-section">
          <div class="row mx-lg-n5">
        
       <?php 
      }
      if ($wp_query->current_post >= 1 && $wp_query->current_post <= 10) { ?>

          <div class="col-md-6 col-xl-4 mb-5 px-lg-5">
            <div class="card">
                <div class="card-image-wrapper">
                  <a href="<?php the_permalink(); ?>">
                      <?php if (has_post_thumbnail()) : ?>
                        <img src="<?php the_post_thumbnail_url('blog_image'); ?>" class="card-img-top fit-cover" alt="<?php echo $image_alt; ?>">
                      <?php endif; ?>
                  </a>
                </div>
                <div class="card-body">
                  <a href="#" class="card-post-date-link">
                      <div class="card-post-date">
                        <p class="card-post-date-text--lg"><?php the_time('d'); ?></p>
                        <p class="card-post-date-text--sm"><?php the_time('M'); ?></p>
                      </div>
                  </a>
                  <h4 class="card-title">
                      <a class="card-post-link" href="#"><?php the_title(); ?></a>
                  </h4>

                  <?php if (get_field('ingress')) : ?>
                      <div class="lead-wrapper">
                        <p class="lead"><?php echo wp_trim_words(get_field('ingress'), 32); ?></p>
                      </div>
                  <?php else : ?>
                      <p class="lead"><?php echo wp_trim_words(get_the_excerpt(), 24); ?></p>
                  <?php endif; ?>

                </div>
            </div>
          </div>

<?php
      }
    }
    the_posts_navigation();
  } 
  wp_reset_query();
?>

        </div><!--.row mx-lg-n5-->
     </div><!--.card-section>-->