Publishing WordPress posts in two columns
March 20, 2008 – 12:37 pm | by Miriam SchwabWe’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; }
9 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.