Publishing WordPress posts in two columns
March 20, 2008 – 12:37 pm | byWe’re currently building a site on Adii’s Premium Gazette WordPress theme (this is an affiliate link). In my opinion, it’s an awesome theme particularly because of the design. However, we installed it on the client’s server of choice, and the posts on the homepage just wouldn’t update. We tested it out on different servers, as well as on the client’s server without any plugins or changes, and it worked on other servers but would not cooperate on the client’s server.
The home page of this WordPress theme has two columns of posts. This is a really handy layout, but we realized that the code being used to create this layout was causing all the problems. So we needed to find another solution.
cre8d 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 column or the second column. Basically, the code is saying the following:
Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.
The code calls styles from your style sheet that tell the left column to float left, and the right column to float right.
cre8d’s demo page for this technique:
We also needed to exclude two categories from appearing on the homepage, so here’s a simplified version of the final code we used to replace Adii’s code in his default.php file:
<div class="box"><?php query_posts('showposts=4'); ?><?php $hol = 1; ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if (in_category('3')) continue; ?>
<?php if (in_category('4')) continue; ?>
<?php if ($hol == 1) echo "<div class=\"row\">"; ?>
<div class="post hol<?php echo $hol;?>" id="post-<?
php the_ID(); ?>">
<?php if ( get_post_meta($post->ID, 'thumb', true) )
{ ?> <!-- DISPLAYS THE IMAGE URL SPECIFIED
IN THE CUSTOM FIELD -->
<img src="<?php echo get_post_meta($post->ID, "thumb",
$single = true); ?>" alt="" />
<?php } else { ?> <!-- DISPLAY THE DEFAULT IMAGE, IF CUSTOM
FIELD HAS NOT BEEN COMPLETED -->
<img src="<?php bloginfo('template_directory'); ?>
/images/no-img-thumb.jpg" alt="" />
<?php } ?>
<h2><a title="Permanent Link to <?php the_title(); ?>"
href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h2><p><?php the_excerpt(); ?></p> <?php if ($hol == 1) echo "</div>"; (($hol==1) ? $hol=2 : $hol=1); ?> </div><!--/post--> <?php endwhile; ?> <?php endif; ?>
The following styles need to be added to your style sheet so that the columns float left and right:
.row { clear: both; }
.hol1 { width: 200px; float: left; padding: 0 10px; }
.hol2 { width: 200px; float: right; padding: 0 10px; }
![[del.icio.us]](http://images.del.icio.us/static/img/delicious.small.gif){kind=small}
23 Responses to “Publishing WordPress posts in two columns”
By Robin on Mar 20, 2008 | Reply
Hi Miriam, thanks for the tips, been trying to figure this out for a while. Anyway, you might not notice, Copyright Statement in your feed footer is still 2007. Cheers!
By Ryan on Mar 20, 2008 | Reply
Miriam,
I’ve been trying to figure out this works and don’t quite follow. What does the following do exactly?
(($hol==1) ? $hol=2 : $hol=1);and should the following:
.col1 { width: 200px; float: left; padding: 0 10px; }.col2 { width: 200px; float: right; padding: 0 10px; }
perhaps be:
.hol1 { width: 200px; float: left; padding: 0 10px; }.hol2 { width: 200px; float: right; padding: 0 10px; }
or maybe I’m missing something?
By Miriam Schwab on Mar 20, 2008 | Reply
@Robin – Glad this tip will help you out. Thanks for your help in pointing out my outdated copyright in the feed footer. I would never have noticed.
@Ryan – Thanks for pointing out the mistake. I’ve fixed the css to say hol instead of col, which was the mistake.
As for that line of php that you were wondering about, I have no idea what it does, but don’t you think that maybe it is the statement for the question mentioned in the post above:
Are we in the first column?
Yes: Move to the second column.
No: Move to the first column.
By Ryan on Mar 21, 2008 | Reply
Yes, that is probably what it does. I don’t understand the syntax though. I think the ?’s and :’s are some sort of PHP shorthand.
By Ptah Dunbar on Mar 21, 2008 | Reply
Hey Miriam, thanks for writing about this! I was trying to figure out a way to accomplish this technique, thanks!
By Ryan on Mar 21, 2008 | Reply
Hi Miriam,
Is there any difference between the technique above and your old “Using PHP to alternate background colours for comments or posts in WordPress” post?
The above technique seems to be providing a different CSS class to alternating blocks which is exactly what your other post explains how to do too. Same technique, same execution, different styling (via CSS).
Both useful things to post about, I’m just wanting to check I’m not missing something obviously different here.
By Miriam Schwab on Mar 21, 2008 | Reply
@Ptah – glad to help!
@Ryan – that’s a good point. They both seem to do the same thing. The alternating comments and post method could probably be used to place posts in two columns too. I think that the main difference here that enables the two columns to appear properly is the code that tells it to add a line break at a certain point so that the next row begins. The alternating posts and comments doesn’t do that because the posts and comments appear one after the other in a vertical column. What do you think?
By Ryan on Mar 21, 2008 | Reply
Line breaks? No, there aren’t any in your code above.
The CSS is applying a width and alternates floating the blocks left and right to create the column effect.
By John on Apr 8, 2008 | Reply
Wow, it will be good. I think wordpress is going to be the biggest CMS, not only for blogs.
By dockside on Oct 12, 2008 | Reply
Help please, i want to do this mod for my blog, but only for older post not for recents (i want these to remain full posts)
How can i do this?
By kevin on Nov 22, 2008 | Reply
This works great in firefox, but in IE7 it alternates the left and right so that they are spaced….. Any way to fix this?
Thanks
By loveandhearts.com on Feb 13, 2009 | Reply
please make a plugin out of this code I want to use it. thank you.
By Janice @ Big List of Giveaways on Mar 31, 2009 | Reply
Is it possible to do this without having to set a specific category for posts in each column? ie: display top 10 posts but divide them equally between the 2 columns?
By lad on Jun 16, 2009 | Reply
This code WILL destroy your theme. My advise is to leave it.
By Ryan on Jun 18, 2009 | Reply
@lad – How on earth can this code destroy your theme? It’s just a basic loop with some conditionals in there.
By richardtov on Jul 19, 2009 | Reply
I done this, for my blog works great, but i want to display the thumbnail 120×120 with every post, i using this desing and code to display a “miniblog” on a sidebar. ijust need help to display the thumb help please.
thanks for any help.
By richardtov on Jul 19, 2009 | Reply
lol just ignore my other comment, hahaha
By Sugicloud on Nov 28, 2009 | Reply
Could you please help me give me the code if I want to change it into 3 column rather than 2?
I thinks it’s about this column right?
(($hol==1) ? $hol=2 : $hol=1); ?>
Thanks
By Joe on Dec 6, 2009 | Reply
I got this working on my index page fine. Im wondering what the differences would be to convert this code into an archives page…
By chris on Dec 10, 2009 | Reply
<?php query_posts(’showposts=4′); ?>
this code disables “page_id=” … remove it, and it will work again.
cheers
By Joe on Dec 11, 2009 | Reply
is that directed at me?
By Joe on Dec 12, 2009 | Reply
also wondering how you would get 3 columns instead of two…
By Rajesh on Jan 5, 2010 | Reply
Its not working…… bakws