Publishing WordPress posts in two columns
We’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; }
Category: Code Snippets
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!
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?
@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.
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.
Hey Miriam, thanks for writing about this! I was trying to figure out a way to accomplish this technique, thanks!
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.
@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?
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.
Wow, it will be good. I think wordpress is going to be the biggest CMS, not only for blogs.
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?
replace <?php the_excerpt ?> with <?php the_content ?>
oops,..wrong comment, sry
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
please make a plugin out of this code I want to use it. thank you.
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?
This code WILL destroy your theme. My advise is to leave it.
@lad – How on earth can this code destroy your theme? It’s just a basic loop with some conditionals in there.
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.
lol just ignore my other comment, hahaha
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
I got this working on my index page fine. Im wondering what the differences would be to convert this code into an archives page…
<?php query_posts(‘showposts=4′); ?>
this code disables “page_id=” … remove it, and it will work again.
cheers
is that directed at me?
also wondering how you would get 3 columns instead of two…
Its not working…… bakws
Hi Miriam..=)
Thank you so much the post. I’ve learnt a lot.
But, can you help me please?
How to make subscription form show side by side with related post? just like you do on the above post…please…long time i have searching for this problem..wish you can really help me.=)
thank you!
Hi, great code, what would be the line to add to include a featured image thumbnail from wp3+ ?
It’s possible split post in 3 columns?
Thanks
Hello i was looking for that exact layout for my wordpress blog it is a magazine blog so this kind of post layout would be great. Im new to blogging so im not sure exactly how to get this post layout to work. And is this post layout only available for default theme or certain themes?
Been working on this all night for a category archive page. Been really struggling and can only get one post to show. Any idea what might be blocking the rest of the posts showing?
Thanks
Hi there, i have already use you code to adding 2 colum on my site, but i get error on line 36
<div class=”post hol<?php echo $hol;?>” id=”post-<?
php the_ID(); ?>”>
please help thanks