WordPress: Most recent post in one column, other posts in two columns

1 Views

My client is looking to change her homepage to look similar to this site: http://www.eatliverun.com/
Where the most recent post is up top in full in one column and the others are in two column excerpts.

She wants to have just one recent post display and the rest in the two column format. I’m just not sure how to accomplish this correctly.

Read More

Her website is located at http://pamelastable.com/

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Integrating a counter into your loop can easily help you achieve this layout. Try something as follows (note: the ‘six columns’ class represents your 2 column layout in a 12 column grid):

    <?php $count = 1; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php if ($count == 1) { ?>
            <article>
                    <div>
                        <h2><a href="<?php the_permalink(); >"><?php the_title(); ?></a></h2>
                        <?php the_excerpt(); ?>
                    </div>
            </article>
            <?php $count++; ?>
            <?php } else { ?>
            <?php if($count % 2 == 0) { ?>  
            <div>
                <? } ?>
                <div class="six columns">
                    <article>
                        <div>
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </article>
                </div>
                <?php if($count % 2 == 1) { ?>
            </div>
            <? } ?>
            <?php $count++; ?>
        <? } ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>

  2. Just add a counter to the loop and style the html differently for the first iteration.

    <?php $i = 0; while ( have_posts() ) : the_post(); //inside loop ?>
    <?php if ($i++ == 0) : ?>
        <div>First Post</div>
    <?php else: ?>
        <div>Other Posts</div>
    <?php endif; ?>
<?php endwhile; ?>

    In your index.php or other template file^

  3. Just use a counter to see which post number you are on.

    <?php
if (have_posts()) {
    $i = 0;
    while (have_posts()) {
        the_post();

        if (++$i == 1) {
            echo '<div class="entry-large">';
        } else {
            echo '<div class="entry-small">';
        }
        the_content();
        echo '</div>'
    }
}