How to Add Post Formats in WordPress 3.1 + Free Icons

This first post of wpStyles.org’s official blog is dedicated to the recent release of WordPress 3.1 which included the new Tumblr-inspired feature of post formats. Upgraded the user now have up to eight different types of post to choose between when communicating with his or her readers. However, the new WordPress version only support this feature which subsequently has to be added by theme authors.

The theme of our blog, TumPress Journal which we just released, has built in the post format features. This basically means that when writing a new post you can choose between post formats: Standard, Aside, Image, Link, Quote, Status, Video and Audio depending on what you plan to fill your post with. This way of blogging comes from Tumblr, and prior to the WordPress 3.1 release WooThemes was first to integrate post formats with WordPress with their Turnblog plugin.

Whichever post format you choose, in TumPress Journal, an icon will appear above the post that identifies which format it is. Not only does his bring new dynamic in regards to web design, it also makes blog reading a completely new experience, realizing that information online comes in more forms than simple text.

How to Add Post Formats in WordPress

First you need to make sure the theme supports post formats by adding the code below to the functions.php:

Then you’ll need to add the post formats to the loop in the <em>index.php</em>:

To add different look and feel for each post format you can add files like this. format.php (standard format), format-audio.php (audio format) and so one. We’ve created format.php which defines the style of the post, no matter format:

<div>
>
<div class="posttitle">
<div class="postdate">
<h2><span class="<?php echo get_post_format()?>"> </span></h2>
</div>
<h2><a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"></a></h2>
<div class="postauthor">

 <strong> </strong></div>
</div>
<!-- .posttitle -->
<div class="postmeta">
<div class="postmeta_left">

 ·  · <a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>">Link To Full Post</a></div>
<div class="postmeta_right">
<div class="comment_link">

<a href="<?php comments_link(); ?>"></a></div>
</div>
</div>
</div>

To add different icons to each post format we’ve added the following code to stylesheet.css:

/************************************************
*	Post Format style								*
************************************************/
.link { background: no-repeat url('images/icons.png') 0 -2px; }
.video { background: no-repeat url('images/icons.png') 0 -57px; }
.aside, .status { background: no-repeat url('images/icons.png') 0 -114px; }
.audio { background: no-repeat url('images/icons.png') 0 -169px; }
.image { background: no-repeat url('images/icons.png') 0 -226px; }
.quote { background: no-repeat url('images/icons.png') 0 -281px; }