I 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 columns.
This can be done in a similar way by just editing two main files: index.php and style.css.
In index.php:
Before the Wordpress Loop starts:
<?php $col = 0; $numcols = 3; ?>
Change numcols to another number if you want something other than 3 columns.
Just after the Wordpress Loop:
<?php if ($ct && $ct%$numcols==0) echo '<div class="clearcol"></div>'; ?>
<div class="col">
Just before the end of the Wordpress Loop:
</div>
<?php $ct++; ?>
Just after the end of the Wordpress Loop:
<div class="clearcol"></div>
The exact code you need to add to style.css depends on how many columns you want, how much space you want between them, and how much width your theme allows for the posts.
For example, with the current Wordpress Default theme, the width of the left column is 450px wide. If you wanted three columns, that’s 150px per column. If you also wanted 10px of spacing to the left and right of each column, that leaves a width of 130px for the post itself.
You would then need this code in style.css:
.clearcol {clear:both;}
.col {float:left;display:inline;width:130px;padding:0 10px;}
You’ll probably need to play around with these values until you get something that works.
The result for a 3-column Wordpress Default theme can be seen here.
your thoughts
Web Media Daily – July 9, 2009 | Reinventing Yourself...
[...] Organising posts into side-by-side columns in Wordpress… cre8d design blog [...]
wisdom teeth removal
Anyway to have columns in wordpress but only for specific pages. This seems to affect every page and post created.
Dan
Thanks for a great bit of script firstly! I’m using it on my Portfolio page, I’m trying to use it twice on the same page for ‘Web Design’ and then for ‘Photography’, but it doesn’t seem to like it much on the second instance.
http://rowl.es/portfolio/
Thanks for any help!
Dan
Its Ok I sorted it a colleague of mine figured if I put;
$ct = 0;
inside the first line of the second instance that would sort it, and it has!
Thanks again.
Dan
Ronald Poi
You just solved my entire week problem. Thank you very very much!
Matt
Thanks this has been really useful.
Diem
Thanks so much, been looking all over for this…
Question though, I’ve been trying to do this 3 column for my archive section, so right now it works, but was wondering if there was a way to scale my posts just in the archive section so that it fits. Right now as it stands, it is just taking my posts as it appears in the index and placing it into 3 columns.
useruz
I want to use this method in order to divide posts in table. And I changed the code like this:
<?php if ($c && $c%$numcols==0) echo '’; ?>
useruz
I want to use this method in order to divide posts in table. And I changed the code like this:
<?php if ($c && $c%$numcols==0) echo '’; ?>
Is there any mistake in my code?
Olle Eriksson
Thanks! Just what I needed.