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 »') . '
</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 »'); ?>
</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 »'); ?>
</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 »'); ?>
</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 »'); ?>
</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
