Use Template Tags for Post Formats - dummies

Use Template Tags for Post Formats

After adding post format support to your WordPress, you should provide some unique styling for each type of format. If not, your different post formats will look just like the rest of your blog posts, and the point of adding them to your theme will be lost.

You can provide a unique display for your post formats two ways:

  • Content: For each format, you can designate what content you want to display. For example, if you don’t want to display a title for an Aside, leave out the template tag that calls it but leave the template tag that calls the title in for your Video post format.

  • Style: Use the HTML markup that’s provided by the post_class(); tag. Your formats each have their own CSS class assigned to them. Use those CSS classes to provide unique styles for fonts, colors, backgrounds, and borders to your different post formats.

In the default Twenty Ten theme, look at the loop.php template by clicking it on the Edit Themes page. About three-fourths of the way into that template is this line of code:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

The post_class(); section is the cool part of the template tag. This tag tells WordPress to insert specific HTML markup in your template. This HTML markup allows you to use CSS to make custom styles for sticky posts, categories, tags, and post formats.

For example, you can set the following options for a post:

  • Stick this post to the front page

  • File in a category called WordPress

  • Tag with News

For the preceding example, WordPress inserts the following HTML markup:

<div class=”post sticky category-wordpress tag-news”>

Likewise, for post formats, if you publish a post using the images post format, the post_class() tag in the template contains the following HTML markup, indicating that this post should be formatted for an image display:

<div class=”post type-post format-image”>

Combine this information with your knowledge of CSS and HTML, and you can see how you can use CSS along with the post_class(); tag to provide custom styles for each of the post types, categories, and tags you’ve set up on your site.