Support » Themes and Templates » Posts in three columns

  • I want to have three columns instead of two.

    What do I change?

    <table cellpadding="10" cellspacing="10" border="0">
        <?php $column = 1; ?>
        <?php // The LOOP. Do this for all posts:
        while (have_posts()) : the_post(); $postcount++; ?> 
    
            <?php if ($column == 1) echo "<tr>"; ?>
    
            <td class="column<?php echo $col;?>" style="vertical-align: top">
    
    			<div class="post" id="post-<?php the_ID(); ?>">
    
    				<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    
    				<div class="descr"><?php the_time('l, F jS Y, G:i a T') ?></div>
    
    	<div class="entry">
    
                          <?php the_content('Read the rest of this entry &raquo;'); ?>
    
    				</div>
    
    			</div>
    
            </td>
    
            <?php if ($column == 2) echo "</tr>"; (($column==1) ? $column=2 : $column=1); ?>
    
        <?php // END of the LOOP
        endwhile; ?>
    </table>

    Also I want the post to go down than to the side.

    e.g.

    1 2
    3 4
    5 6

    I want:

    1 4
    2 5
    3 6

Viewing 15 replies - 1 through 15 (of 18 total)
  • Something like this should work for you:

    <table cellpadding="10" cellspacing="10" border="0">
    <?php
    $col = $row = 0;
    $rows_per_column = 3;
    $rows = array();
    while (have_posts()) : the_post();
      if($row >= $rows_per_column){
    	$row = 0;
    	$col++;
      }
      $rows[$row++] .= '
      <td class="column' . $col . '" style="vertical-align: top">
      <div class="post" id="post-' . get_the_id() . '">
    	<h1><a href="' . get_permalink() . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a></h1>
    	<div class="descr">' . get_the_time('l, F jS Y, G:i a T') . '</div>
    	<div class="entry">
    	  ' . get_the_content('Read the rest of this entry &raquo;') . '
    	</div>
      </div>
      <td>';
    endwhile;
    echo '<tr>' . implode('</tr><tr>', $rows) . '</tr>';
    ?>
    </table>

    Hi kz,

    Thanks for the reply.

    I just need two changes.

    1) I don’t want the posts to go down instead just sideways.

    e.g.

    1 2 3
    4 5 6
    etc

    Sorry about that, it’s because I changed the layout.

    2) The thumbnails isn’t showing. I use this plugin: Thumbnail for Excerpts

    <table cellpadding="10" cellspacing="10" border="0">
    <?php
    $col = 0;
    $cols_per_row = 3;
    while (have_posts()) : the_post();
      if($col == 0) echo '<tr>';
      ?>
      <td class="column'<?php echo $col; ?>" style="vertical-align: top">
      <div class="post" id="post-'<?php the_ID(); ?>'">
    	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
    	<div class="entry">
    	  <?php the_content('Read the rest of this entry &raquo;'); ?>
    	</div>
      </div>
      <td>
      <?php
      if($col++ >= $cols_per_row){
    	$col = 0;
    	echo '</tr>';
      }
    endwhile;
    ?>
    </table>

    Thanks kz,

    When I added the code, there was 4 columns

    But I changed it from:

    <?php
    $col = 0;
    $cols_per_row = 3;
    while (have_posts()) : the_post();

    to

    <?php
    $col = 0;
    $cols_per_row = 2;
    while (have_posts()) : the_post();

    And it works.

    Thank you very much.

    If possible,

    How do you remove the gap between the posts.

    This is an example I found

    <?php
    $col = 0;
    $col_count = 3;
    $cols = array();
    while (have_posts()) : the_post();
      if($col >= $col_count) $col = 0;
      ob_start();
      ?>
      <div class="post" id="post-'<?php the_ID(); ?>'">
    	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
    	<div class="entry">
    	  <?php the_content('Read the rest of this entry &raquo;'); ?>
    	</div>
      </div>
      <?php
      $output = ob_get_contents();
      ob_end_clean();
      $cols[$col++] .= $output;
    endwhile;
    ?>
    <div class="columns">
    <?php
    foreach($cols as $key => $col)
      echo '<div class="column column' . $key . '">' . $col . '</div>';
    ?>
    </div>

    style.css

    .columns{
    overflow:hidden;
    zoom:1 /* ie6 */
    }
    .columns .column{
    float:left;
    width:33%;
    }

    Thank you so much for this post! Really helped me alot!
    I modified it and used 5 coloumns instead though

    <?php
    $col = 0;
    $cols_per_row = 4;
    while (have_posts()) : the_post();
    if($col == 0) echo ‘<tr>’;
    ?>

    works fine!

    I just wonder if there’s a way to insert a line that would sit under each group of 5 posts. To seperate the rows from each other?

    Also, how can I change the width of the posts?
    (update:just fixed this one myself)

    One last thing, how can I limit the number of posts on the main page, index page?

    Thank you so much for great support feedback!
    H

    I sorted the number of posts out as well! The only question left is how to create a line that would sit between the rows of posts. I’ve got 5 on each row and under those I’d like a line to separate them from the ones beneath.

    Thank you all!
    H

    Wonder if you could get a post to set in a specific column by catagory or author?

    I mean getting all post within catagory a to be placed in column 1 and all posts in catagory b in column 2 ect. ect..

    How would you get this version of the code to list the posts down the columns rather than across? like the first tabled version?

    <?php
    $col = 0;
    $col_count = 3;
    $cols = array();
    while (have_posts()) : the_post();
      if($col >= $col_count) $col = 0;
      ob_start();
      ?>
      <div class="post" id="post-'<?php the_ID(); ?>'">
    	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
    	<div class="entry">
    	  <?php the_content('Read the rest of this entry &raquo;'); ?>
    	</div>
      </div>
      <?php
      $output = ob_get_contents();
      ob_end_clean();
      $cols[$col++] .= $output;
    endwhile;
    ?>
    <div class="columns">
    <?php
    foreach($cols as $key => $col)
      echo '<div class="column column' . $key . '">' . $col . '</div>';
    ?>
    </div>

    this hould work and display three columns, posts going down the columns:
    (different approach than your example)

    <?php $count = 1;
    $col_count = 3;
    $num_of_posts = $wp_query->post_count;
    $post_per_column = ceil($num_of_posts / $col_count); ?>
    <div id="col1">
    <?php while (have_posts()) : the_post(); ?>
    
      <div class="post" id="post-<?php the_ID(); ?>">
    	<h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
    	<div class="descr"><?php the_time('l, F jS Y, G:i a T'); ?></div>
    	<div class="entry">
    	  <?php the_content('Read the rest of this entry &raquo;'); ?>
    	</div>
      </div>
    
      <?php if($count == $post_per_column) { echo '</div><div id="col2">'; }
      if($count == 2*$post_per_column) { echo '</div><div id="col3">'; }
      $count++;
      endwhile;
    ?>
    </div><!--end #col3 -->

    hey thanks!! that works but the posts still go across the columns rather than down

    forgot to give you the essential css styles:

    #col1, #col2, #col3 { float:left; width:30%; margin-right:10px;  }
    #col1 { clear:left; }
    #col3 {margin-right: 0px; }

    you may have to play with width and margin values to get it looking how you want it.

    3 times width plus 2 times margin-right has to be less than the available space.

    Thanks again! Hey thats working great! many thanks

    Greetings Guys, @kz, @alchymyth

    Have been going round in circles, before searching and coming across this post, really happy to find this post.

    I’m looking at something similar [ Posts in Multiple Columns ], however, I just want to display three posts from one category, under a slideshow, as thus:

    | SlideShow Here |
    [4 Posts from same category, e.g. Featured]

    |Post 1 || Post 2 || Post 3 |
    [3 Posts Randomized from another category, e.g. Our Articles]

    Looking forward to some positive learning tips.

    Rgds
    Q

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Posts in three columns’ is closed to new replies.