21 | Multi-Column Grid-Style Posts in WordPress
following question comes up regularly in the wordpress support forum: ‘i want to show my posts in three (four, five) columns, how can i do it?’
see the effect here in action: under pages ‘grid of posts’.
EDIT:
as this code can have its challenges, and is not always easy to apply, i would like to point to another approach with the same results:
Playing with columns – stacking posts in a grid.
END of EDIT
here, i am going to present yet another solution: a flexible core structure to allow any number of columns with any number of rows, limited only by screen space, readability and fantasy…
a three column grid category template
the structure (for instance 3 columns, 4 rows, 12 or more posts):
1 5 9
2 6 10
3 7 11
4 8 12
the structure (for instance 3 columns, 4 rows, less than 12 posts, i.e. 7):
1 4 6
2 5 7
3
i’ll begin with a step by step introduction into the concept:
- setting of variables
- query_posts
- calculate rows
- loop 1 – the columns
- the wordpress loop – the rows
- page navigation
1. setting the variables:
$set_number_of_columns = 3; // enter numbers of columns here;
$set_number_of_rows = 3; // enter numbers of rows here
$set_showpost = $set_number_of_columns * $set_number_of_rows ;
2. query_posts:
global $query_string;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts($query_string.'&showposts='.$set_showpost.'&paged='.$paged);
3. calculate rows:
// make adjustment to get three equaly long columns even on last paged page
// get number of posts for this,
$num_of_posts = $wp_query->post_count;
// divide by $set_number_of_columns to get number per column,
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);
// calculates number of rows, i.e. showposts for the following query_posts and get_posts
4. loop 1 – the columns:
<?php for ( $col = 1; $col <= $set_number_of_columns; $col += 1) { ?>
<div class="col<?php echo $col; ?>">
<?php $row = 1;
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged ?>
5. wordpress loop – the rows and posts:
<?php $posts = get_posts($query_string.'&numberposts='.$ppc.'&offset='.$noffset); foreach ($posts as $post) : start_wp(); ?>
<div id="post-<?php the_ID(); ?> class="post row<?php echo $row; ?>">
<?php //output all post related data, i.e. date, title, content/excerpt, postmetadata, tags, etc. // ?>
</div> <!--closing .post div -->
6. page navigation:
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
here is the full code:
<?php get_header(); ?>
<?php
// code to display a number of posts in multi columns top-to-bottom left-to-right
?>
<?php global $query_string; ?>
<?php
$set_number_of_columns = 2; // enter numbers of columns here;
$set_number_of_rows = 4; // enter numbers of rows here
$set_showpost = $set_number_of_columns * $set_number_of_rows ;
//setup query with parameter for paged
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts($query_string.'&showposts='.$set_showpost.'&paged='.$paged);
// get number of posts for this,
$num_of_posts = $wp_query->post_count;
// make adjustment for paged to get three equaly long columns even on last paged page
// divide by $set_number_of_columns to get number per column,
// round up to next integer to make $ppc posts per column variable, or $set_number_of_rows whatever is smaller
$ppc = min(ceil($num_of_posts/$set_number_of_columns),$set_number_of_rows);
// calculates number of rows, i.e. showposts for the following query_posts and get_posts
?>
<?php for ( $col = 1; $col <= $set_number_of_columns; $col += 1) { ?>
<div class="col<?php echo $col;?>">
<?php
$row = 1;
$noffset = ($col -1) * $ppc + ($paged - 1) * $set_showpost ; //calculate offset parameter if paged
$posts = get_posts($query_string.'&numberposts='.$ppc.'&offset='.$noffset);
foreach ($posts as $post) : start_wp(); ?>
<div id="post-<?php the_ID(); ?>" class="post row-<?php echo ($row%2); ?>">
<!-- start of anything to do with post -->
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div class="storycontent">
<?php the_excerpt(__('(more...)')); ?>
</div>
<!-- end of anything to do with post -->
</div> <!-- end #post -->
<?php
$row++;
endforeach; ?>
</div>
<?php } ?>
<?php // close the for-loop // ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php get_footer(); ?>
the naming of the css classes is:
class .col1 for the first column; class .col2 for the second column; and so forth.
same thing for the rows: class .row1 for the posts in first row, on so on.
going with this code is the css:
.col1, .col2 {float:left; width:49%; }
you can see the code in action: under pages ‘grid of posts’.
the effect ia achieved by giving each post a fixed height; and using a bit of javascript trickery.
tagged: 3 column post . blog . columns . grid . grid layout . grid style . magazine style . multi-column . php . portofolio . theme . thumbnail grid . Wordpress . wordpress forum . wordpress loop . wordpress theme
