The above picture is displaying the wrong layout for my two cpt. I want instead display them side by side where I already specified a layout class (col-6) which is taking up 50% space for each column.

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();

    }

Read more here: WordPress – CPT – Count item in loop for display different layouts


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: