WordPress 3.1: Post Formats


I have been going through my themes and updating them to take advantage of the new post formats in WordPress 3.1. I thought it would be a good idea to write a tutorial on exactly how I’m doing it. The latest release of WordPress allows you to set a specific format for your post so that it can either be styled or displayed differently. This, of course, all depends on your theme, and whether your theme has included the functionality and specified different styles for each format.
Here is a list of the available post formats:

aside
Typically styled without a title. Similar to a Facebook note update
gallery
A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
link
A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
image
A single image. The first tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
quote
A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
status
A short status update, similar to a Twitter status update.
video
A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
audio
An audio file. Could be used for Podcasting.
chat
A chat transcript.

(the above is stolen from the codex)
To add post formats to a theme, you need to include the following snippet of code in your functions.php file:

add_theme_support( 'post-formats', array( 'aside', 'audio', 'gallery', 'image', 'link', 'video', 'status', 'quote', 'chat' ) );

You actually have to specify which formats you want to include, though you don’t have to include them all.
Next comes setting up the different styles and formatting for each. This is what I included in my loop.php file for asides (make sure it’s within the WordPress loop or it won’t work):

> '; the_content(); echo '
'; } ?>

First, you should always check if a function exits before actually calling the function. This helps with backwards compatibility. Then, if the function does exists, we call has_post_format() to see if the current post is set as an “aside”. Once all that is done, you can set up how you want your post format to be displayed. I didn’t want to include a title, only the full content of the aside so I just opened a div and used the_content() to display the full content of the aside. Plus, the post_class() function in the main opening div will now include a format-aside class which can be used to style your CSS.
This is the CSS I use:

.format-aside .storycontent p {
	padding-left: 30px;
	background: url(images/quotes.png) no-repeat top left;
	min-height: 30px;
	}

This will display a large quote (image) in the upper left. Check out an example on the Magazine Premium demo. You can actually see examples of all the post formats that are included in the latest release of MP on that demo.
Most formats can use a similar bit of PHP to determine what is displayed, though the gallery format requires just a bit more. I took this code from TwentyTen and modified it slightly:

if(function_exists('has_post_format') && has_post_format('gallery')) { // new gallery post format
	$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
	if ( $images ) :
		$total_images = count( $images );
		$image = array_shift( $images );
		$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
	?>
	
	
	
	

Here's the CSS I use:

.gallery-thumb {
	float: left;
	width: 100%;
	}
	.gallery-text {
		margin: 5px 0 0;
		width: 100%;
		}
.gallery-thumb img {
	margin: 0;
	padding: 5px;
	border: 1px solid #bbb;
	background: #ddd;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: auto\9; /* IE 8 Hack */
	max-width: 96% !important;
	}

Check out an example on the Magazine Premium demo.
You can get pretty fancy when it comes to the layout and style of your post formats. It really all depends on how much you want to differentiate between each format. In your loop.php file you can create multiple conditional statements looking for each format and display each one however you see fit. The new functionality opens the door for more differentiation between content which allows theme developers and users so much more control over what they are posting.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie