One popular design element within media, such as magazines, is to vary styles and colors from one article or page to another. If a page has multiple articles, they’re often shown with different fonts, layouts, or callouts to make them have a different look. This makes the page more interesting throughout the magazine. Of course, these design elements work great on the screen too.
In order to give your WordPress site variety in its look, Automattic has added post formats. This allows you to have a different look based on the type of post it is. It also gives your website a few more features and abilities. For example, you could post just a quick quote or a status, which gives your site the ability to micro-blog while still maintaining your standard blog style.
What Are Post Formats?
Post formats are meta information that your theme can use to customize the look or style of a post. They are a feature that can be built in or added to your theme. If your theme supports them, you’ll find these interesting set of options when you create a new post. On the right side of the screen you’ll see a box labeled Format.
It includes several choices such as Standard, Image, and Quote. These options create some different styles than your standard everyday post. Let’s look at each one in look at how to use them.
There are nine post formats to choose from:
- Standard – no post format is specified. The content-type will be handled within the content itself.
- Aside – a short note update that doesn’t have a title.
- Image – a single image within the post. You can use the first <img /> tag in the content as the image. You can also use a URL.
- Video – can be a single video or a video playlist. You can use the first <video /> tag or object/embed within the content, or you can use a URL.
- Quote – a quotation formatted as a block-quote, or content with the author’s name as the title.
- Link – a hyperlink to another website. You can use the first <a href=””> tag in the content as the link. You can also use a URL.
- Gallery – an image or photo gallery. Usually used with a gallery shortcode.
- Status – a status update.
- Audio – a single audio file or a complete audio playlist.
- Chat – a conversation in transcript format.
Why Use a Post Format
Using a post format doesn’t change the content, so why use them? You can already display a gallery, a video, an image, and an audio player. So why would you need to use a post format? They set your various types of content apart from each other. This gives your posts a little more style than the standard everyday post.
For example, all audio could appear with a certain color background and an icon of a speaker. Your visitors will know at a glance that it’s an audio file. If that’s what they’re looking for, they’ll find it more easily and they’ll appreciate you for it.
The formatting of the post changes, along with the title font and style, the comments and categories info location, background behind that particular post, and the content’s positioning on the screen. It keeps your site from looking the same from one post to another, giving it some pizazz.
They give you much better customization over how your content looks. It makes short form content stand out. It makes micro-blogging look great. Without post formats every post would look the same with only the content itself being different.
Adding Post Formats to Your Theme
Not every theme supports them out of the box, but they can be added using just a few lines of code. Here’s a look at the code from the WordPress Codex.
First, add the add_theme_support() function in the functions.php file. You can choose which post formats you want your theme to support by choosing what to include. The array of formats would look like this:
[php] add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’ ) ); [/php]You can use the after_setup_theme hook and place it before the init hook.
The next thing to do is add the post type support. You do this by adding add_post_type_support() in the functions.php file. The code would look like this:
[php] // add post-formats to post_type ‘page’add_post_type_support( ‘page’, ‘post-formats’ );// add post-formats to post_type ‘my_custom_post_type’add_post_type_support( ‘my_custom_post_type’, ‘post-formats’ ); [/php]Another option is to add ‘post-formats’ in ‘supports’ parameter array in the function register_post_type(). The code looks like this:
[php] $args = array( … ‘supports’ => array(‘title’, ‘editor’, ‘author’, ‘post-formats’)); register_post_type(‘book’, $args); [/php]In order to use the formats use get_post_format() to check the format for the post.
Another option is to use the has_post_format() conditional tag. The code looks like this:
[php] if ( has_post_format( ‘video’ )) { echo ‘this is the video format’;} [/php]If you want to add dynamic styling classes, you can also use styling rules in the post_class() function in the wrapper code around the post.
For example, adding this to your style sheet will hide the post titles:
[css] .format-status .post-title {display:none; } [/css]Tips for Styling
If the formats are built in to your theme, they are most likely styled specifically for that theme in order to match its look and feel. You can create your own styles or modify the existing styles. Here are some things to keep in mind:
- Use formats so your post will be easily recognized as a specific type.
- Aside, link, and status formats – display them without title or author information. Keep them simple and short.
- Aside should contain a paragraph or two. Use the_permalink() to allow comments.
- Link should contain a sentence with a link. Use the_permalink() to allow comments.
- Status should not include the_permalink() so the post would not allow comments.
- Image, Audio, and Video should contain a single image, audio, or video with or without a caption/text to go along with it. Display content with plugins or standard Embeds.
- Quote – post a simple quote from a person with no extra information. If you want to display the quoted person’s name as the byline, you can put their name in the title of the post, style the post to display the_content() by itself but restyled as a blockquote, and then use the_title().
- Chat – use styling to display the content with a monospaced font inside a gray background.
For child themes, call add_theme_support() later than the parent theme. The code would look like this:
[php] add_action( ‘after_setup_theme’, ‘childtheme_formats’, 11 );function childtheme_formats(){ add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’, ‘link’ ) );} [/php]Don’t forget to add get_post_format() to the search, archives, and single-post views.
For more information and to get the source code, see the WordPress Codex article titled Post Formats.
CSS
You can edit the styles within the Stylesheet. Here you can adjust colors, fonts, etc.
How to Use Post Formats
To use them, it doesn’t matter if you create the content first or select the post format first. Simply create your content as normal and select the post format from the list. You’ll see the visual editor formatting change to match the post format that you’ve chosen.
Most work the same, so I’ll just show a few examples. I’m using Twenty Thirteen, which has the formats and styles built in.
Audio Format
In this example, I’ve chosen Audio and uploaded an MP3.
When you select the post format in the visual editor, the editor itself will change to show the format.
Audio Without Post Format
This one does have the audio player, but everything else looks just like every other post that uses the standard post format. There’s nothing to set it apart.
Audio With Post Format
The audio post format sets the post in a different color and adds the speaker icon. It also uses a different layout for the date, category, title, and content. My readers will easily recognize every audio post that I create because they will look for this style.
Status Post Format
In this example, I’ve written a quick status update.
Status Post Without Format
Here’s the post using Standard format. You can see the title is the most prominent part of the post. Since the content is short it just gets lost on the page. If it wasn’t for the huge title this post could almost be invisible on the homepage.
Status Post With Format
Here’s the post with the Status format applied. The first things to notice is the obnoxious title that I wrote is removed, the text in the post is larger, and the background color is different. The font is placed in italics to make it stand out even more, the date now has the word Status and there’s a little dash in front of the first word in the post. There’s also a small vertical dotted line that goes through the dash from the top to the bottom of the post.
Viewing All Posts in the Editor
When you select All Posts from the dashboard, the list will show the icon of the post-types. You can select the icon to see all posts of that post-type. This helps in editing because you can filter and see only the post formats you’re looking for.
Comparisons
Here are what they posts look like on the home page with and without the post formats.
Homepage Without Post Types
Every post has the same format. The same fonts, same background, same title, same everything but the content. Nothing really stands out except for the images. The problem is not everything has an image and the shorter content can get lost in the mix.
Homepage With Post Types
Using the post formats makes some of the shorter posts stand out a little more prominent. They can still be overpowered by the images in the other posts, but if my readers know that I use a black background for quotes and a brown background for my status updates, they will recognize them by color alone.
Changing Themes
Up to this point all of the samples are from the Twenty Thirteen theme. When you change themes, the posts retain the fact that they’ve been set to a certain format, but the format’s styles will be different from one theme to another. You might have to add some formats and you might have to modify the styles to suit your tastes.
Tips
Be sure to make a backup before adding code to your theme. If you have access to a separate WordPress development environment, then I recommend testing your code out on that first.
If you change themes, make sure to add the post formats and styles if they’re not included with the theme. There isn’t any consistency between themes, so there’s no telling what your posts will look like if you don’t make your adjustments.
Whether you create your own or modify the premade styles, use styles that are different from each other. This way your readers will know at a glance what type of content a post contains. You can make them as similar or as different as you want.
You don’t have to use all of the formats. Just use those that make the most sense for your website and audience.
Final Thoughts
Post formats are easy to use and they add some pizazz to your website. They keep every post from looking like every post. Besides visual variety, they also help your readers to identify the various types of content on your site by providing visual cues so they can easily get what they’re looking for. The more types of content you produce the more useful they can be.
Your turn! Do you use post formats? Did you add them to your theme? Did you create your own styles? Do you have anything to add? I’d like to hear your thoughts in the comments below.