WordPress Posts in Different Columns

I have seen many people online asking how to divide blog posts into more columns. There isn’t much useful information about that around so I’ve decided to write this article. I will show you how to divide blog posts into two and then also into three columns. Though, after reading this article you’ll be able to add even more columns.

Before actually editing the wordpress loop you need to create appropriate multicolumn layout. When you want to have posts in two columns you must first customize your layout to handle that. The basic CSS code for this might look like this (you should further customize it to fit your theme):

.row {clear:both;}
.col1 {width:300px;float:left;padding:10px;}
.col2 {width:300px;float:right;padding:10px;}

Ok. I suppose your layout is ready so we can move to the more interesting part. We need to tell the wordpress loop to put the posts into different columns. Let’s start with two columns. In this example they are called col1 and col2.

Open your index.php file and add this just before the beginning of the wordpress loop:

<?php $col = 1; ?>

So the loop will start in the first column.

Add this just after the loop beginning:

<?php if ($col == 1) echo “<div class=\”row\”>”; ?>

Now inside the wordpress loop. Replace <div class=”post” id=”post-<?php the_ID(); ?>”> with:

<div class=”post col<?php echo $col;?>” id=”post-<?php the_ID(); ?>”>

That will assign different classes to posts depending on what is set in $col variable.

Just before the end of the loop we will switch the column:

<?php if ($col == 1) echo “</div>”; (($col==1) ? $col=2 : $col=1); endwhile; ?>

The loop ends with endwhile;.

Yeah. That’s it. Now your posts should be in two columns which you can style in your stylesheet to match your theme perfectly. But what if you need more columns? Is that possible? Sure, here’s how.

Just change the switch before the end of the loop to something like this:

<?php
if ($col == 1) echo “</div>”;
if($col == 1) {$col = 2;} else {
if($col != 1) {
if($col == 3) {$col = 1;}
if($col == 2) {$col = 3;}
}
}
endwhile; ?>

Voila! Now you should have three columns. Just don’t forget to add third column to the stylesheet. You can easily add more columns if you need. The only thing to modify is the switch before the end of the loop and the stylesheet.

This entry was posted in Wordpress and tagged . Bookmark the permalink.

4 Responses to WordPress Posts in Different Columns

  1. TR says:

    Hi, i’m trying to implement your very elegant fix for the columns on my archives pages (click on a product). I was wondering if there is an update or anything. I’m getting an error:

    Parse error: syntax error, unexpected ‘/’ in /mnt/gs01/herd03/33173/domains/news.mabuhaykids.com/html/wp-content/themes/paalam-11/archive.php on line 48

    My loop looks like this:


    Any help is greatly appricated. Thanks for your time!
    Tane

  2. admin says:

    Seems like something went wrong – the code of the loop you’ve posted disappeared… Anyways, be sure not to forget anything from above.

    From the error message you got it’s clear you’re dealing with syntax mistake. It seems you have character somewhere it isn’t supposed to be (check line 48). I don’t have any characters in my code so be sure to fix that.

    Also try replacing all ? (double acute accent) with (double opening quote) in the source – this is quite usual problem.

  3. I was researching the same thing when I saw this.. I can not agree more – but I am still going to look for a better source.

  4. admin says:

    Hi. What better source? This will work just fine :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>