Align Posts in a Row, aka Posts in Columns

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

31 Responses to Align Posts in a Row, aka Posts in Columns

  • Mike says:

    Hi,
    Thanks for this code !but it’s possible add class for the first and last post per row?
    @+

    • Mac McDonald says:

      This is untested, but it should be close to what you want. Change this:

            echo "<div class='post_class'>\n";  // Start one post
      

      to this:

            $class = 'post_class';
            if ($post_counter % $posts_per_row == 1) {
               $class .= " first_in_row";
            } elseif ($post_counter % $posts_per_row == 0) {
               $class .= " last_in_row";
            }
            echo "<div class='$class'>\n";  // Start one post
      
  • Marshall Swami says:

    hey hi …. i m working on a project and i want to show last 3 post in a row ….. i got the above code …. but i m confused were to use it ….as i m new to it ….plzzz anyone help me

    • Mac McDonald says:

      The code as shown above would need to be changed quite a bit to show the last 3 posts. It is designed to show all posts in rows, not just the last 3.

      The code goes in the template that is used to display the posts.

  • Thanks man , you saved my time.. really great help…

  • Diane says:

    Thankyou for this…Unfortunatly it isn’t making a lot of difference; I wonder if it’s becasue I’m using the Tiny MC Editor; it seems determined to only let me use (the central) half of the page! Just in case you have a minute: http://deardot.com/?page_id=364

  • Diane says:

    Thankyou!
    And to adjust the posts per row, and the widths, do I just insert a number after:
    .post_row {
    Please?
    Diane

    • Mac says:

      To change the posts per row, change this line: $posts_per_row = 5;

      Then set the width here:

      .post_class {
         width: 20%;
      

      The width needs to be 100 divided by posts per row or possibly a bit smaller, depending on other parts of your theme’s design. You may have to experiment with this a bit.

  • Diane says:

    Hello
    Just a bit of clarification about what to insert into what please:
    Was the code at the very top of this page the php code I should insert into line 10, or did you mean the bit further down following the question about thumbnails?
    Then you remind me to remember to adjust posts per row and widths in the styles – am not too sure which bit the styles is. Many thanks

    • Mac says:

      I have inserted a comment in the 16 lines of code I posted for you to show where to insert the code from the first box at the top of the page.

      The styles are in the second small box of code on the page, just under the line that says “Here is some sample CSS”

  • Diane says:

    Hello
    I want to display rows of thumbnail links; I see the codes above – I’m using a 2011 child theme; where should I put the code please; in the style CSS or should I create a new php file?

    • Mac says:

      The code above will need to be modified. It does not show thumbnails at this point.

      Start with this:

      <?php
      /**
      Template Name: Posts In Rows
      */
      
      get_header(); ?>
      
      		<div id="primary">
      			<div id="content" role="main">
      
      				<!-- Insert code from top of page (35 lines) here -->
      
      			</div><!-- #content -->
      		</div><!-- #primary -->
      
      <?php get_footer(); ?>
      

      and paste the PHP code above into line 10 in the middle, inside the content div. Save the file in your child theme’s folder as postsinrows.php.

      Copy the CSS section to the end of your child’s style.css.

      Be sure to adjust the number of posts per row and the width in the styles.

      That should give you a working template to start your modifications.

  • M says:

    YYEEEAAAHHHHH!!!!!!!

    Thnx Big time. This really works great

  • Ratputin says:

    Great tip! Can you tell me how to add the code to pull the posts from an individual category?

    TIA!

  • Yves Edwards says:

    Hey dude, sweet tip, just wondering if there is a way to display another row of posts beneath the one in this code, e.g. 5 posts going across, then another 5 underneath, then maybe another 5 and so on?

  • Holy says:

    How can i use this code serverel times at the same page? I tried and got some problems with divs but the first one was perfect, i only get erros when i try to place this code more than one time at the same page.

    I will really appreciate your help.

    • Mac says:

      I really can’t help with this without seeing the source code and the generated html for multiple uses. Please copy both the php code and the generated html code into pastebins and send me the links using the ‘Contact Me’ page.

  • Meryl says:

    LAST question, promise :)
    Any way to get those posts to display a thumbnail?

    • Mac says:

      That can be a little more complicated, depending on your theme and the rest of your code. At its simplest, just insert this:

      if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail();
      } 
      

      just ahead of the_excerpt().

  • Meryl says:

    Thanks that's perfect! :)

  • Meryl says:

    Thanks, this was brilliantly helpful to a complete php newbie!
    On question tho – how do I make those post headings clickable links?

    • Mac says:

      The line that outputs the title should be something like this, depending on your theme:

      <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

  • Jam says:

    Sorry, but which file should we add the php code to? I’m using WP 3+. I realise it may be different for different themes, but if I were using Twenty Ten theme, which file would I edit?

    • Mac says:

      In TwentyTen, the file to modify is loop.php. Because of the way multiple uses of the Loop are combined in one file, it is not quite as straight-forward as some of the older themes.

      Lines 2 – 10 above, wrapped in php tags, should go in at line 21, just below the opening comments.

      Lines 14 – 19, in php tags, should go just after the ‘while (have_posts())’ line at line 57.

      Lines 26 – 27 should go after the endwhile; at line 173.

      Again, watch your php opening and closing tags.

  • Emily says:

    Thanks for the tip, I’ve been searching for about 2 hours trying to work out how to do this! Your code works brilliantly!

    Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>