Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

I could only get posts into 2 column.

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

share|improve this question
2  
Please improve your question: Use upper-/lowercase letters, periods and commas and use the anchor WYSIWYG tag to insert links. We take our time to answer, so please take your time to make reading it for us and later readers a pleasure. Thanks. –  kaiser Jul 5 '12 at 11:19
1  
Great observation/phrase about the time, Herr @kaiser. . . . . . . Nisha, it's common-place of mine but please take your time to read the full FAQ (you'll earn a badge for it) & kudos for the great answer you prompted :) –  brasofilo Jul 5 '12 at 11:36
add comment

2 Answers

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>
    }
}
share|improve this answer
add comment

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 -->';
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.