I'm attempting to build a loop where the first item appears different than the remaining item.
Below is the code I currently have written. However, the second loop still displays the first item, so I'm likely doing something wrong.
<?php
$book_ids = array(5, 7, 8, 12);
$book_args = array(
'post_type' => 'book',
'post_status' => 'publish',
'posts_per_page' => 4,
'post__in' => $book_ids,
'orderby' => 'post__in'
);
$book_loop = new WP_Query( $book_args );
// Check if there are any posts that match the query
if ( $book_loop->have_posts() ) :
// Initialize the post counter
$book_featured = 0;
?>
<div >
<div >
<div >
<!-- Begin first item loop -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured == 0 ) :
?>
<div >
<a href="<?php the_permalink(); ?>" >
<div >
<img src="<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt="" />
</div>
<div >
<div >
<h3 ><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured ;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End first item loop -->
</div>
<div >
<div >
<!-- Begin loop of remaining items -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured >= 2 ) :
?>
<div >
<div >
<a href="<?php the_permalink(); ?>" >
<div >
<img src="<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt="" />
</div>
<div >
<div >
<h3 ><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured ;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End loop of remaining items -->
</div>
</div>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>
For this example I used two loops. Please feel free to improve on this if possible. Any help is greatly appreciated.
CodePudding user response：
You can try to below code:
<?php
$book_ids = array(5, 7, 8, 12);
$book_args = array(
'post_type' => 'book',
'post_status' => 'publish',
'posts_per_page' => 4,
'post__in' => $book_ids,
'orderby' => 'post__in'
);
$book_loop = new WP_Query( $book_args );
// Check if there are any posts that match the query
if ( $book_loop->have_posts() ) :
// Initialize the post counter
$book_featured = 0;
?>
<div >
<div >
<div >
<!-- Begin first item loop -->
<?php
// If there are posts matching the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured == 0 ) :
?>
<div >
<a href="<?php the_permalink(); ?>" >
<div >
<img src="<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt="" />
</div>
<div >
<div >
<h3 ><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>
</div>
</a>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured ;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End first item loop -->
</div>
<div >
<div >
<!-- Begin loop of remaining items -->
<?php
//reset the value on the variable
$book_featured = 0;
// the query then start the loop
while ( $book_loop->have_posts() ) : $book_loop->the_post();
if ( $book_featured >= 1 ) :
?>
<div >
<div >
<a href="<?php the_permalink(); ?>" >
<div >
<img src="<?php echo get_the_post_thumbnail( get_the_ID(), 'full' ); ?>" alt="" />
</div>
<div >
<div >
<h3 ><?php the_title(); ?></h3>
</div>
</div>
</a>
</div>
</div>
<?php
endif;
// Add 1 to the post counter
$book_featured ;
// Stop the loop when all posts are displayed
endwhile;
?>
<!-- End loop of remaining items -->
</div>
</div>
</div>
</div>
<?php
endif;
wp_reset_postdata();
?>