So far in this series I've introduced you to what post formats are, and how to use different templates for different post formats in the loop. In this post I will show you how to set apply different css to parts of a post's content based on the post format.

The examples I will be showing you are quite simple, they just change the background color, but once you understand these basic concepts you will be able to use them to apply different designs to different post formats and really make your theme standout for how it handles media and other specialized content.

Using Post Format Post Classes

Standards-compliant themes use the function post_class() to set the classes for the container surrounding post content. This function adds a class based on the post format. So, for example, if a post has the format 'image' the post will have a class 'format-image'. This makes it very easy to target containers inside the post via CSS without having to change any page templates or writing any specific functions.

To change the background color of the post's content in all image posts you could simply add this css to your theme's style.css:

.format-image .entry-content {
       background-color: red;
}

Sometimes you can not achieve what you want without adding additional classes or changing the layout entirely. The second option is why we use different content parts. I laid out how to use different content parts per post format in my last post in this series.

Once you have a different content part you can make whatever changes you want, for example, maybe in image posts you want to make the featured image a full width container instead of a small, floated element.

Making Different Post Formats Stand-Out in The Blog Index

If you just want to change a the way a post format looks in the blog index, in order to make it stand out better, you can add a filter to add additional classes to post_class() in specific situations. We can use the post_class filter to add specific classes to the post in specific situations, such as if it has the format image and is not the single post view.

function slug_preview_image_class( $classes ) {
    global $post;
    if ( has_post_format( 'image', $post->ID ) && !is_single( $post->ID ) )
        $classes[] = 'preview-image-post';
    return $classes;
}
add_filter( 'post_class', 'slug_preview_image_class' );

This filter allows you to target image posts in the blog index or archive, without affecting how they appear as single posts, by targeting the 'preview-image-post' class.

You may also wish to simply add a preview class to any post with a post format other than the standard format. The filter I just showed you can be modified to do this either by manually adding all post formats the theme supports in an array to has_post_format().

Of course, you may not know which post formats the theme supports, if for example you are adding this function in a plugin, instead of a theme. If so it would be better to get the list of currently registered post-formats using get_theme_support( 'post-formats' ) as you can see in this modified filter function.

function slug_post_format_preview_class( $classes ) {
    global $post;
    $post_formats = get_theme_support( 'post-formats' );
    if ( has_post_format( $post_formats[0], $post->ID ) && !is_single( $post->ID ) )
        $classes[] = 'preview-format';
    return $classes;
}
add_filter( 'post_class', 'slug_post_format_preview_class' );

With this filter in place you can still target individual post formats separately or all of them together. This CSS, along with the filter that ass the 'preview-format' filter changes the background of the post content for every post format to blue, unless it is an image post, in which case the background color will be red.

.preview-format .entry-content {
    background-color: #00F;
}

.preview-format.format-image .entry-content {
       background-color: #F00;
}

There Is More Formatting To Do

This article has given you just a taste of how you can format your different post formats to make them stand out in the loop, or even to customize their look in single post view. As always, I encourage you to experiment with the example code and reference themes that support post formats, such as the theme Socially Awkward from Theme Hybrid.

If you're only reason for not using post formats is because you have so many posts with out a post format set, be sure to see the next post in this series. I'll be covering bulk updating the format of posts.