How To Create Double Posts Columns On The Homepage

Filed Under (Customization And Themes, How To, Installation) by Wpfeed on 10-06-2009

From time to time you need to change some things from the Wordpress default. One of the easiest hacks to do is creating double posts columns.

all you need is a bit PHP and some Css tweaking, here is the example:

CSS

.row {clear:both;}
.col1 {width:300px;float:left;padding:10px;}
.col2 {width:300px;float:right;padding:10px;}

* change the width of the columns according to what you need.

in your index.php (in the theme folder) look for the posts loop and before that paste this:

<?php $col = 1; ?>

after the loop begins add this:

<?php if ($col == 1) echo “<div class=\”row\”>”; ?>

now inside the loop, replace the loop main DIV with this code:

<div class=”post col<?php echo $col;?>” id=”post-<?php the_ID(); ?>”>

and just before the end replace ENDWHILE with this:

<?php if ($col == 1) echo “</div>”; (($col==1) ? $col=2 : $col=1); endwhile; ?>

THAT’S IT.

here are the sources for this post:

http://netcovered.com/wordpress-posts-in-different-columns/

http://www.cre8d-design.com/blog/2008/03/01/how-to-organize-posts-into-two-side-by-side-columns-in-wordpress/

Blog Widget by LinkWithin
Share this post with others
  • Facebook
  • Twitter
  • Google Bookmarks
  • StumbleUpon
  • Digg
  • del.icio.us
  • Mixx
  • LinkedIn
  • Reddit
  • Technorati
  • email

Comments:

Post a comment

Theme Forest
Revolution Two WordPress Themes
elegant themes
press75.com
wpshow