Modern Decorating ideas interior decorating Home decorators
post-formats-sm

WordPress 3.1 Post Formats Reference

I’ve been playing around with, and testing, WordPress 3.1 beta since its release on November 25, 2010 (Happy Thanksgiving, WordPressers!).  There are some great new features coming your way with the 3.1 release – which you can read about in their announcement post.

I’ve been hard at work on last edits for both my WordPress All In One For Dummies and WordPress Web Design For Dummies books over the past several weeks and want to make sure I include the great new 3.1 features for my readers. One of the new features I just got done including in the books is the new Post Formats feature in 3.1.  Post Formats allow you to create a Tumblr-like blog layout where you can offer different types of content and styling for each individual format type.

Adding theme support for Post Formats is not overly complicated – it’s a quick function added to your Theme Functions (functions.php) file, after you decide which types of formats you are planning on using.  Currently, there are 9 available formats including:  Aside, Link, Gallery, Image, Chat, Audio, Video, Status.  You can add all, or just a few, of the formats using this example (note: this example assumes you are using all the available formats):

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

Technically, there is a tenth format which is the default format, that is the catch-all formatting for posts that you don’t assign a specific format to (you can, such as, use this default format for your regular blog posts).

Once you add the support in your Theme Functions file, you’ll notice a new option under the Publish module on the Add New Post, or Edit Post, screen in your Dashboard:

You have the Post Format added to your theme through the Theme Options file, you create your posts by assigning formats to them – but what about the template?  Below is a very, very simplified template to handle Post Formats.  I simplified it – – with very little markup and content, for you to use as a ready reference.  There are two items at play here that will allow you to customize your Post Formats:

  • Content: using the conditional functions in my template reference example below, you can see that you can include, or exclude, certain template tags and content displays on a per-format basis.  For example, in my example below, I’ve excluded the title template tag: the_title(); from my Asides format, but included it in my Gallery format.  It follows then, that when my posts display on my site, Asides will not have a title, but Gallery posts will.  The possibilities here are endless in terms of what kind of content you want to display for each format, using common WordPress template tags.
  • CSS Style and Markup: Note, in my example below, the presence of the post_class(); tag.  This ensures that WordPress will pickup your formats and add specific and unique CSS classes in your markup, allowing you to use CSS to style each format type differently.  Additionally, within the conditional functions, you can add your own markup to fancy things up a bit using basic HTML and CSS. (example: when I assign the Image format to my post, WordPress adds the following CSS classes in the markup: class=”post type-post format-image” .. just like it always has for categories and tags since version 2.7)

Here is the sample template for post formats.  There are surely other (likely better, easier, cleaner?) ways to go about it – – I created this template as guide to make it as easy to follow for you as I possibly could.  This example  is a very simple, stripped down ….. naked, even ….. template for your reference use.  Expand and contract, at will – – hope it helps you on your way to utilizing Post Formats in the future once 3.1 is officially released!

php get_header(); ?>
<div id="main">
php if (have_posts()) : ?>
php while (have_posts()) : the_post(); ?>
<div id="post-<?<span class=">php the_ID(); ?>" ></div>
		php
			if ( has_post_format( 'aside' )) {
				echo the_content();
			}

			elseif ( has_post_format( 'chat' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

			elseif ( has_post_format( 'gallery' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

			elseif ( has_post_format( 'image' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
 				echo the_post_thumbnail('medium');
				echo the_content();
			}

			elseif ( has_post_format( 'link' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

			elseif ( has_post_format( 'quote' )) {
				echo the_content();
			}

			elseif ( has_post_format( 'status' )) {
  				echo the_content();
			}

			elseif ( has_post_format( 'video' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

			elseif ( has_post_format( 'audio' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}

			else {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
				echo the_content();
			}
		?>
	</div>
php endwhile; else: endif; ?>
</div>
php get_sidebar();  get_footer(); ?>

Want more? Check out other posts about Post Formats from:

**Disclaimer –> WordPress 3.1 is now in beta. This means that the Post Formats feature is likely to change…possibly.   This post is meant as a helper to give you an idea of what’s coming .. updates will be made to this post in the future should anything change during beta testing.

Look for a redesign here soon! I’m working on integrating Post Formats here … since my books are almost done, I might even resume posting here more regularly!

Do you have a better way to skin this cat?  Do share!

As development continues with Post Formats – I would love to hear what you’re doing with the feature, if you’re using it and how …. drop a line in my comments and brag a little about your handiwork on your own site (or a site you’ve created).  Are there any brave hearts out there who have already installed 3.1 beta and are using the Post Formats feature already??  Do tell!

Hope you all had a fantastic Thanksgiving holiday (for my US readers)!

52 Comments

  1. valentmustamin

    RT @LisaSabinWilson: #WordPress 3.1 Post Formats Reference http://lisasabin-wilson.com/wordpress-3-

  2. Interesting.

    But what about the recent added ‘custom post type’? Is it going to be different?

  3. Lisa

    Post Formats are completely different than Custom Post Types. Check out this post by Mark Jaquith: Post Formats vs Custom Post Types

  4. Lukas_Sparks

    RT @LisaSabinWilson: #WordPress 3.1 Post Formats Reference http://lisasabin-wilson.com/wordpress-3-

  5. Really glad to find your site! I LOVE wordpress for everything website based (ecommerce, basic websites, membership sites, and even blogging :) )

    Look forward to your tips and would love to interview you sometime!

    I’m excited to see what 3.1 does for the website world as I think WordPress is the end-all cure-all for everything web!

    Nate Moller
    MollerMarketing.com

  6. hi miss Lisa,

    I’m currently using WP 3.0. do you think i should upgrade to 3.1 to get these added features? cuz i worry that the theme i’m using now will not be compatible with the latest version of WP.

    thanks in advance!

    • Lisa

      Go ahead with the upgrade to 3.1 when it comes out. You can always put up a test site on a domain you reserve just for testing and load your theme on it to see if it breaks before you apply the upgrade to your live site. I usually recommend this for people who worry about upgrades.

  7. I’ve never used anything for customizing individual posts. I’d rather have the changes for the site overall and give it a uniform look. Keeps it simple for me too.

    I don’t know why they added the option for Header graphics and backgrounds to the WP default 2010 theme but did not also add options to select the fonts and font sizes in the same way. Twenty ten would be a great theme if it had gone just a bit farther in the customizing options.

    One thing I would like to see in your book about Web Design for WP are ways to make CSS changes which are independent of changing your themes.

  8. Hi Lisa!

    Very interesting post. WordPress 3.1 seems to be full of new and intriguing features. Guess I’ll upgrade when it comes out.

  9. Thanks, Lisa, for sharing this helpful preview!

    Has a release date been set for WP 3.1?

  10. Haluk

    Looks like the post-formats are limited to what would be coming with 3.1. Is it possible to add our own types?

    Example;

    Will I be able to do this;
    add_theme_support( ‘post-formats’, array( ‘aside’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’, ‘audio’,’MY_TYPE_HERE’ ) );

    If that’s possible, where do we create the special template? Is it something like single-aside.php, and therefore our custom post format type is expected to be something like single-MY_TYPE_HERE.php?

    And what happens if the matching file is missing. Does the post get served by single.php?

    And finally, can I use this very taxonomy ( post-formats ) in place of creating a taxonomy called Media Type or category called Media Type? In other words, can I have a landing “page”, which pulls together all posts that have been formatted say as “aside”? Without the post-formats, you would have created a taxonomy or a cat for that?

  11. Nick W

    Hi Lisa,

    Your post here is a good example of how flexible WordPress can be and still be easy to use. There is still a ton I have yet to explore myself. I’ll definitely be adding your site to my list of wordpress experts.

    Thanks,

    Nick

  12. I have read your post numerous times since first working on my dev 3.1 install. I’m pretty new to really trying to code my own stuff from my own thought process. I read your article, and the other ones out there like Smarter Post Formats and Even Smarter Post Formats. My dilemma was to continue using get template part for loop.php and also use get template part for formats, so child themes could easily override it all. Here’s my attempt…

    http://go.rvoodoo.com/WPformats

    I have no idea if this is a good way to go about it…..but its what I did. But your article was the one that started me thinking, so thanks!

  13. Hi Lisa,

    A great article. Thank you for sharing.

    One question. Obviously, your piece of code only calls the title and the content. How would you go about adding such elements as permalink etc?

    else {
    echo ”;
    echo the_title();
    echo ”;
    echo the_content();
    }

    Thanks if you can help…

  14. Really cool stuff Lisa, I was publishing a blog post about the new features that I like in the WP 3.1, and this is so far the best resource I found, so I will include it in my resources to share it on the post!

    Great work!

  15. i only have 1 questions, how i can do a loop of only asides, for example?

  16. Lisa, Thank you for sharing your insights on Post Formats. I borrowed some of your ideas and posted my own version. I did so for my own understanding and also to share my thoughts as well: http://www.whatsthebigidea.com/wordpress-post-formats-tumblr.html

    Here is also a very simple post that I found easy to understand: http://upthemes.com/blog/a-simple-guide-to-wordpress-post-formats/

    Thanks again!

  17. max

    Thanks for the reference! Great work, Lisa!
    How this “Post Formats” differ from “Custom Post Types”?

  18. Jacobus

    Hi Lisa, I am a bit late! Thanksgiving has past a couple of times! :-) Just wanted to let you know something. I was looking for something specific (not even 3.1 related as you can imagine) but couldn’t find it but then I found the link to Weblog Tools Collection and got my answer there. Wouldn’t have gotten it without you though. So thanks!

  19. You’re welcome Lisa!

Trackbacks for this post

  1. Theme that offers full width posts
  2. WordPress Post Format Examples
  3. Smarter Post Formats?
  4. » My First Post Format
  5. 10 Things You Need to Know About WordPress 3.1 — Technosailor.com
  6. » Redesigning Web Comics: The importance of organized content | The Pink Crow
  7. Top 10 New Features in WordPress 3.1 | ShanKrila
  8. WordPress Tip: Post Formats, Get Template Part, loop.php and Maximum Child Theme Compatibility - WordPress « Rev. Voodoo
  9. » Additional Resources
  10. Flexibleres Bloggen durch Artikel-Formate (Post Formats) in WordPress 3.1 | Elmastudio
  11. WordPress Post Formats Tutorial: Tumblr With WordPress 3.1 | WordCast
  12. What’s new and exciting in WordPress 3.1 | WPCandy
  13. wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ...
  14. Wordpress 3.1 (Reinhardt) Features: New CMS Capabilities and More | TutorialChip
  15. Upgrading Thesis Theme Blog To WordPress 3.1 Safely
  16. omg post formats-notlaura
  17. Day 4 – All About Post Formats Pt 1 | I Am Kel
  18. WordPress 3.1 Post Formats Reference | Lisa Sabin-Wilson | RAV's Blog
  19. Signets du 07 04 2011 au 08 04 2011 | Netlex FOCUS
  20. WordPress 3.1 Post Formats Guide | WebDino.net
  21. Photo Gallery Primer » Otto on WordPress
  22. Twenty Eleven Post Formats – What Are They and Why Should I Care? | WordPress News at WPMU.org
  23. SFCite | Blog | Twenty Eleven Post Formats – What Are They and Why Should I Care?
  24. 7 Major Features You Need To Know About In Latest WordPress 3.1 Version | Tech And Tricks
  25. New Features of Wordpress 3.1 | WHAT A LAMP
  26. WordPress 3.1 (Reinhardt) Features: New CMS Capabilities and More | Free Wordpress Themes at KiloWordpress.com
  27. 4sharesite » Worldpress Post Formats
  28. Exclude Non-Standard Post Formats from the WordPress Post Count « Your Blog
  29. WPSmith | Custom Post Types, Post Formats, Custom Taxonomies, and Custom Fields and Meta Boxes
  30. WordPress Codex Post Formats | siput lutju story
  31. Step by Step Guide to WordPress Post Formats | Shade Tree Sites