Least Number of Loops to Create Custom Homepage?

Question

I am trying to create a custom homepage where the site content is shown as follows...

See image...

https://i.sstatic.net/ykrdf.png

With separate loops this is simple... 3 individual query_posts inside a category fetch loop...

But I want to reduce the number of query posts from 3 to 1 per category since they are coming from the same category...

Is this possible... (since I couldn't figure out how to wrap 3 iterations with a div class block)

Answer 1

You can achieve this by checking where you are in the loop and outputting markup at the appropriate time. Within the object that holds the query results is a counter that keeps track of the current post, $wp_query->current_post. Note that it is zero-indexed, so first is 0, 2nd is 1, etc..

<?php
while( have_posts() ):
    the_post();

    if( $wp_query->current_post == 0 ):

        // this is the first post
        ?>
            <div class="one">
                <?php the_title(); ?>
            </div>
            <div class="two">
        <?php

    elseif( $wp_query->current_post > 0 && $wp_query->current_post < 4 ):

        // this is the second - fourth posts
        the_title();

    elseif( $wp_query->current_post == 3 ):

        // this is the fourth post
        ?>
            <!-- close div class=two -->
            </div>
        <?php

    endif;

endwhile;

Answer 2

Try like this:

query_posts( 'posts_per_page=9' );
$postcount = 1;
$firsttop = false;
$firstbottom = false;
$secondtop = false;
$secondbottom = false;
$thirdtop = false;
$thirdbottom = false;
while ( have_posts() ) : the_post();
if($postcount = 1){
if(!$firsttop){
//open first div...
$firsttop = true;
}
//call first post structure...
$postcount++;
if(!$firstbottom){
//close first div...
$firstbottom = true;
}
}
else if($postcount > 1 and $postcount < 5){
if(!$secondtop){
//open second div...
$secondtop = true;
}
//call first post structure...
$postcount++;
if(!$secondbottom){
//close second div...
$secondbottom = true;
}
}
else {
if(!$thirdtop){
//open third div...
$thirdtop = true;
}
//call third post structure...
$postcount++;
if(!$thirdbottom){
//close third div...
$thirdbottom = true;
}
}
endwhile;

// Reset Query
wp_reset_query();