0

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>
  • When are you calling for the pagination?? Can you paste that snippet in here as well? Thanks! – ChristopherJones Jun 10 at 14:01
  • @ChristopherJones updated above. – R Reveley Jun 10 at 20:47
  • 1
    Have a read to this wordpress.stackexchange.com/a/217629/139936 – Gregory Jun 10 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 Jun 10 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 Jun 11 at 10:02
0

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.org/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!

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.