Post Format presentation at Tampa Bay WordPress Developer Meeting. Apr 13 2011

1. POST FORMATS
a new 3.1 feature
Wednesday, April 13, 2011

2. HI, I’M ALISON
i’ve worked with wordpress for last 5 years or so.
i’m big on front-end design, UI, etc
twitter: @alisonmf
site: alisonfoxall.com
Wednesday, April 13, 2011

3. A Post Format is a piece of meta information that can be used by a
theme to customize its presentation of a post. The Post Formats feature
provides a standardized list of formats that are available to all themes
that support the feature. New formats cannot be introduced by themes
nor even plugins. The standardization of this list provides both
compatibility between numerous themes and an avenue for external
blogging tools to access to this feature in a consistent fashion.
In short, with a theme that supports Post Formats, a blogger can change
how each post looks by choosing a Post Format from a radio-button list.
POST FORMATS
as defined in the Codex
http://codex.wordpress.org/Post_Formats
Wednesday, April 13, 2011

4. WHAT?
what is this term?
Wednesday, April 13, 2011

5. TUMBLR-STYLE POSTS
same blog, posts formatted in different ways
Wednesday, April 13, 2011

6. matt’s blog
Wednesday, April 13, 2011

7. regular post
Wednesday, April 13, 2011

8. post with only a link (top) & post as an aside (bottom)
Wednesday, April 13, 2011

9. tumblr theme
Wednesday, April 13, 2011

10. example of a chat in tumblr
Wednesday, April 13, 2011

11. OK, COOL.
but couldn’t we do this already before with custom post types
or custom taxonomies?
Wednesday, April 13, 2011

12. STANDARDS, MY FRIEND
■ 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 <img /> 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
http://codex.wordpress.org/Post_Formats
Wednesday, April 13, 2011

13. POST TYPES VS. POST FORMATS
what’s the difference?
well, what’s the difference
between advertising and
marketing?
Wednesday, April 13, 2011

14. REMEMBER: with any custom post types, custom
taxonomies, and post formats, one thing to realize:
THIS IS THEME DEVELOPMENT!
these features are activated at the theme level,
meaning that switching from theme to theme
you WILL lose front-end functionality.
Wednesday, April 13, 2011

15. add_theme_support(
'post-­‐formats',
array(
'aside',
'status'
)
);
add_post_type_support(
'page',
'post-­‐formats'
);
ADDING SUPPORT
is as easy as adding menu support. throw this in your
functions.php file of your theme folder.
Wednesday, April 13, 2011

16. USAGE
it’s activated on my theme, now how do I style it all?
Wednesday, April 13, 2011

17. 3 WAYS
1. conditionals
2. CSS level
3. template parts
Wednesday, April 13, 2011

18. CONDITIONALS
while ( the_loop() ):
if ( has_post_format( 'gallery' ) ) :
// big block of HTML to format a gallery post
elseif ( has_post_format( 'video' ) ) :
// big block of similar HTML to format a video post
elseif ( has_post_format( 'image' ) ) :
// big block of similar HTML to format an image post
elseif ( has_post_format( 'aside' ) ) :
// big block of similar HTML to format an aside
else :
// big block of similar HTML to format other post
endif;
endwhile;
holy toledo!
Wednesday, April 13, 2011

19. CSS LEVEL
.format-­‐status
h2
{display:
none;}
.format-­‐status
p
{text-­‐decoration:underline;}
unable to manipulate markup. easy fix for a few things.
Wednesday, April 13, 2011

20. TEMPLATE PARTS
division in files (like custom pages)
while ( the_loop() ):
get_template_part( 'format', get_post_format() );
endwhile;
http://dougal.gunters.org/blog/2010/12/10/smarter-post-formats
Wednesday, April 13, 2011