Already a few articles have been written on the subject, but hardly any of those are giving real world examples. As we had a bit of time on our hands and we would like to figure out what can be done with the Post Formats that are going to be introduced in the upcoming WordPress version 3.1, we decided to download the latest Release Candidate and take it for a spin.
What are Post Formats?
The Codex gives a clear description on what Post Formats are:
A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.
Basically what it means is that if you enable your theme with these Post Formats, the post class of these Post Formats receive an additional tag. And by using this additional tag in your CSS, you can style the different Posts individually.
How to enable Post Formats in my theme?
To enable Post Formats for your theme, you need to add one line of code to your functions.php file:
|
1
2
|
// This theme supports Post Formats.add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat') ); |
Note that the above line of code adds all available Post Formats. If you only want to make a few of them available in your theme, then you can add only those.
[UPDATE April 7, 2011]
We finally figured out the proper way to add the Post Formats to a Child Theme of Twenty Ten via a tip on VoodooPress. Because Twenty Ten already calls 2 post formats (aside and gallery), to be able to make it work for a Twenty Ten Child Theme you’ll need to bump up the priority. Default priority is 10, so you can suffice by making it 11.
|
1
2
3
4
5
|
// Add Post Formats to a Twenty Ten Child Themeadd_action( 'after_setup_theme', 'childtheme_post_formats', 11 );function childtheme_post_formats(){add_theme_support('post-formats',array('aside','chat','gallery','image','link','quote','status','video','audio'));} |
Something strange we discovered is that if you add this line to the child theme of Twenty Ten it does not have the desired effect. It only would work if added to the main Twenty Ten functions.php. Hopefully by the time 3.1 goes out of beta, it can also be added to child themes!
Once you have added the theme support to your theme, the right column of the Posts Editor shows the list of the available Post Formats for your theme (see thumb on the right).
And as you can see, adding a specific format to your Posts then becomes as easy as clicking the radio button you wish and saving your Post!
But of course, that is only the start, because adding a Post Format to your Post only adds the additional Post Format class to the post class:
[div id="post-x"border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; font-family: inherit; font-style: inherit; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; outline-width: 0px; outline-style: initial; outline-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; vertical-align: baseline; ">format-quote hentry category-uncategorized"]
Styling the Post Formats
As mentioned in the introduction we have been playing around with the Post Formats and made a home page filled with Posts that all have a different Post Format:
As you see in the above example we have styled the Post Formats differently on this homepage.
- the chat Post Format receives a notebook graphic
- the audio Post Format gets a line of music script behind the podcast
- the gallery Post Format shows the first thumbnail of the gallery and we have put a polaroid frame behind it
- the video Post Format shows the video directly, but on a smaller format than full
- the link Post Format shows the link in a color that stands out
- the quote Post Format has received a colored background with a quotes image to the right
- we haven’t been able to figure out what the big difference is between the ‘aside’ and the ‘status’ Post Formats and therefore have styled them with a different colored border with rounded corners
- the image Post Format shows the thumbnail of the featured image
- for the standard Post Format we have used the entire width of the homepage and haven’t given it any additional styling. All Posts with the standard Post Format, but also all Posts without any Post Format will default to this style.
Theme Implementation
Now this only deals with the homepage for which we have created a special loop file in Twenty Ten, aptly called loop-home.php. But there is also another way of doing it as suggested by Dougal Campbell in his article “Smarter Post Formats?“.
Instead of adding all the different Post Formats to your loop.php file and with that creating an absurdly long and cluttered/confusing file, Dougal proposes a marriage between get_template_part() and get_post_format(). That way he makes different template files, such as format-quote.php, that are called as soon as a specific Post Format pops up. Dougal has put it into action on his website Wordpreh and by the look of it, it works quite well.
Another website we found that already has implemented the Post Formats into a theme is Themify with their brand-new Wumblr theme.