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: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
<?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">
		<?php 
		if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  			the_post_thumbnail();
		} else { ?>
			<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
		<?php }?>
	</div>
	<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>
	</div>
  </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.

/*Posts*/
.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;}

.post:hover{background:#f5f5f5;
-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{width:70%;margin-left:10px;display:block;float:left;color:#000;}

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

.read_more{clear:both;float:right;background:#4C7895;padding:4px;font-weight:bold;color:#FFF;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:block;margin-top:30px;}

.read_more:hover{text-decoration:none;color:#FFF;}

.meta{margin:15px 0;}

Give It A Go, Let Me Know What You Think

Advertise here 50% Off

Comment