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%; }

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 http://www.creativedepart.com/ – 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)

<?php
$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
);
query_posts($args);
//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;
      $counter++;
    endwhile;
    rewind_posts();
    echo '</div>'; //closes the column div
  endfor;
  next_posts_link('&laquo; Older Entries');
  previous_posts_link('Newer Entries &raquo;');
else:
  echo 'no posts';
endif;
wp_reset_query();
?>

minimum css:

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

addendum:
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:
loop-grid.php;
page template;
css styles.