Adding Separate boxes for wordpress excerpts

In most of the themes the post container lists all the excerpts of the most recent posts in the home page. The following code will help you to break up each post into separate boxes.

Example: Theme Home page Preview

Using css we can make a 10px gap in-between each post, where the background of the page shows through.

In the page index.php we have


<div id=”content”>

<?php while (have_posts()) : the_post(); ?>

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

 <div class=”title-bg”>   <h2 class=”title”>

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a>

 <div class=”entry”>

     <?php the_excerpt(); ?>

     <p class=”links”>

<a href=”<?php the_permalink() ?>” class=”more”>&laquo;&laquo;&nbsp;&nbsp;Read More</a></p>

    </div>   </div>

  <?php endwhile; ?>


I was just copying the index page. Ignore the div tags you don’t want , but the following css code for content and post will help to add a separation between each post.


#content {

float: left;

width: 600px;

border-left: 1px #BBBBBB dashed;



.post {

padding-bottom: 15px;

line-height: 200%;





Here “background-color:#FFFFCC;” gives an yellow background and “margin-top:10px;” gives a gap with the background color mentioned in #content background color.

In this example it is white.

Leave a Reply