How to make Wordpress listing article in grid style?

[tcnnvnn]

I going to set up a wordpress blog. However I like listing my stuff like this:



I found this TUT however I don't know where to insert

<?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('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php get_footer(); ?>

some more code:

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:

1
.col1, .col2 {float:left; width:49%; }

I like this theme:

http://www.mangoorange.com/resources/i2theme/

Please help me to insert the code.

Here the original article:

http://www.transformationpowertools.com/wordpress/multi-column-wordpress-template

Thanks everybody may help.

tcnnvnn Reviewed by tcnnvnn on 14th Oct 2011. How to make Wordpress listing article in grid style? I going to set up a wordpress blog. However I like listing my stuff like this: http://www.transformationpowertools.com/wordpress/wp-content/uploads/2010/01/grid-style-template-512x375.jpg I found this TUT however I don't know where to insert <?php get_header(); ?> <?php // code to display a number of posts in multi columns top-to-bottom left-to-right Rating: 5

[Apathetic]

index.php, archive.php, search.php,

[tcnnvnn]

Thanks for your experiences. Howerver I'm not a coder so any chances you could help me to edit these files?

[bxflow]

you can always use a theme that does it by default

[Kw3rLn]

Find a good theme and you will not have any problems, there are alot of that kind of themes.

[torrfriend]

search for dione wordpress theme, possibly fit your needs

[tcnnvnn]

search for dione wordpress theme, possibly fit your needs

Thanks! I tried that theme. It seem for video not for article.