Mac's WordPress Tips

If you want to have several posts in a row across the page, you can use code similar to this. This code is an example.  You will need to customize it to your theme.

The important things to note are:

• the use of $post_counter to create the divs for each row
• the creation of a div with class=”post_class” to contain each post
• the use of CSS to set the width of post_row and post_class

You will need to add the CSS to float the posts left, set the width, and probably set some margins.  There is some sample CSS following the code. 

<?php
// Show a selected number of posts per row
$posts_per_row = 5;
$posts_per_page = 20;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
   'posts_per_page' => $posts_per_page,
   'paged' => $paged,
);
query_posts($args);
if (have_posts()) {
   while (have_posts()) {
      the_post();
      if ((++$post_counter % $posts_per_row) == 1  || $posts_per_row == 1) {
         if ($post_counter > 1) {
            echo "</div><!-- End of post_row -->\n";  // End previous row
         }
         echo "<div class='post_row'>\n";  // Start a new row
      }
      echo "<div class='post_class'>\n";  // Start one post
         // Output post data here
         echo '<h2>';the_title();echo '</h2>';
         the_excerpt();
      echo "</div><!-- End of post_class -->\n";  // End of post
   } ?>
   </div><!-- End of post_row -->
   <div class='clear'></div>
   <div>
      <div><?php next_posts_link('&laquo; Older Entries') ?></div>
      <div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
   </div>
<?php } else {
   // Code for no posts found
}
?>

Here is some sample CSS.  Be sure to set the width consistent with the number of posts per row.

.post_row {
   width: 100%;
   clear: both;
}
.post_class {
   width: 20%;
   float: left;
   overflow: hidden;
   margin: 2px;
}