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. Wordpress 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

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

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