I'm attempting to create a single WP loop, using a custom query, to display a custom-post-type - using Bootstrap 4 markup. The complicating part for me is, I'd like the number of posts for each row to alternate in the following way:
- Row 1 - One Post - Full Screen width
- Row 2 - Four Posts - col-md-6
- Row 3 - Six Posts - col-md-4
At the moment I'm running three individual loops which is messing-up the pagination. i.e. When pagination is clicked the page content remains the same - however the url indicates that the user is on the second page. Grateful for any help.
<!-- Loop 1 -->
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 1,
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 1 == 0) { ?>
<div class="row">
<?php
}
?>
<!-- ROW 1 - FULL SCREEN WIDTH MARKUP -->
</div><!--/.row-->
<?php $i++;
if($i != 0 && $i % 1 == 0) { ?>
</div> <!-- End Container -->
<div class="clearfix"></div>
<?php
} ?>
<?php
endwhile;
}
wp_reset_postdata();
?>
<!-- Loop Two -->
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 4,
'offset' => 1,
'paged' => $paged
);
$my_query = null;
$do_not_duplicate[] = $post->ID;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 2 == 0) { ?>
<div class="row no-gutters">
<?php
}
?>
<!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
<?php $i++;
if($i != 0 && $i % 2 == 0) { ?>
</div><!--/.row-->
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 6,
'offset' => 5,
'paged' => $paged
);
$my_query = null;
$do_not_duplicate[] = $post->ID;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 3 == 0) { ?>
<div class="row no-gutters">
<?php
}
?>
<!-- ROW 3 - [Six Posts] Markup -->
<?php $i++;
if($i != 0 && $i % 3 == 0) { ?>
</div><!--/.row-->
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
I'm attempting to create a single WP loop, using a custom query, to display a custom-post-type - using Bootstrap 4 markup. The complicating part for me is, I'd like the number of posts for each row to alternate in the following way:
- Row 1 - One Post - Full Screen width
- Row 2 - Four Posts - col-md-6
- Row 3 - Six Posts - col-md-4
At the moment I'm running three individual loops which is messing-up the pagination. i.e. When pagination is clicked the page content remains the same - however the url indicates that the user is on the second page. Grateful for any help.
<!-- Loop 1 -->
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 1,
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 1 == 0) { ?>
<div class="row">
<?php
}
?>
<!-- ROW 1 - FULL SCREEN WIDTH MARKUP -->
</div><!--/.row-->
<?php $i++;
if($i != 0 && $i % 1 == 0) { ?>
</div> <!-- End Container -->
<div class="clearfix"></div>
<?php
} ?>
<?php
endwhile;
}
wp_reset_postdata();
?>
<!-- Loop Two -->
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 4,
'offset' => 1,
'paged' => $paged
);
$my_query = null;
$do_not_duplicate[] = $post->ID;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 2 == 0) { ?>
<div class="row no-gutters">
<?php
}
?>
<!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
<?php $i++;
if($i != 0 && $i % 2 == 0) { ?>
</div><!--/.row-->
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
$args=array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 6,
'offset' => 5,
'paged' => $paged
);
$my_query = null;
$do_not_duplicate[] = $post->ID;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$i = 0;
while ($my_query->have_posts()) : $my_query->the_post();
// modified to work with 3 columns
// output an open <div>
if($i % 3 == 0) { ?>
<div class="row no-gutters">
<?php
}
?>
<!-- ROW 3 - [Six Posts] Markup -->
<?php $i++;
if($i != 0 && $i % 3 == 0) { ?>
</div><!--/.row-->
<?php
} ?>
<?php
endwhile;
}
wp_reset_query();
?>
Share Improve this question edited Feb 6, 2019 at 20:26 Nate asked Feb 6, 2019 at 18:11 NateNate 155 bronze badges 3
- Could you show the loops you're using currently? – Krzysiek Dróżdż Commented Feb 6, 2019 at 18:15
- what if you go over 11 posts? does this pattern start over or are all the rest in col-md-4? – rudtek Commented Feb 6, 2019 at 18:17
- @rudtek I'd like to repeat the pattern. – Nate Commented Feb 6, 2019 at 20:24
2 Answers
Reset to default 1The easy-but-a-bit-hacky way to get there would be to initialize a counter variable before your loop and then use that to tell what post you're on. something like so:
$paged = (get_query_var('paged')) ? absint(get_query_var('paged')) : 1;
$args = array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 11,
'paged' => $paged,
);
$customQuery = new WP_Query($args);
$counter = 1;
if ($customQuery->have_posts()) :
while ($customQuery->have_posts()) : $customQuery->the_post();
if ($counter === 1) { ?>
<div class="row">
<!-- ROW 1 - FULL SCREEN WIDTH MARKUP -->
</div><!--/.row-->
<?php
} elseif ($counter <= 5) {
if ($counter === 2) { ?>
<div class="row no-gutters">
<?php }
?>
<!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
<?php if ($counter === 5) { ?>
</div><!--/.row-->
<?php }
} else {
if ($counter === 6) { ?>
<div class="row no-gutters">
<?php } ?>
<!-- ROW 3 - [Six Posts] Markup -->
<?php if ($counter === 11) { ?>
</div><!--/.row-->
<?php }
};
$counter++;
endwhile;
endif;
There is no need to introduce a counter, you can use $wp_query->current_post.
<?php
$paged = (get_query_var('paged')) ? absint(get_query_var('paged')) : 1;
$args = array(
'post_type' => 'workshop',
'post_status' => 'publish',
'posts_per_page' => 11,
'paged' => $paged,
);
$customQuery = new WP_Query($args);
// Row 1 - One Post - Full Screen width
while ($customQuery->have_posts() && $customQuery->current_post < 1 ) : $customQuery->the_post(); ?>
<div class="row">
<!-- ROW 1 - FULL SCREEN WIDTH MARKUP -->
</div><!--/.row-->
<?php endwhile;
//Row 2 - Four Posts - col-md-6
while ($customQuery->have_posts() && $customQuery->current_post < 5) : $customQuery->the_post(); ?>
<div class="row no-gutters">
<!-- ROW 2 - [FOUR POSTS] MARKUP HERE -->
</div><!--/.row-->
<?php endwhile;
//Row 3 - Six Posts - col-md-4
while ($customQuery->have_posts()) : $customQuery->the_post(); ?>
<div class="row no-gutters">
<!-- ROW 3 - [Six Posts] Markup -->
</div><!--/.row-->
<?php endwhile; ?>