How do you split multiple-column loop on category archive page?

The Basics

Columns are managed by CSS. So if you’re using a css framework, like Bootstrap, Blueprint CSS or any other, than you’ve some classes that you can add to an article/post container, so that they float in the desired amount of columns.

Blueprint CSS

In the case of Blueprint Css, this might be span-8 (3 column layout on 24 column grid) with a class of last attached to your last post in a row.

Twitter Bootstrap

In the case of Twitters Bootstrap, it’s span4 (3 column layout on 12 column grid) with a container, that wraps every row and has the class row.

How it works

So you need to determine, on which post you’re (inside you query – keep in mind, that counting starts in most programming languages with 0 for the 1^st item) and then add the class (or insert the MarkUp) to the specific post. To all other posts, you just add a default class or MarkUp.

Explanation of the example

In the below example, we’re using the $wpdb global, which holds the instance of the database functions. This way we can check the instances var current_post to get the counter. Then we use ++ to increment the counter.

How-to apply classes using the core API

Everything then goes into post_class(), which echos a standard set of WPs internal classes – as well as the custom (CSS framework specific) classes that we added – and adds the class="wp-internal-classes and custom-classes" to the container (div or article).

A (maybe) best practice example

global $wpdb;
if ( have_posts() )
{
    while ( have_posts() )
    {
        the_post();

        $class  = get_post_format();
        // Current post: starts with index 1 - fixing the fact, that PHP starts with 0 else.
        // [A] HER YOU CAN ADD ANY CLASSES THAT YOU NEED FOR EVERY 3rd POST
        $class .= 0 === ( ++$wpdb->current_post % 3 ) ? ' special-class' : '';

        ?>
        <!-- Open Post Container -->
        <article <?php post_class( "span4 post{$class}" ); ?> id="post-<?php the_ID(); ?>">

            <!-- [B] HERE YOU CAN ADD YOUR ACTUAL POST -->

        <!-- // Close Post Container -->
        </article>
    }
}