I'm attempting to create a posts with the first page having a feature post followed by rows of 3 columns of posts.
First page
|---------------Feature Post---------------|
|----Post----| |----Post----| |----Post----|
|----Post----| |----Post----| |----Post----|
Then for the second page to just be rows of 3 columns
|----Post----| |----Post----| |----Post----|
|----Post----| |----Post----| |----Post----|
I have the following code setup which at the moment doesn't seem to differentiate between the first page of results and the second page of results as it seems to recalculate the counter back to 0 on the second page.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 4,
'paged' => $paged,
'prev_next' => true,
);
$wp_query = new WP_Query($args);
if( $wp_query->have_posts() ) {
$counter = 0;
while ($wp_query->have_posts()) {
$wp_query->the_post();
echo $counter
?>
<?php if ( 0 === $counter ) { ?>
<div class="row">
<div class="col-12">
======First article here=====
</div>
</div>
<?php } else { ?>
<?php if($counter % 3 === 0) { ?>
<div class="row">
<?php } ?>
<div class="col-md-4 news-grid__article">
===== All other articles here =====
</div>
<?php $counter++;
if($counter != 0 && $counter % 3 == 0) { ?>
</div>
<div class="clearfix"></div>
<?php } ?>
<?php } $counter++; ?>
<?php } } ?>
<div class="news-pagination">
<?php
echo paginate_links( array(
'prev_next' => true
) );
?>
</div>
Any idea why the counter resets to 0 on the second page of results? I believe this would solve my issue and show the layout required.
(Please read the // {comment here} and just compare this code with yours to see what changed.)
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'paged' => $paged,
//'prev_next' => true,
);
// Note that I'm not overriding the global `$wp_query`.
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$counter = 0;
$is_paged = $my_query->is_paged;
$new_row = true;
while ($my_query->have_posts()) {
$my_query->the_post();
//echo $counter
?>
<?php if ( ! $is_paged && 0 === $counter ) { ?>
<div class="row">
<div class="col-12">
====== Post #<?php echo $counter + 1; ?>; ID: <?php the_ID(); ?> =====
<h3><?php the_title(); ?></h3>
</div>
</div>
<?php } else { ?>
<?php if($new_row) { ?>
<div class="row">
<?php } ?>
<div class="col-md-4 news-grid__article">
===== Post #<?php echo $counter + 1; ?>; ID: <?php the_ID(); ?> =====
<h4><?php the_title(); ?></h4>
</div>
<?php //$counter++;
if(
( ! $is_paged && $counter % 3 === 0 ) || // every 3rd post on page #1
( $is_paged && $counter % 3 === 2 ) || // every 3rd post on page #2, #3, etc.
( $counter === $my_query->post_count - 1 ) // the last post
) { ?>
</div>
<div class="clearfix"></div>
<?php $new_row = true;
} else {
$new_row = false;
} ?>
<?php } $counter++; ?>
<?php } } ?>
<div class="news-pagination">
<?php
echo paginate_links( array(
'prev_next' => true,
// Here's how you can make `paginate_links()` works without having
// to override the `WP_Query` global instance (i.e. `$wp_query`).
'total' => $my_query->max_num_pages,
'current' => $my_query->get( 'paged' ),
) );
?>
</div>