WordPress 3.1 Post Formats Reference by Lisa Sabin-Wilson

Lisa Sabin Wilson
Today is the first post in our 12 Days of WordPress and BuddyPress, submitted by Lisa Sabin-Wilson, author of WordPress for Dummies and BuddyPress for Dummies.

Find Lisa on the web at ewebscapes.com. Many thanks to her for sending us her WordPress 3.1 Post Formats reference below, which will help you get ready for the next release:

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. 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. (a good example is Brian Gardner’s site who apparently jumped the 3.1 bandwagon before I did! He has a really clean-looking theme on his personal site using post formats – have a look!)

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):

1
2
// 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!

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<?php get_header(); ?>
<div id="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <?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 … please adjust accordingly.

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!

Comments (12)

  1. I’m working on a post about what might be “a better way to skin that cat.” :-) It’s a technique I’m using on the WordPreh theme to help me manage my post formats. I’m hoping to get the article up tonight or tomorrow, depending on how far we get with Christmas decorations today.

  2. Instead of modifying the HTML like that, you could use styling rules instead.

    For example, let’s say I did this in my theme:
    [div [?php post_class();]]
    [h3][?php the_title(); ?][/h3]
    [?php the_content(); ?]
    [/div]

    If I then want to hide the title for “aside” posts, all I have to do is this in my stylesheet:
    .format-aside h3 { display:none; }

    The .format-foo classes are added to the post_class based on the formats being used. You can style on them and never bother with custom PHP code and if statements and such.

  3. Thanks for this overview, Lisa! I’m eager to go try skinning some cats (metaphorically speaking), and this gives me the guidance that I need to get started. ;-)

    I’m looking forward to learning from the upcoming posts in this “12 Days” series as well! (As a technical note, however, the “12 Days of Christmas” to which the series title refers run from December 25 through January 5, beginning with Christmas rather than leading up to it.)

  4. 12 days of Christmas….omg I’m not done!!! :)

    Thanks for asking me to do this — I’m having fun with Post Formats over on my site. I did it yesterday and now of a fun Tumblr-type theme to play with.

    Err..maybe it will inspire me to post more lol

    Thanks guys!

  5. This will definitely be a useful thing for me for a site I started developing back in February when I first started playing with and digging into WordPress 3.0 Alpha. The site Im making, heres on example my playground site: http://tweakurpages.com, use things such as status, and image, etc.
    So it will be handy when I get back to working on it again. The code for the original site I was making turned into what I made WPHonors from. I plan to turn WPHonors back into the site I first started. Could have used post formats on WPHonors for sure too, but they weren’t ready to use yet.

    Thanks for this template code, I will definitely use it, if not modify it and make it extremely complex even lol. That tends to happen in my page templates real quick.

Participate