WordPress blog layout to post fullwidth then grid

Question

I want to do something a little different with my blog layout, I have seen it done before on WordPress so I know it can be done. Here is what I would like to achieve:

I want my blog to display 5 posts normally, then the older posts to display as a grid bellow. I have made a really quick demo in PS to show you what I mean. Here is my mock up: http://i.imgur.com/QqLLq07.jpg

Heres a website I have seen it on: http://www.speedhunters.com

Here is where I want this to happen: http://www.motorhive.net

So now you know what I want to do, how do I do it? :D

Answer 1

I've used the TwentyTwelve theme for this example:

index.php

Above the while loop, you will need to initialise a counter:

<?php $count = 0; ?>

Inside your while loop for getting the posts, you can do something like this:

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

    <?php 

        if ($count < 1) { 
            $setClass = "less-than";
        } else {
            $setClass = "more-than";
        }

        $count++;

    //  get_template_part( 'content', get_post_format() ); 
        include(locate_template('content.php'));
    ?>

<?php endwhile; ?>

This means any post less than 1, since we started the counter at 0, this will only apply it to our first post.

if ($count < 1) { 

You also need to comment out the get_template_part function, because we won't have access to our setClass variable, instead it will just include the content.php page.

content.php

Now we can pass the $setClass variable, in to post_class() function.

So:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Becomes

<article id="post-<?php the_ID(); ?>" <?php post_class($setClass); ?>>

So now when you view the index page you won't notice any visual changes, but if you inspect each post, you should see the class added to them:

<article id="post-4" class="post-4 post type-post status-publish format-standard hentry less-than">

The less-than class is added to this post.

Now you can style up the posts based on those 2 classes.

.less-than { /* your-styles */ }
.more-than { }

For the Divi theme:

in index.php, use this for your if statement:

if ( have_posts() ) :

$count = 0;

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

    <?php
    if ($count < 1) { 
        $setClass = "less-than";
    } else {
        $setClass = "more-than";
    }
    ?>

    <article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' . ' ' . $setClass ); ?>>

<?php

    $count++;
    echo $count;

    $thumb = '';

    $width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );

    $height = (int) apply_filters( 'et_pb_index_blog_image_height', 9999 );
    $classtext = 'et_pb_post_main_image';
    $titletext = get_the_title();
    $thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
    $thumb = $thumbnail["thumb"];

    if ( 'on' == et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
        <a href="<?php the_permalink(); ?>">
            <?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
        </a>
<?php
    endif;
?>