I recently received an email asking for some WordPress advice on making posts show up in columns and thought I’d share one way of doing this.

There are two theme files to be edited: index.php and style.css. I have just edited the default Kubrick theme, so adjust this to suit your own theme.

The basic idea is to add a “switch” so WordPress knows if you’re looking at a post which will appear in the first or second column.

In index.php I added code in four places:

Before the WordPress loop starts:

<?php $col = 1; ?>

I.e. we set up the switch to start off in the first column.

Just after the WordPress loop starts:

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

Start a new row if we’re in the left hand column.

Inside the WordPress loop:

Add in the switch:

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

I.e. I added in col<?php echo $col;?> to the post’s class. We’ll use CSS to decide how to display posts in each column.

Just before the end of the WordPress loop:

Change the switch and the row:

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

The WordPress loop ends with endwhile.

Just before this, I do two things: finish the row and I make $col switch between the first or second column. If you haven’t seen code like this before, this is what it’s doing:

Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.

In style.css I added three lines of code at the very bottom:

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

If you’re using a different theme, you may need to adjust the column widths and the amount of padding.

Using a row div forces the two posts to always line up with each other, even if the excerpts are different lengths.