Playing with columns – stacking posts in a grid

a different approach to ‘grid style’ – stacking the posts in a tightly ordered grid; to get a similar design as in – ideal to use with thumbnails and excerpts:

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

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

(bare minimum code, without explanation, totally flexible and automatic)

$num_cols = 4; // set the number of columns here
//the query section is only neccessary if the code is used in a page template//
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // for pagination
$args = array(
  'posts_per_page' => 16, // optional to overwrite the dashboard setting
  'cat' => 0, // add any other query parameter to this array
  'paged' => $paged
//end of query section
if (have_posts()) :
  for ( $i=1 ; $i <= $num_cols; $i++ ) :
    echo '<div id="col-'.$i.'" class="col">';
    $counter = $num_cols + 1 - $i;
    while (have_posts()) : the_post();
      if( $counter%$num_cols == 0 ) : ?>
        <!-- core post area;
        title, content, thumbnails, postmeta, etc -->
      <?php endif;
    echo '</div>'; //closes the column div
  next_posts_link('&laquo; Older Entries');
  previous_posts_link('Newer Entries &raquo;');
  echo 'no posts';

minimum css:

.col { width:150px; float:left; margin-right:5px; }

this method can be implemented into the Twenty Ten theme, using the new ‘get_template_part()’ function to use custom loops.
for the code see:
page template;
css styles.

Multi-Column Grid-Style Posts in WordPress

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

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(); ?>
// code to display a number of posts in multi columns top-to-bottom left-to-right
<?php global $query_string; ?>
$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;
// 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;?>">
$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 -->
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
endforeach; ?>
<?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>
<?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.