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

1 Views

I am creating a custom page template with multiple loop like this
http://demos.gabfirethemes.com/advanced/category/football/

You can see there are posts split up into multiple columns: One featured post, then 2 posts, and then 4 posts on right side.

Read More

I could only get posts into 2 column.

Can you please explain how to split loop in multiple columns like
this ?

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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 1st 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>
    }
}

  2. Code based on this answer, needs further adaptations but demonstrates the concept:

    $count = 0;
while ( have_posts() ) : the_post();

if ( $count < 1 ) {
  // first post
  echo '<div id="left-column">';
  the_title();
} elseif ( $count <= 2 ) {
  // next 2 posts
  the_title();
  if( $count == 2) echo '</div><!-- end left-column -->';
} else {
  // rest of the posts
  if( $count == 3) echo '<div id="right-column">';
  the_title();
}

$count++;
endwhile;
echo '</div><!-- end right-column -->';