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.

your thoughts
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
Spilt » Dual-Column Posting
[...] 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”. [...]
lyz
Hello Rachel,
Thanks for the post. This will be a great help!
Thanks again!
jez
excellent, this is what I was looking for!
cheers mate
h4x3d.com | Wordpress posts in two columns (design / code)
[...] note: Post here Tagged with: 2008 • design • link • personal note • wordpress There is a [...]
Weblog Tools Collection » Blog Archive » Two side-by-side columns in WordPress
[...] 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 [...]
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.
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
nathan
Very interesting.
Thanks a lot for sharing.
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.
Matt Algren
Jared, try this plugin. Works great.
http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin
Links for 04-03-2008 | Velcro City Tourist Board
[...] – 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 [...]
simon
some nice code work there….
Skylog » Blog Archive » links for 2008-03-04
[...] How to organize posts into two side-by-side columns in Wordpress (tags: wordpress) [...]
bssn
a easy to use code, thanks.
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.
le blog à Ollie » Liens du jour
[...] WordPress: comment afficher ses billets sur deux colonnes. [...]
Two side-by-side columns in WordPress | OPOWAE
[...] 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. [...]
Wordpress Temanızı Özelleştirin | Siyaset Bilimi ve Uluslararası İlişkiler
[...] 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 - TurkForum.Net
[...] adýmlar uygulandýðýnda þu demodaki gibi listelenebiliyor. Ýlgili kodlar ve ne þekilde kullanýlacaðý þu sayfada yer alýyor. bu sütunlarýn kullanýldýðý bir temanýn genel görüntüsü Bu tür listelemelerle genellikle magazin [...]
Sharing Quality » How to organize posts into two side-by-side columns in Wordpress
[...] Link to the original site [...]
Tiqla.CoM | Hayata Dair Herşey » Blog Archive » Wordpress Tema özelleştirme
[...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]
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
Publishing WordPress posts in two columns | WordPressGarage.com
[...] 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 [...]
James Erickson
Thanks, I know this probably isn’t the newest thing out there, but it will save me a ton of time and $$$$.
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?
Sonika’s blog » Посты в несколько колонок
[...] How to organize posts into two side-by-side columns in Wordpress Демо-блог: посты в 2 колонки и еще [...]
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?
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.
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!
Two side-by-side columns in WordPress | Wordpress Bin
[...] 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. [...]
porno
he tutorial does require some simple PHP code
Wordpress Tema özelleştirme
[...] İlgili kodlar ve ne şekilde kullanılacağı şu sayfada yer alıyor. [...]
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
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/
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!
iş elbiseleri
I’d need to see your website to know what’s going on.
How to organize | Muslim Ontario
[...] 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 the first [...]
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
Nyo
… solved, just for 1 px…
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!”
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.
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
nwordpress.nedeek.com » Blog Archive » a
[...] 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 the first [...]
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
subvolt » How to: Wordpress theme with posts in 2 columns (side by side)
[...] to be posted side by side and rated by viewers. After a few unsuccessful searches, I came across this post from cre8d [...]
Web Design Bangkok
Thanks for the info. I really need to experiment with this. Sounds good. Thanks.
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!
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
Ben
Than you Stephen – great job!
Sam Burdge
version 2 of WP Post Columns is now available.
http://www.samburdge.co.uk/wordpress/wp-post-columns-plugin-2
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
udyr.com » Blog Archive » links for 2009-01-13
[...] How to organize posts into two side-by-side columns in Wordpress | cre8d design: blog designer <?php $col = 1; ?> [...]
جعل المواضيع تظهر في عمودين في الصفحة الرئيسية « مدونة أبو مارية
[...] http://www.cre8d-design.com/2008/03/how-to-organize-posts-into-two-side-by-side-columns-in-wordpress... [...]
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!
Organising posts into side-by-side columns in Wordpress | cre8d design: blog designer
[...] have received many comments asking how to extend the earlier tutorial on How to organise posts into two side-by-side columns in Wordpress to work with more than just two [...]
Tetsix
72]ÂÕÎÄ íà ÏÎÐÍÎ ÑÀÉÒ
46] ÂÕÎÄ
http://pipiskun.land.ru/xr3/42.jpg http://pipiskun.land.ru/xr3/70.jpg
http://pipiskun.land.ru/xr3/6.jpg http://pipiskun.land.ru/xr3/19.jpg
http://pipiskun.land.ru/xr3/10.jpg http://pipiskun.land.ru/xr3/59.jpg
http://pipiskun.land.ru/xr3/16.jpg http://pipiskun.land.ru/xr3/10.jpg
46] ÏÎÐÍÎ
72]ÑÀÌÎÅ ÑÂÅÆÅÅ ÏÎÐÍÎ
72]âèäåî xxx çàãðóçèòü
72]ïîðíóõà øêîëüíèöû ðîëèê ñêà÷àòü
72]ïîðíî ôîòî ïîñìîòðåòü ïîðíî-ñàéò
âèäåî ýðîòèêà ñêà÷àòü ïîðíî-ñàéò
âèäåî ïîðíî ðîëèê ïîñìîòðåòü ïîðíî-ñàéò
âèäåî ïîðíî çàãðóçèòü
âèäåî xxx ñêà÷àòü
on-line ãîëîå çàãðóçèòü
ïèñÿ ðåáåíêà
ïîëíîìåòðàæíûå ïîðíî ôèëüìû online
ïîðíî ìàðèíà
ôîòî ãàëåðåè ñåêñ âå÷åðèíêè
ïîðíî ìàìî÷êè
÷àñòíàÿ ýðîòèêà îíëàéí
ñàìàÿ æåíùèíà
å ïîðíî âèäåî ìîëîäåíüêèõ äåâî÷åê
ïîðíî âèäåî ïîðòàë ãî – ïîðíî âèäåî ðîëèêè
ïîðíî ôîòî ìîëîäåíüêèõ – ïîðíî ðîëèêè
ìîëîäûå ëåñáèÿíêè îíëàéí
ýðîòèêà âèäåî ðîëèêè
çàãðóçèòü ïîðíî ðîëèêè
ãåé âèäåî îíëàéí áåç ðåãèñòðàöèè
ôîòêè ãîëûõ æåíùèí
ïîðíî ðîëèêè ñ ÿïîíêàìè
ïîðíî êëèïû áåç ðåãèñòðàöèè
ëó÷øèå ôîòî ïîðíî ãàëëåðåè
ðîëèêè ãååâ ñìîòðåòü îíëàéí
ïîðíî áîëüøèå æîïû
ïîðíî âèäåî ñî çâåçäàìè ìèðà
ôîòî ãîëîé êàòè ñòðèæåíîâîé
ãåé ðîëèêè
www ïîðíî ru – ñåêñ ðîëèêè
ñåêñ âèäåî îíëàéí ïðîñìîòð
ãåé ñåêñ âèäåî ñêà÷àòü
ïîðíî online ïðîñìîòð
ñåêñ ãîëûå äåâóøêè
÷àñòíàÿ äîìàøíÿÿ ýðîòèêà – ïîðíî âèäåî ðîëèêè
ðóññêîå ïîðíî ýðîòèêà
ïîðíî ñî çâåçäàìè ñìîòðåòü – ñåêñ âèäåî
ïîðíî ìóëüò êîìèêñû
õîðîøàÿ ýðîòèêà îíëàéí
áîíäàæ áäñì îíëàéí
ìàëåíüêèå ãîëûå àçèàòêè
on line ïîðíî
ïîðíî òâ êàíàëû îíëàéí ñìîòðåòü
ñåêñ ñàéòè – ïîðíî ðîëèêè
ïîðíî îíëàéí ðóññêèå ìîëîäåíüêèå
þëÿ êîâàëü÷óê ïîðíî – ïîðíî ðîëèêè
ãîëàÿ film ïîñìîòðåòü
xxx ðîëèê ïîñìîòðåòü
îíëàéí xxx ïðîñìîòð
ïîðíóõà dvd ñêà÷àòü
èíòåðíåò ñåêñ ïîñìîòðåòü
xxx ðîëèê ïîñìîòðåòü
ãîëûå âèäåî ñêà÷àòü ïîðíî-ïîðòàë
ïîðíóõà ñìîòðåòü
ôèëüì ïîðíî ïîñìîòðåòü
îíëàéí ãîëîå ñêà÷àòü
online ãîëîå film ïðîñìîòð
îí-ëàéí ãîëóþ film ñêà÷àòü
ïîðíî ôîòî ïîñìîòðåòü
îí-ëàéí sex ôîòî ñìîòðåòü ñàéò
At the back of Germjan.nl – Germjan
[...] with quite some modifications. On the frontpage I used a two collumn post-feed. I got the code at cre8d-design. For the typeface I used mostly “Geosans light” and some css3 code to embed [...]
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