Wordpress Loop with different Column sizes

Question

I'm trying to make a loop that does the following,

The first post is a different column size, and every post under that is a col 6.

I'm using bootstrap. this image shows what i'm trying to accomplish. So each NEW posts shows at the top in the full column and everytime you create a new post it pushes down into the 1/2 columns.

Answer 1

I don't provide the full code solution, but I will give you the direction to solve your problem.

There are two ways to solve your problem:

1. Use two separated loop, the first one will have posts_per_page set to 1. The second one will have offset set to 1. It does the job but not optimal solution.
2. Use only one loop with a counter:
   • Set a $counter to 1 outside the while loop.
   • Increase $counter for 1 at the end of while loop, so it will increase every loop in while loop.
   • Check for current value of $counter before you echo the template
     • if $counter = 1, print the template for your featured post.
     • else? print the template for normal post (1/2 col)
   • You may need a wrapper for 2 column layout, you can print the opening div when you check for $counter = 1, right after the featured markup. For closing div, you can print it after the while loop end.

If you have any question, please let me know.

Answer 2

You should check inside a loop for an index and then change element class dynamically.

$args = array();
$query = new WP_Query($args);

if($query->have_posts()) {
    while($query->have_posts()) {
        $query->the_post();
        $colNumber = $query->current_post > 0 ? 'col-6' : 'col-12';

        printf('<div class="%s">%s</div>', $colNumber, get_the_title());
    }
}

Hope it helps