I've created a custom post type and cannot seem to get my if-statements to work for displaying different layouts properly depending on the amount of items in my while-loop. What I want to achieve is to check how many CPT is set and depending on the amount of posts display different layout.
For exemple: if one CPT is set, display 100% width, if two CPT display 50% width each column and so on and so forth.
I have already predefined some css layout classes which i use in my html-containers.
To my problem, is that I don't understand why my if-statements doesn't work for displaying my column-layouts. My first if-statement, which is checking for when a single post is set and the amount is equal to 1 works as it should and displays the layout-design I want.
What I don't understand is when I check for the amount of post equal to 2 in my else if-statement, my first and second post gets separately layout classes, which leads to them getting stacked on top of each other, instead of display side by side. I really need some help with this logic for better understanding looping out content in wordpress.
Thanks!
$puff_arg = array(
'post_type' => 'Puff',
'posts_per_page' => 10,
);
$puff = new WP_Query ( $puff_arg );
if ( $puff->have_posts() ) {
while ( $puff->have_posts() ) {
$puff->the_post();
$heading = get_post_meta($post->ID, 'heading');
$text = get_post_meta($post->ID, 'text');
// counts posts in loop and increment by 1
$count_posts = $puff->current_post + 1;
// Check amount of post to 1
if ( $count_posts === 1 ) {
<!-- Display layout with 1 Image -->
<div class="col-12">
<div class="">
<h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3>
<p><?php echo $text[0] ? $text[0]: ''; ?></p>
</div>
</div>
// Check amount of post to 2
} else if ( $count_posts === 2 ) {
<!-- Display layout with 2 Images -->
<div class="col-6">
<div class="">
<h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3>
<p><?php echo $text[0] ? $text[0]: ''; ?></p>
</div>
</div>
// Check amount of post to 3
} else if ( $count_posts === 3 ) {
<!-- Display layout with 3 Images -->
<div class="col-4">
<div class="">
<h3><?php echo $heading[0] ? $heading[0]: ''; ?></h3>
<p><?php echo $text[0] ? $text[0]: ''; ?></p>
</div>
</div>
}
}
wp_reset_postdata();
}