Posts in three columns

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