What are post-formats? how do we put it to use?

The WordPress team brought a new feature in WordPress 3.1 version, called the post-formats.
What is it? How is it different from a post category or a post tag? why do we need another characteristic to be associated with a post?
Lets try to learn about them in this post.

What is it?

A Post Format is a piece of information you specify about a post, which can be used by the theme to decide how to display it.
If the post’s format is set to “status”,then the theme could decide to just show the post’s content and the date.
In my theme CoffeeTime, I have added support for all of the post-formats that are supported by WordPress.

What are the type of post-formats that WordPress support?

WordPress supports the following post-formats.

• aside
• gallery
• link
• image
• quote
• status
• video
• audio
• chat

These post-formats will be shown on the WordPress’s Add Post / Edit Post section, if the theme that you are using supports them.

Adding support for Post Formats in a WordPress Theme

Themes should include the following code in their functions.php file if they support Post Formats.

add_theme_support( 'post-formats', array( 'aside','image','quote','status','video','audio','chat' ) );

If you are using my theme ‘CoffeeTime’ then you would see the Write Post area to have the following options.

Styling Posts differently according to the post format selected

Once we added the support for post formats, the user can select a post-format for a blog post.
Then the theme has to style the posts differently.
For that, we make sure we add post_class() method to the article tag within the loop.
Something like

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Then we will get something like this for each article.

<article id="post-20" class="post-20 post type-post status-publish format-standard hentry category-uncategorized">

Just like this, we would get format-aside, format-image or format-gallery, depending on the post-format assigned to the post.
Now when we want to style things differently depending upon the post-format, we can add style definitions for these class names in our style.css
In my CoffeeTime theme, I added the code that looks like

.format-aside .titlearea { background:url(images/pf/aside.png) no-repeat left top;}
.format-audio .titlearea { background:url(images/pf/audio.png) no-repeat left top;}
.format-chat .titlearea { background:url(images/pf/chat.png) no-repeat left top;}
.format-standard .titlearea { background:url(images/pf/standard.png) no-repeat left top;}
.format-gallery .titlearea { background:url(images/pf/gallery.png) no-repeat left top;}
.format-image .titlearea { background:url(images/pf/image.png) no-repeat left top;}
.format-link .titlearea { background:url(images/pf/link.png) no-repeat left top;}

This will make sure we display a specific image in the title area of each post depending on the post-format specified for the post. It will look like the following.

Related Links

• Codex Link
• Free Icons by StudioPress