Using WordPress Post Formats to Their Fullest

Post Formats are a really cool feature introduced in WordPress 3.1 that give you the ability to choose the format the post will be outputted in. These “formats” typically refer to the layout of the post content as displayed by the theme on the front end. So, by using Post Formats, you compile a layout that is displayed for all “video” posts, and then a completely different layout for all “image” posts.
Here on WP Roots, for example, there are three post formats:

• Standard – this is used for all regular posts
• Video – this is used for all posts that feature a video
• Link – this is used for all freebies that feature a download

Each of these formats has a predefined style (set by the theme developer) that is automatically applied to the post on the front end.
What I want to show you in this tutorial is how we developers (this will get pretty technical, so beware if you’re not a developer) can utilize post formats to greatly improve our WordPress themes, both in terms of flexibility and end user experience.

1. Enable Post Formats

In order to use post formats, we first have to add support for them to our theme.

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

This will add support for post formats to your theme, and they will be available on the post editor looking like this:

Now, it’s important to know a few things about post formats. First is that the list above is all of the supported formats. Simply include the formats you wish to use, and leave out any that you don’t. WordPress does not allow you to add additional post formats. Second, each post format name is nothing more than a label: just because you choose “Video” as your post format does not intrinsically format the post for a video, or, in fact, change anything about the post. But it does give us the option to alter the layout of the post. You could enable post formats on your theme right now, then go give a post the “Link” format without seeing any difference. But don’t worry, I’m going to explain fully how to make use of the post formats below

Controlling the Post Layout Based on Format

We have enabled the post formats, but, as said above, that doesn’t really get us very far, so now we’re going to look into how to utilize the formats to actually control our layouts.
There are several tools that we will use. The first is purely for CSS (and jQuery if you want) and will control the post styling based off of class names given to the post based off its format. This will be using the post_class() function to add additional CSS class names to the post wrapper.
The second will be a series of PHP functions that we can use to check whether a post has a particular format, and then control the layout based on whether the function returns true or not.

Using post_class() for Styling Post Formats with CSS

There is a huge amount of formatting control you can have with nothing but a little extra CSS. If you don’t, you should absolutely be using the post_class() function to add class names to your posts. You wil also have to use it if you want to take advantage of one of the great features of post formats.
When a post format is selected, an additional format-{format name} class will be added through the post_class(). So, if you have chosen the chat format for your post, there will be a format-chat class added to your post wrapper. This class can then be used in the CSS to restyle particular elements, such as changing the background or text color, or adjust the margins or floats of certain objects.
The available class names are:

• format-asides
• format-chat
• format-gallery
• format-image
• format-link
• format-quote
• format-status
• format-video
• format-audio

Though simple, the following example should better clarify how you can use this.
One post has the chat format selected and one has the gallery format selected. In the CSS we decide to give each of them a different text color like so:

.format-chat { color: #333; }
.format-gallery { color: #000; }

Obviously you can go much, much further and beyond than this, but it should make the point clear.

Control Post Output Based on Format

Above, I’ve just shown you how to alter the styles of particular formats, but this only gets you so far. With post formats we can also completely control what gets outputted to the screen for each format, not just how that output is styled.
Using has_post_format() we can directly control the exact HTML that gets displayed for certain formats. For example, let’s say that we have standard posts and video posts. Whenever we publish a video post, we also want to include some extra meta information, such as when the video was shot, who took it, the location, etc. By using the has_post_format() function to first check whether the post has the video format, we can do this with ease.

if ( has_post_format( 'video' ) ) {
    // display extra video meta here
}

If we were using all of the formats and wanted to display additional information (limited to each format), we could do so like this:

if (has_post_format('aside')) {
     //display aside post
} elseif (has_post_format('chat')) {
     //display chat post
} elseif (has_post_format('gallery')) {
     //display gallery post
} elseif (has_post_format('image')) {
     //display image post
} elseif (has_post_format('link')) {
     //display link post
} elseif (has_post_format('quote')) {
     //display quote post
} elseif (has_post_format('status')) {
     //display status post
} elseif (has_post_format('video')) {
     //display video post
} else {
     //display standard post
}

Now, something to realize is that doing a huge number of IF and ELSE IF checks is extremely inefficient. If you are only using one or two post formats, doing it like this is not a big deal, but please, please, please do not do this if you are using more than two formats. I really like the method Ryan Taylor gave in his post at Net Magazine.
Ryan uses the get_template_part() function to pull in the necessary template code based off of what format the post has. The code is simple and very elegant:

if (have_posts()) :
     while (have_posts()) : the_post();
          if(!get_post_format()) {
               get_template_part('format', 'standard');
          } else {
               get_template_part('format', get_post_format());
          }
        endwhile;
endif;

The first thing that happens here is we check to see if the post has any format assigned to it at all using get_post_format(), which checks the post format status of the current post. If this check return FALSE, we know that we are displayed a standard post, and so we include the standard post template part. If the function does NOT return FALSE, we grab the template part that matches the selected post format.
So, with the code above, if we had a post that had the video format selected, we would need to include a file in our theme directory name format-video.php, and for the standard post format, we would need a file called format-standard.php. Then, inside of these files, we would place all of our WP functions to display our post information, such as the_content(), the_title(), etc. And because each format-{name}.php corresponds only to its matching format, we can set them up exactly as we want.
Using this method, we’re able to leave our template files much cleaner and more simplified, while still maintaining a great level of control over our output.
Note, the examples I’ve provided above are all slanted towards use on the single.php, but they are just as applicable to any WordPress loop, whether on the archive or index page.

Going Just a Little Further

With the information I’ve given above, you should now have the knowledge to drastically improve not only your theme’s output and display options, but also the experience that your users gain from using your very flexible theme. Thank you Post Formats.
Now, I’d like to show you two more tools that we have available to us with Post Formats.
The first, and this is really cool, is that WordPress creates archives of our post formats. So, for example, if you have 20 posts filed in different categories all with the video format, you can easily view an archive all those posts set as “video”, even though they’re in different categories. WordPress gives as the get_post_format_link() function for this very purpose.

$format_link = get_post_format_link($format);
echo '<a href="' . $format_link . '">View ' . $format . ' Archive</a>';

This will display a link to the format archive in the format of “View {format name} Archive”.
The next cool trick that we can use is set_post_format(). This is a function that lets us manually apply a format to any post we wish, based on its ID number. This function is particular useful for developers that wish to give their users a front end submission form. What you could do is provide a drop down of the available formats that users can submit their post as, then use set_post_format() when processing the data.
A post can be given a format like this:

set_post_format($post->ID, 'video');

That’s it! I hope you have found this useful, and I really hope that you make the leap (if you haven’t already) and begin using post formats in your themes.
[author id="pippin"]