in WordPress

How To Separate Post Excerpts In Boxes

In my current Wordpress theme I display the most recent posts on the index page. I don't display all of the post as I think it will be a bit too much on the first page of the site, so I decided to just display the excerpts of the post.

Wordpress Excerpts

A Wordpress excerpt is a summary of the description of the article. The Wordpress default will display the first 55 words of the post, after that you can put a link to read more of the post.


In a previous article I explained how you can increase the default excerpt length. In this theme I have changed the default excerpt length to be 100 words. ## Loop Of All Blog Posts

I have been asked how I do the post lists on my site so in this article I will explain exactly what I do to create this style. First you get the loop of all the posts in your Wordpress blog.

<?php if (have_posts()) : while (have_posts()) : the_post(); 
     <p>Post HTML goes here.</p>
  <?php endwhile; else: ?>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

As each post is contained in it's own box you will need to but all the post data inside a div. Inside this div is going to be a thumbnail image of the post, the post title and a summary of the post. ## Get Blog Post Data

Below are the Wordpress functions we are going to use to get the data in the post. - Title - the_title()

  • Category - the_category(',')
  • Tags - the_tags("");
  • Excerpt - get_the_excerpt();
  • Link - the_permalink()
  • Has Image Tumbnail - has_post_thumbnail()
  • Image Tumbnail - the_post_thumbnail()

The Post HTML

Here is the full HTML for each post. We have wrapped this up in a Div which has a image Div and the content Div.

<div class="post" id="post-<?php the_ID(); ?>">
    <div class="postPic">
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    <div class="postContent">
        <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
        <p><?php _e("IN"); ?> <?php the_category(',') ?></p>
        <p><?php echo get_the_excerpt(); ?></p>

        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more">Read More</a>
        <div class="meta"><?php the_tags(""); ?></div>

The Post Styling

Now time for the styling...the post class is the class that will make the box look. On the hover event of this class I am using a CSS3 transition to change the background colour this is so it will highlight the post the focus is set on. Now we have the image area which we set a background colour on the div so that when the transition changes colour the image will stay highlighted.

.post{float:left;width:95%; margin: 0 0 25px 5px;height:auto;min-height:100px;padding:15px 15px 15px 10px;outline: 2px solid #DDD; background:#FDFDFD;}

-webkit-transition: background 300ms ease-in 300ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 300ms;
    -o-transition: background 300ms ease-in 300ms;
    transition: background 300ms ease-in 300ms;}

.postPic{ width:27%;height:150px;padding:3px;display:block;float:left; background:#FDFDFD; }

.postPic img{width:150px;height:150px;border:1px solid #FFF;padding:3px;display:block;}


.postContent p {line-height:18px;}



.meta{margin:15px 0;}

Give It A Go, Let Me Know What You Think

Subscribe To The Weekly Newsletter

Get weekly updates to your email