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.

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

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email