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 just like on 9antivirus.com 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.

See also
Comments

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

    — Coqui, March 1, 2008

  2. Can you refresh, I added something in :)

    — rachelcunliffe, March 1, 2008

  3. 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…

    — Gareth, March 1, 2008

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

    — rachelcunliffe, March 1, 2008

  5. cool, next time you need to paste formated code to anyone else try http://textsnip.com

    — jane, March 1, 2008

  6. [...] cre8ed design: How to organize posts into two side-by-side columns in Wordpress I’ve tried and tried to get this to work, but can’t. I’m saving it here for when I know a little bit more about “The Loop”. [...]

    — Spilt » Dual-Column Posting, March 2, 2008

  7. Hello Rachel,

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

    Thanks again!

    — lyz, March 2, 2008

  8. excellent, this is what I was looking for!
    cheers mate

    — jez, March 3, 2008

  9. [...] note: Post here Tagged with: 2008 • design • link • personal note • wordpress There is a [...]

    — h4x3d.com | Wordpress posts in two columns (design / code), March 3, 2008

  10. [...] Wordpress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side [...]

    — Weblog Tools Collection » Blog Archive » Two side-by-side columns in WordPress, March 3, 2008

  11. 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. :)

    — Dem, March 3, 2008

  12. 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

    — Jared, March 3, 2008

  13. Very interesting.
    Thanks a lot for sharing.

    — nathan, March 3, 2008

  14. 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.

    — Bill, March 3, 2008

  15. Jared, try this plugin. Works great.

    http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin

    — Matt Algren, March 3, 2008

  16. [...] - How to organize posts into two side-by-side columns in Wordpress “The basic idea is to add a “switch” so Wordpress knows if you’re looking at a post [...]

    — Links for 04-03-2008 | Velcro City Tourist Board, March 3, 2008

  17. some nice code work there….

    — simon, March 3, 2008

  18. [...] How to organize posts into two side-by-side columns in Wordpress (tags: wordpress) [...]

    — Skylog » Blog Archive » links for 2008-03-04, March 3, 2008

  19. a easy to use code, thanks.

    — bssn, March 4, 2008

  20. 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?

    — bssn, March 4, 2008

  21. You can use % in style.css too.

    — rachelcunliffe, March 4, 2008

  22. [...] WordPress: comment afficher ses billets sur deux colonnes. [...]

    — le blog à Ollie » Liens du jour, March 4, 2008

  23. [...] How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side columns with posts alternating between the two columns. The tutorial does require some simple PHP code that is not included (but should be, pseudo code is provided) but the concept is interesting, especially for theme developers looking for the next new thing. In my experience, side by side posts are more applicable for blogs that are heavy in embedded media and light on text. [...]

    — Two side-by-side columns in WordPress | OPOWAE, March 5, 2008

  24. [...] kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. bu sütunların kullanıldığı bir temanın genel [...]

    — Wordpress Temanızı Özelleştirin | Siyaset Bilimi ve Uluslararası İlişkiler, March 6, 2008

  25. [...] admlar uygulandnda u demodaki gibi listelenebiliyor. lgili kodlar ve ne ekilde kullanlaca u sayfada yer alyor. bu stunlarn kullanld bir temann genel grnts Bu tr listelemelerle genellikle magazin [...]

    — Wordpress Temanz zelletirin - TurkForum.Net, March 7, 2008

  26. [...] Link to the original site   [...]

    — Sharing Quality » How to organize posts into two side-by-side columns in Wordpress, March 9, 2008

  27. [...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]

    — Tiqla.CoM | Hayata Dair Herşey » Blog Archive » Wordpress Tema özelleştirme, March 10, 2008

  28. 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

    — Lawrence, March 14, 2008

  29. [...] design has a tutorial on how to organize posts into two side-by-side columns in WordPress. It’s based on adding a “switch” that tells WordPress if a post should appear in [...]

    — Publishing WordPress posts in two columns | WordPressGarage.com, March 20, 2008

  30. Thanks, I know this probably isn’t the newest thing out there, but it will save me a ton of time and $$$$.

    — James Erickson, March 21, 2008

  31. 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

    — confused, March 23, 2008

  32. Confused — what theme are you using?

    — Rachel, March 24, 2008

  33. [...] How to organize posts into two side-by-side columns in Wordpress Демо-блог: посты в 2 колонки и еще [...]

    — Sonika’s blog » Посты в несколько колонок, April 1, 2008

  34. 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

    — Bheron, April 9, 2008

  35. 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.

    — Rachel, April 9, 2008

  36. http://textsnip.com/3ad768

    here is the code, thanks for helping me!

    — Bheron, April 9, 2008

  37. Can you post a link to your site here for me to check please?

    — Rachel, April 9, 2008

  38. here it is

    — bheron, April 10, 2008

  39. 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>

    — Rachel, April 10, 2008

  40. 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!

    — kayjay, April 11, 2008

  41. I’d need to see your website to know what’s going on.

    — Rachel, April 12, 2008

  42. 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…

    — kayjay, April 12, 2008

  43. Hi kayjay - your boxes are 5px too wide for your layout. Switch them both to 420px to solve this :)

    — Rachel, April 12, 2008

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

    — kayjay, April 12, 2008

  45. No problem!

    — Rachel, April 12, 2008

  46. [...] How to organize posts into two side-by-side columns in WordPress: A quick tutorial on setting up the front page of a WordPress blog to display two side by side columns with posts alternating between the two columns. The tutorial does require some simple PHP code that is not included (but should be, pseudo code is provided) but the concept is interesting, especially for theme developers looking for the next new thing. In my experience, side by side posts are more applicable for blogs that are heavy in embedded media and light on text. [...]

    — Two side-by-side columns in WordPress | Wordpress Bin, April 16, 2008

  47. he tutorial does require some simple PHP code

    — porno, April 20, 2008

  48. [...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]

    — Wordpress Tema özelleştirme, April 28, 2008

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

    Thanks.

    — James, May 18, 2008

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

    http://celebrityfashiondirectory.com/

    — Eylul, June 17, 2008

  51. Hello,

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

    Thanks for your help.

    Smurf

    — Smurf, June 26, 2008

RSS feed for comments on this post.

Leave a comment