How to organize posts into two side-by-side columns in WordPress

March 1, 2008

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.

I’ve set up a demo blog showing how it looks after the code is implemented.

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.

http://www.visit-the-coqui.com Coqui

Nice.

Thanks for the code.

It works fine in FF, but in IE6 the posts do not line up – first few are OK, but post 3 does not line up.
rachelcunliffe

Can you refresh, I added something in
Gareth

Hi, am I missing something or would it just be easier to give each post a fixed height (bigger than the max excerpt length) and float them? No multiple loops required…
rachelcunliffe

I’m not using a multiple loop. You won’t know what the fixed height is if there’s images in there.
jane

cool, next time you need to paste formated code to anyone else try http://textsnip.com
Pingback: Spilt » Dual-Column Posting
http://www.buyandsell-tradeonline.com/freewallpapers lyz

Hello Rachel,

Thanks for the post. This will be a great help!

Thanks again!
http://www.h4x3d.com jez

excellent, this is what I was looking for!
cheers mate
Pingback: h4x3d.com | Wordpress posts in two columns (design / code)
Pingback: Weblog Tools Collection » Blog Archive » Two side-by-side columns in WordPress
http://dem360.com.ar Dem

Very nice. This kind of tutorials are showing people that those “premium themes” going around web are simple to develop.

And most important, that there are persons like you teaching these kind of stuff.
http://jaredbares.com Jared

I have a similar dilemma with columns. However, I am wanting to be able to just display two columns in a single static Page without having to do anything too complicated or use ‘tables’ like I am doing now, any ideas? The page is http://jaredbares.com/movies
http://nathandiehl.com nathan

Very interesting.
Thanks a lot for sharing.
http://www.projectspossible.com Bill

I have always liked the two column format. On my blog I display the most recent post at the top and then below it I do a two column format of the past however many posts.

For those that don’t do excerpts (like me) I’ve also seen the “excertpesque” behavior in the post using the_content_rss(”, TRUE, ”, 30)

I’m not a theme author and I’m sure there are merits to excerpts over the_content_rss but it worked on the then I was using then.
http://matt.reclaimrecess.com Matt Algren

Jared, try this plugin. Works great.

http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin
Pingback: Links for 04-03-2008 | Velcro City Tourist Board
http://www.yeepage.com simon

some nice code work there….
Pingback: Skylog » Blog Archive » links for 2008-03-04
http://www.bssn.org bssn

a easy to use code, thanks.
http://www.bssn.org bssn

tip: something wrong in

<?php if ($col == 1) echo “”;

is should be:

<?php if ($col == 1) echo “”; ?>

i think.

why not use percent in style.css?
rachelcunliffe

You can use % in style.css too.
Pingback: le blog à Ollie » Liens du jour
Pingback: Two side-by-side columns in WordPress | OPOWAE
Pingback: Sharing Quality » How to organize posts into two side-by-side columns in Wordpress
Lawrence

Hi
I’m getting:

Parse error: syntax error, unexpected T_ENDWHILE in /home/.jordan/cakeoff/cake-off.com/wp-content/themes/default/index.php on line 28

Have I got something in the wrong place? Any help appreciated.

Thanks
Lawrence
Pingback: Publishing WordPress posts in two columns | WordPressGarage.com
http://www.emcdental.com/blog James Erickson

Thanks, I know this probably isn’t the newest thing out there, but it will save me a ton of time and $$$$.
http://skurfboards.com/wow confused

Im so confused as how to use the code you gave within my theme. My themes code seems different then you stated. This is it below. Please help I need it for a school project, trying to make a newspaper

<?php if ($col == 1) echo “”; ?>

<a href=”" rel=”bookmark”>

|

<!–

–>

Comments
Rachel

Confused — what theme are you using?
Pingback: Sonika’s blog » Посты в несколько колонок
Bheron

Hi,

I am having the same problem as first comment, works fine in FF but not in IE, the third post gets messed up. Any chance you can post the complete code for index.php that you are using on your demo?

thanks
Rachel

The code at the top works in IE/FF. Check you are placing the code inside the loop correctly. If in doubt, add a link to your site here for me to check.
Bheron

http://textsnip.com/3ad768

here is the code, thanks for helping me!
Rachel

Can you post a link to your site here for me to check please?
http://broadwingdesign.com/wp/ bheron

here it is
Rachel

First thing is always to validate your code. Go here and you’ll quickly see lots of errors.

You can see that you’re missing a closing bracket:

e.g.

<div class=”post col1″ id=”post-5

Not

<div class=”post col1″ id=”post-5>
kayjay

I’m having a small problem, it is displaying fine in IE but in FF the posts do not line up. Any ideas what I may be doing wrong. Thanks for your help!
Rachel

I’d need to see your website to know what’s going on.
http://www.beattheworld.com/wp/?page_id=5 kayjay

Hey Rachel,

Thanks for checking it out. It’s still in development so there are other issues… but here is what we are looking at…
Rachel

Hi kayjay – your boxes are 5px too wide for your layout. Switch them both to 420px to solve this
kayjay

Ah yes should have checked that. Thanks so much for the great code and your help!!
Rachel

No problem!
Pingback: Two side-by-side columns in WordPress | Wordpress Bin
http://www.daha18.com porno

he tutorial does require some simple PHP code
Pingback: Wordpress Tema özelleştirme
James

Having some problems with this. Can you show example code for this as I’m working on a dev box.

Thanks.
Eylul

Can you please help me? I cant figure out what is wrong here!

http://celebrityfashiondirectory.com/
Smurf

Hello,

How can I change this code to display posts on three colummns ?

Thanks for your help.

Smurf
http://www.sapkaci.biz promosyon şapka

some nice code work there….
Nyo

My excerpt doesn’t align. I have only the first col1 excerpt in the right place (left) but all other excerpt in the left coloumn… Can you help me?Thank you!

http://www.yumeshima.net/immobiliareceleste/category/vendita-residenziale/
http://www.hervedesign.com/ hd-J

Hi! Thanks for the tip!

I just face one more problem. Would there be a way to display one post category in one column and another post category in column 2?
Nyo

Please, I really need help…
Nyo

nevermind, solved.
Thanks for this great tip!
http://www.isteelbisem.com iş elbiseleri

I’d need to see your website to know what’s going on.
Pingback: How to organize | Muslim Ontario
Nyo

Hi, me again… i’ve tried the code wid IE and it doesn’t work… (FF,OPERA and even in CHROME it works), can you help me please???

here is the link:
http://www.yumeshima.net/immobiliareceleste/category/vendita-residenziale

Thank you again!
Nyo

I really need help..
Nyo

… solved, just for 1 px…
http://ospalace.com mitza

i am having tha same problem as nyo please help me
“My excerpt doesn’t align. I have only the first col1 excerpt in the right place (left) but all other excerpt in the left coloumn… Can you help me?Thank you!”
http://www.ukstartingbusiness.co.uk/ dannys

Thanks, this was just what I was looking for. Everything else just assumed that you want a long list of posts but where you have a dedicated page or want them listed in the footer a more organised presentation is required.
http://callingqatar.com Qatar Boy

Great post and instructions are easy to follow – I have a question though – is there a way to show one post category in one vertical column and another post category in the second one? Cheers, Amar
Pingback: nwordpress.nedeek.com » Blog Archive » a
Dave

I have implemented you code and can see how it is supposed to work, but something doesn’t seem right.

Your code closes the row div after the first post, rather than the second, so on the last line I changed $col == 1 (close div) to $col == 2 (close div).

Before these changes the code was displaying all col1 divs wrapped in a row div, and all col2 divs seperately.

eg:
content
content
content
content

The only problem i’m having now is if there is an odd number of posts, the last row div isn’t closing, obviously because $col == 1 and never gets to 2 because it’s the last post.

Any Ideas???
Dave

sorry, here is the example:

http://textsnip.com/fd6745
Dave

Solved it now, I added a $loopcounter to the loop to count the amount of times the loop goes round ($loopcounter++), and if the loopcounter is odd, add an extra closing div to the end.

Here is my final loop:

http://textsnip.com/04dd01
Pingback: subvolt » How to: Wordpress theme with posts in 2 columns (side by side)
http://www.v9designbuild.com Web Design Bangkok

Thanks for the info. I really need to experiment with this. Sounds good. Thanks.
http://www.pixelinspired.com Zlatko

Isn’t there a simpler method than this? For example ExpressionEngine has switch method where you basically add values like this {switch=”col1|col2″} and you get the alternative columns. As simple as that!
http://s157574255.websitehome.co.uk/porp/ Ben

Hi Rachel,

Many thanks – I have implemented the code and posts now appear side by side but for some reason the footer background graphic now appears at the top of the posts – http://s157574255.websitehome.co.uk/porp/

I’ve spent the last 3 hours trying to work out why this is happening.

Can you give me any hints why this would be (I am a complete newbie to WordPress)

Thank you,
Ben
Stephen

Hi Ben,

The line mentioned in the instructions that looks like ‘<div class=”post…’ is usually in most themes already, so normally only the part about col<?php echo $col;?> needs to be inserted.

What you’ve done is fine, but since you had to add the whole line, add an extra </div> just before this line that you added:

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

Note that currently you also have the columns a little bit too wide – try using a width of 360px rather than 400px
http://pandasorponies.com/ Ben

Than you Stephen – great job!
http://www.samburdge.co.uk Sam Burdge

version 2 of WP Post Columns is now available.

http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin-2
http://resurrectionofjesus.org/ Jeff

I created this blog design with a two column post page.
These things I noticed.
You will want to control the length of the article and try to keep in above the fold else too much scrolling. The more tag can mess things up so you need to put in a hard text link to part two of your article and post the rest separately.
ie: Post the rest and then grab the page link from the address bar and install it as a text link in part one.
an example…resurrectionofjesus.org
Pingback: udyr.com » Blog Archive » links for 2009-01-13
Pingback: جعل المواضيع تظهر في عمودين في الصفحة الرئيسية « مدونة أبو مارية
http://www.art-that-inspires.com bohnanza

What is the process of adapting this code for more than 2 columns?
Vlatko

Hi there, just want to share my way. it duplicates code but works good. check this:

<div class=”post” id=”post-” style=”width:250px;float:left;”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>

<div class=”post” id=”post-” style=”width:250px;float:left;”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>
nowork

the tags close my col1-div, but not my col2-div…
nowork

Message to people using the arthemia-theme: Stay away from this code!
Pingback: Organising posts into side-by-side columns in Wordpress | cre8d design: blog designer
Pingback: At the back of Germjan.nl – Germjan
http://www.businessesintheuk.com Ben

1) How to make three columns.

2) Make the post go down not side ways.

e..g

right now:

1 2
3 4
5 6

should be:

1 4
2 5
3 6
http://beautyidentified.com/ Jim Miller

I’ve tried this and all I got was a white screen. I messed about with it but for some reason the adding of the post class failed. Any help would be so grateful.
Pingback: How to display Wordpress posts in two columns
zaza

hi, thanks but i didnt it. i use wpeducation theme.

http://textsnip.com/b7c930

this is my archieve file. how can i do?
http://notliveyet John

Hi there, and thanks for your example. I bet you are tired of stupid questions, but I am a bit lost. I have created my own queries and want to display 3 columns, and don’t know where in them to place your code. My querys goes like this (hope I can embed code):
have_posts()) : $coolb->the_post();
$post_image = get_post_meta($post->ID, ‘image’, true);
$post_alt = get_post_meta($post->ID, ‘alt’, true);
?>
<a href="” rel=”bookmark” title=”Permanent url to “>post_title) > 20) {
echo substr(the_title($before = ”, $after = ”, FALSE), 0, 20) . ‘…’; } else {
the_title();
} ?>

<a href="” title=”"><img src="” alt=”" style=”width:250px;height:190px; ” />
Rachel Cunliffe

Hi John,

See this post for more than two columns.
Syech

Sorry, but, did I missed something? Because I don’t get how to create the second column. Please e-mail me. Thanks before.
Thehammer

Hi, i just tried your code, works great, but the thing im doing is that i want to have the top article(newest one) in a single column all alone. i already have the code to customize only the top article, but the two column code breaks because of it.
this is the code im using for that part of the site right now:

<?php if ($col == 1) echo "”; ?>

<div class="post col “>

<a href="” title=”">

can you please take a look at this as soon as possible?(im working on my final exam of my first year at design school)

thanks in advance
Diane

hi Rachel
Can I use this same code to have 3 post columns instead of just 2? If yes, what do I need to do?

thanks a ton! (by the way, it works great just the way you have it up there; I just need 3 columns instead )
Diane
Rachel Cunliffe

Hi Diane,

See this post for more than two columns.
http://www.pennypayday.com Sean

Hi rachel,

I am new to web design and am having a few problems. i understand how to edit the code and i think i have it right but i cant figure how to display the posts on a page. I have been searching for the code i need to input to have them display but am getting bogged down in all the info. anyway you can help with this stupid question. i know its ridiculous because i can do stuff alot more complicated but this is kicking my butt
Rachel Cunliffe

Hi Sean,

I’ll need a bit more info to be able to help you out – can you link me to your site?

Rachel
http://www.pennypayday.com Sean

i did use recent post plugin to come up with http://www.pennypayday.com/posttest now just need to figure out if i can make columns work with it any ideas would help. i work with y buddies and they fired all the web guys and are expecting me to do this
http://www.contracthunter.com Kevin

Hey Rachel, I just converted my wordpress blog to a double column blog. Worked fine! Had to make an adjustment though and bring this line

<?php if ($col == 1) echo "”; ?>

closer to the blog post code though, instead of just inside the loop.

Appreciate the handy tutorial!

Kevin
http://www.bassettprovidentia.com Bassett Providentia

I found this post most helpful, in trying to sort out my columns. Thanks for an excellent post.
SDFSDFSDDF

tEST
Hsdfjkhsjkdhfjksdhfjsd

New Comment Has been posted
K-zur

Thanks this was very helpful, I just modified the code to my specifications.
http://www.rattan-lounge-moebel.ch/ günstige gartenmöbel

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.
http://www.nextage.ch/ webdesign

Looking at this info I am grateful to say that I get a positive feeling I
located the very things I needed. I most certainly will make sure to
dont forget this website and check it out on a constant basis.
http://www.crazypaydayloans.co.uk/ payday loans

if you post many times per day, the date in the slug is not specific
enough and you might run into issues where Jekyll doesn’t know which
order to display posts published on the same day.
http://www.mtsdm.com/drivers/driver-jobs/ truck driving jobs

Petersburg insurance executive and the Florida Republican party’s new finance chairman.Read
more here:
http://miamiherald.typepad.com/nakedpolitics/2012/04/florida-gop-fundraisers-locked-in-business-dispute-florida-miamiheraldcom.html#storylink=cpy
Theo

hey, you saved my day, thanks a lot, works like a charm.
stephanie

Can you make a exmaple? When I look in my index.php from my theme I dont know where to place it.. p
DEX

THX Rachel for a great code!! But the problem with your current code is that if you have posts of NON EQUAL height it will produce some funky results… So this is what i did to correct it a bit:=)

$paged,
‘post__not_in’ => $show_all_posts//added blank value variable in order to show posts if template is
)); //assigned as Front Page!!
if(have_posts()) : while(have_posts()) : the_post();

?>
<?php if ($col == 1) echo '’; ?>
<?php if ($col == 2) echo '’; ?>
<div >
<a href="”>

<?php the_post_thumbnail();
echo '’ . get_post(get_post_thumbnail_id())->post_excerpt . ”;?>

<?php /*Enable Two Column Layout*/
if($col==1) {
$col=2;
echo "”;
}
else if($col==2) {
$col=1;
echo “”;
}

endwhile; ?>

str_replace( $big, ‘%#%’, esc_url( get_pagenum_link( $big ) ) ),
‘format’ => ‘?paged=%#%’,
‘current’ => max( 1, $paged ),
‘total’ => $wp_query->max_num_pages
) );
?>

And CSS:
/*START styles for two column layout*/
.row { clear: left; }
.row2 { clear: right; }
.col1 { width: 262px;float:left;display:block;position:relative;margin-right:8px;}
.col2 { width: 262px;float:right;display:block;}

Hats off to you Rachel!! Keep up the good work…
DEX

Ups looks like you can’t enter a bunch of php code here:( Sorry you can delete my comment. Anway I think that this will work a little better:

$col = 1; //Let’s create first column
<?php if ($col == 1) echo '’; ?>
<?php if ($col == 2) echo '’; ?>
<div >

<?php /*Enable Two Column Layout*/
if($col==1) {
$col=2;
echo "”;
}
else if($col==2) {
$col=1;
echo “”;
}

endwhile; ?>

/*START styles for two column layout*/
.row { clear: left; }
.row2 { clear: right; }
.col1 { width: 262px;float:left;display:block;position:relative;margin-right:8px;}
.col2 { width: 262px;float:right;display:block;}

Now you can have post’s of non-equal height. THX Rachel all the best…

How to organize posts into two side-by-side columns in WordPress

Hi, I'm Rachel Cunliffe!

Keep updated