This loop is adapted from one I used recently. You should be able to just drop it into whatever template you’re using to display your blog posts and it’ll work. It may need a little tweaking based on your needs.
<?php global $wp_the_query;
while (have_posts() && $wp_the_query->current_post < 0): the_post(); ?>
<div class="featured-post">
<?php the_title(); // ...and whatever else you want to do ?>
</div>
<?php endwhile; ?>
<div class="two-columns">
<?php while (have_posts() && $wp_the_query->current_post < 2): the_post(); ?>
<div class="secondary-post">
<?php the_title(); // ...and whatever else you want to do ?>
</div>
<?php endwhile; ?>
</div>
<div class="three-columns">
<?php while (have_posts() && $wp_the_query->current_post >= 2): the_post(); ?>
<div class="tertiary-post">
<?php the_title(); // ...and whatever else you want to do ?>
</div>
<?php endwhile; ?>
</div>
Instead of modifying the WordPress Loop, this query just looks at what iteration of that loop you’re on, and then uses the correct section accordingly.
The queries like this are the key:
while (have_posts() && $wp_the_query->current_post < 0)
The integer there (0 in this case) is, basically, the number of posts (minus 1, because when a computer counts the first item is 0) from the beginning of the loop that you want to show here. This particular while loop will “loop” through only a single post–the first one.
while (have_posts() && $wp_the_query->current_post < 2)
This while loop with move through the next two posts. The first while has already “done” the first post, so it’s not available to this loop: It’ll start on post #2.
while (have_posts() && $wp_the_query->current_post >= 2)
And this will move through the remainder.
Ultimately, you should end up with something like this:
<div class="featured-post">
Title of the Featured Post
</div>
<div class="two-columns">
<div class="secondary-post">Another Post, A</div>
<div class="secondary-post">Another Post, B</div>
</div>
<div class="three-columns">
<div class="tertiary-post">Remainder Post 1</div>
<div class="tertiary-post">Remainder Post 2</div>
<div class="tertiary-post">Remainder Post 3</div>
<div class="tertiary-post">Remainder Post 4</div>
<div class="tertiary-post">Remainder Post 5</div>
<div class="tertiary-post">Remainder Post 6</div>
<div class="tertiary-post">Remainder Post 7</div>
</div>
…Which you can then style into columns however you want.
