How To Create Double Posts Columns On The Homepage

By -

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:


.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; ?>


here are the sources for this post:

WordPress is a full featured Content Management System (CMS). It has incorporated a rich suite of capabilities that have proven to be extremely popular because it allows anyone to create vibrant, dynamic sites without any programming knowledge. Its large range of features, coupled with a clean and easy-to-understand interface make it a fan fave among website novices; 27% of all the websites in existence and 20% of all new ones use this amazing platform.

2 Comments to How To Create Double Posts Columns On The Homepage

Leave a Reply

Your email address will not be published. Required fields are marked *

Human test: *