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:
// 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.
// Add Post Formats to a Twenty Ten Child Theme
add_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" class="post-x post type-post status-publish 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.
15 Responses to Playing with Post Formats of WordPress 3.1
Hi, Just trying to get a little moe exposure for a plugin I wrote to make post formats a lot easier to manage.
WP Post Formats – wordpress.org/extend/plugins/wp-post-formats/
Can check / Uncheck which formats to activate, and write some normal PHP to insert there.
As Post Formats are in the 3.1 release, It will be a dev install for the moment.
Let me know what you think.
Cheers
Ben
Hi Ben, by the look of it your plugin can help people on their way with editing the loop, but styling still needs to be done separately, right?
Could you elaborate a bit on the styling of the post formats?
I am playing with a child theme of twentyten, I have 3.1wp,
and even with just the basic loaded in twenty ten I am not seeing the ‘aside’ when applied to a post.
It keeps it title, changing the bit in the 2010 Css files for Aside does nothing visible.
So would I make a new style like this:
.post format aside {
background: green;
border: 1px solid black;
}
type of thing?
Also, How and where do I tell the post format what to do?
Like where in the code does the title get left off the aside? Is there a way to add other wp functions
to the other formats??
thanks for any insight.
Posting all the actual code and css you used to make your display Post formats page would be very very helpful…
Hi Bobbi,
when we wrote this WordPress Tip, 3.1 was still in beta and we found out that Post Formats only worked when added to the main theme instead of the Child theme. We’re not sure if that has been solved in 3.1, but it should be, shouldn’t it?
If you’re not seeing any post formats in your edit Posts screen and you are using Twenty Ten (or a Child) then we suggest you to scroll to the top and click on “Screen Options”. There you will see “Post Formats” with a checkbox. If you check that box, the standard Post Formats Aside and Gallery appear instantly.
on top of that, you need to edit your CSS. The aside Post Format gets a class as format-aside; therefore your code should become
.format-aside {background: green;border: 1px solid black;}
Thanks for replying!
I do get the drop down in dashboard, but not any styling using my child theme.
I Just tested on parent 2010, and did lose the title which i guess it’s supposed to do.
I will add some styling to the child theme for
.format-aside
and see what happens.
Yes it would be quite a drag if this function doesn’t port over to child from parent.
Thanks again.
I just tested this by adding the .format-aside to the child css and it works!
But I still have the title on the aside.. any idea why that may be?
bobbi, probably because you have left the title in the loop?
That’s the thing with these new Post Formats: a lot of people take styling too literally (only think CSS), but you can also change the format of your Posts to make them look different than standard Posts
Pingback: Makeover Senlin Online
Thanks for the mention on the update there! Glad my tip was able to help you, that same issue was driving me nuts at first as well!
Thanks for stopping by Rev. I find it very strange that it is not better documented in the core functions.php file. And the fact that not a lot of info is found online about it, suggest that not an awful lot of people have started using the Post Formats on Twenty Ten Child Themes (or have tried and given up). Well hopefully people find our posts :)
Ya hopefully we help them! It did take a fair bit of digging and asking to find that info. You would think that would be better documented in twentyten, commented into the functions.php file. A lot of other things are well commented.
Pingback: Twenty Eleven Post Formats – What Are They and Why Should I Care? | WordPress News at WPMU.org
What would be the correct way of disabling a certain post format?
The correct way of disabling a specific post format is by not enabling it. In other words, you would exclude it when adding the theme_support to your functions.php file.
Remember that although the functionality is baked into WordPress, themes don’t necessarily come standard with all post formats enabled. And even if they come with all of them enabled, their functions.php file will list the line add_theme_support…etc… So all you need to do it look up that line and delete the post format you would like to exclude.