Posts in Columns – A New Twist on an Old Problem

To organize posts into three columns (edit: semantically more correct would be to call it ‘three posts per row’ as this is the way the posts are organized), you first need to generate a column dependant css class for each post; this will be added to the post div within the loop.

The core trick to generate different css classes for posts in the first coliumn, the second column, and the last column:

<?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?>

This line of code needs to be within the loop, just before the post div.

To achieve more or less the same, you could obviously also use a counter variable and the modulus operator, as i have elaborated on in my earlier article ‘More-Than-Zebra style WordPress loop’. However, the above method is simpler and easier to apply within a single line of code.

The second step is to add this as a css class to the post div:

a – assume a theme without the use of ‘post_class()’; the typical opening div would look like:

<div class="post" id="post-<?php the_ID(); ?>">

This is changed into:

<div class="post <?php echo $column; ?>" id="post-<?php the_ID(); ?>">

b – in a theme using the ‘post_class()’, the new code would look like:

<div <?php post_class($column); ?> id="post-<?php the_ID(); ?>">

Third and last step: to tell the browser what to do with the new css classes, add some styles to style.css of the theme:

/* .first, .middle, .last styling of posts on home page for three column */
.first, .middle, .last { width: 32%; float:left; clear:none!important; }
.first { margin-right: 2%; clear:both!important; }
.middle { margin-right: 2%; }

Final details depend on the existing theme.

edit & ps:
if you just want to mark the first post in each row – for instance to add the ‘clear:both;’ and a different margin there – try to work with:
(example for 5 columns)

<div <?php $column = ($wp_query->current_post%5 == 0) ? 'first' : ''; post_class($column); ?> id="post-<?php the_ID(); ?>">

Easy Coding for WordPress: Posts in 3 Columns

Sometimes it is the simple things that are hard to find.

A basic structure to arrange posts into three columns:

<div id="column-wrap">
<?php $count = 0;

while(have_posts()) : the_post(); ?>

<div class="box<?php if( $count%3 == 0 ) { echo '-1'; }; $count++; ?>">

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<!--and other output of the loop -->

</div>

<?php endwhile; ?>
</div><!--end column-wrap-->

The minimal styles needed for the three columns:

.box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
.box { float:left; width: 30%; margin-left: 3%; }

  1. <div id=”column-wrap”>
  2. <?php
  3. $count = 0;
  4. while(have_posts()) : the_post()
  5. ?>
  6. <div class=”box<?php if( $count%3 == 0 ) { echo ‘-1’; }; $count++; ?>“>
  7. <a href=”<?php the_permalink(); ?>“>
  8. <h4><?php the_title(); ?></h4></a>
  9. <!–and other output of the loop –>
  10. </div>
  11. <?php endwhile; ?>
  12. </div><!–end column-wrap–>
  13. —————-
  14. STYLES – EXAMPLE
  15. .box-1 { float:left; clear:left; width: 30%; margin-left: 0; }
  16. .box { float:left; width: 30%; margin-left: 3%; }

Multi-Column Grid-Style Posts in WordPress

RECOMMENDATION:
as this code can have its challenges, and is not always easy to apply, i would like to point to an easier to implement approach with the same results (depending on formatting):
Playing with columns – stacking posts in a grid.
There is also a newer article for creating posts in three columns.

Following question comes up regularly in the wordpress support forum: ‘i want to show my posts in three (four, five) columns, how can i do it?’

see the effect here in action: under pages ‘grid of posts’.

here, i am going  to present yet another solution: a flexible core structure to allow any number of columns with any number of rows, limited only by screen space, readability and fantasy…

a three column grid category template
a three column grid category template

the structure (for instance 3 columns, 4 rows, 12 or more posts):

 
1  5   9
2  6  10
3  7  11
4  8  12

the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):

 
1  4  6
2  5  7
3 

the code is setup step by step:

  1. setting of variables
  2. query_posts
  3. calculate rows
  4. loop 1 – the columns
  5. the wordpress loop – the rows
  6. page navigation

here is the full code:

<?php get_header(); ?>
<?php
// code to display a number of posts in multi columns top-to-bottom left-to-right
?>
<?php global $query_string; ?>
<?php
$set_number_of_columns = 2; // enter numbers of columns here;
$set_number_of_rows = 4; // enter numbers of rows here
$set_showpost = $set_number_of_columns * $set_number_of_rows ;
//setup query with parameter for paged
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts($query_string.'&showposts='.$set_showpost.'&paged='.$paged);
// get number of posts for this,
$num_of_posts = $wp_query->post_count;
// make adjustment for paged to get three equaly long columns even on last paged page
// divide by $set_number_of_columns to get number per column,
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);
// calculates number of rows, i.e. showposts for the following query_posts and get_posts
?>
<?php for ( $col = 1; $col <= $set_number_of_columns; $col += 1) { ?>
<div class="col<?php echo $col;?>">
<?php
$row = 1;
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged
$posts = get_posts($query_string.'&numberposts='.$ppc.'&offset='.$noffset);
foreach ($posts as $post) : start_wp(); ?>
<div id="post-<?php the_ID(); ?>" class="post row-<?php echo ($row%2); ?>">
<!-- start of anything to do with post -->
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
</div>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
<?php
$row++;
endforeach; ?>
</div>
<?php } ?>
<?php // close the for-loop // ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php get_footer(); ?>

the naming of the css classes is:
class .col1 for the first column; class .col2 for the second column; and so forth.
same thing for the rows: class .row1 for the posts in first row, on so on.
going with this code is the css:

.col1, .col2 {float:left; width:49%; }

you can see the code in action: under pages ‘grid of posts’.
the effect ia achieved by giving each post a fixed height; and using a bit of javascript trickery.