I wanted to use different HTML for the first post in a blog.

I did it by making 2 loops. Unfortunately this has stopped the pagination from working. I guess it is because I am creating a new query to solve the problem.

How can I solve my problem while still having a working pagination?

The original single loop code code

    <?php # The Loop    
    if ( have_posts()): ?>    
        <div class="row">    
            <?php # Loop through    
                while ( have_posts() ) : the_post();    
                    include( 'includes/snippets/'.$post->post_type.'-card.php');    
            endwhile; ?>    
        </div>    
    <?php else:     
        echo '<div class="alert alert-warning">No results found.</div>';    
    endif; ?>  

My attempt at a double loop

 <?php
 $args = array(
    'posts_per_page' => '1',
 );
 $query = new WP_query ( $args );
 if ( $query->have_posts() ) { ?>
 <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
 <?php include( 'includes/snippets/'.$post->post_type.'-card-large.php'); ?>
 <?php // End the loop.
 endwhile;
 } 

 $args = array(
    'posts_per_page' => '11',
    'offset' => '1',
 );
 $query = new WP_query ( $args );
 if ( $query->have_posts() ) { ?>
 <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
 <?php include( 'includes/snippets/'.$post->post_type.'-card.php'); ?>
 <?php // End the loop.
 endwhile;
 } ?>

 <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

I wanted to use different HTML for the first post in a blog.

I did it by making 2 loops. Unfortunately this has stopped the pagination from working. I guess it is because I am creating a new query to solve the problem.

How can I solve my problem while still having a working pagination?

The original single loop code code

    <?php # The Loop    
    if ( have_posts()): ?>    
        <div class="row">    
            <?php # Loop through    
                while ( have_posts() ) : the_post();    
                    include( 'includes/snippets/'.$post->post_type.'-card.php');    
            endwhile; ?>    
        </div>    
    <?php else:     
        echo '<div class="alert alert-warning">No results found.</div>';    
    endif; ?>  

My attempt at a double loop

 <?php
 $args = array(
    'posts_per_page' => '1',
 );
 $query = new WP_query ( $args );
 if ( $query->have_posts() ) { ?>
 <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
 <?php include( 'includes/snippets/'.$post->post_type.'-card-large.php'); ?>
 <?php // End the loop.
 endwhile;
 } 

 $args = array(
    'posts_per_page' => '11',
    'offset' => '1',
 );
 $query = new WP_query ( $args );
 if ( $query->have_posts() ) { ?>
 <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
 <?php include( 'includes/snippets/'.$post->post_type.'-card.php'); ?>
 <?php // End the loop.
 endwhile;
 } ?>

 <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

• loop
• pagination

• When are you calling for the pagination?? Can you paste that snippet in here as well? Thanks! – ChristopherJones Commented Jun 10, 2019 at 14:01
• @ChristopherJones updated above. – R Reveley Commented Jun 10, 2019 at 20:47
• 1 Have a read to this wordpress.stackexchange/a/217629/139936 – Gregory Commented Jun 10, 2019 at 20:52
• @Gregory brings up something I should have asked! Are you wanting a total of 10 posts on this page, or 10+1 on this page....and then 10 on the second page, 10 on the 3rd page, etc?? – ChristopherJones Commented Jun 10, 2019 at 21:12
• @ChristopherJones It's a good point that I was starting to think about but wanted to go one step at a time. Ideally, the first page will be 10+1 then the following pages would have a plain list style layout so would be 10. – R Reveley Commented Jun 11, 2019 at 10:02

1 Answer 1

So here is my attempt at it...though I don't really have a good place to test it on my end, but I think it should work. (Fingers Crossed)

<?php
  // First Page of Pagination - https://codex.wordpress/Function_Reference/is_paged
  if(!is_paged()){
    $first_page = true;
    $query_args = array(
       'posts_per_page' => '11',
    );
  } else {
    $query_args = array(
       'posts_per_page' => '10',
       'offset' => '1',
    );
  }

  $query = new WP_query ( $query_args );
  if ( $query->have_posts() ) {
    while ( $query->have_posts() ) : $query->the_post();
      // Let's deal with the first post on the first page
      if($first_page===true && $wp_query->current_post===0){
        include( 'includes/snippets/'.$post->post_type.'-card-large.php');
      } else {
        include( 'includes/snippets/'.$post->post_type.'-card.php');
      }
    endwhile;
  }

?>

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

Let me know how things look on your end after trying it and see if we can't get it figured out!