CODEWITHSUNDEEP
wordpress
gnr5
gnr5

Reputation: 65

How can I display the first 6 posts in two columns and the rest of the posts in a single column? Wordpress

I'm trying to display my posts my like.

A B

C D

E F

G

H

I

So far I have the following:

<div id="left-column">
    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>
    <div class="post-row">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
        the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </div><!--post-row-->   


<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--left-column-->

<div id="right-column">
    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>
    <div class="post-row">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
        the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </div><!--post-row-->   
<?php endif; endwhile; else: ?>
<?php endif; ?>
</div><!--right-column-->
<div id="restofpage">
 NEED THE REST OF THE CODE.
 </div>

Any idea how I can limit my logic to just 6 posts and how to continue wit the rest of the page?

Upvotes: 0

Views: 2773

Answers (2)

The Alpha
The Alpha

Reputation: 146191

You can use two loops, for the 1st loop

query_posts(array(
    'showposts' => 6
));
while (have_posts()) : the_post();
    // your code here for 2 columns
endwhile;

Above code will load only first 6 posts by default, now for the 2nd loop

wp_reset_query();
query_posts(array('paged'=>$paged, 'offset'=>7));
while (have_posts()) : the_post();
    // your code here for single column/rest of the post
endwhile;

This code will load all posts beginning from offset 7.

Upvotes: 0

Philipp Kyeck
Philipp Kyeck

Reputation: 18820

don't do two whiles - keep it to just one. create an <article> or <div>for every post and just change the class: for example small for the first 6 and wide for the rest ...

<div id="page">
    <?php 
        if (have_posts()) :

            $index = 0;

            while(have_posts()) : the_post(); 
    ?>

    <article class="post<?= $index < 5 ? ' small' : ' wide' ?>">
        <?php 
        if ( function_exists( 'add_theme_support' ) && has_post_thumbnail()){
            the_post_thumbnail(array(170, 80));
        }
        ?>
        <div class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></div><!--post-title-->
        <div class="post-content excerpt"><?php the_excerpt();?></div><!--post-content-->
    </article><!-- post -->   

<?php 
           ++$index;
            endwhile; 

        endif; 
?>
</div><!--left-column-->

<div id="restofpage">
 NEED THE REST OF THE CODE.
</div>

and then you can do the rest via CSS:

#page {
    width: 420px;
    margin-right: -20px;
    font-size: 0;
}

.post {
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;

    font-size: 16px;
    margin-right: 20px;
    margin-bottom: 40px;
}

.post.small {
    width: 200px;
}

.post.wide {
    width: 420px;
}

Upvotes: 2

Related Questions