Post Formats


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Post Formats

  1. 1. POST FORMATS a new 3.1 featureWednesday, April 13, 2011
  2. 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.comWednesday, April 13, 2011
  3. 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, April 13, 2011
  4. 4. WHAT? what is this term?Wednesday, April 13, 2011
  5. 5. TUMBLR-STYLE POSTS same blog, posts formatted in different waysWednesday, April 13, 2011
  6. 6. matt’s blogWednesday, April 13, 2011
  7. 7. regular postWednesday, April 13, 2011
  8. 8. post with only a link (top) & post as an aside (bottom)Wednesday, April 13, 2011
  9. 9. tumblr themeWednesday, April 13, 2011
  10. 10. example of a chat in tumblrWednesday, April 13, 2011
  11. 11. OK, COOL. but couldn’t we do this already before with custom post types or custom taxonomies?Wednesday, April 13, 2011
  12. 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, April 13, 2011
  13. 13. POST TYPES VS. POST FORMATS what’s the difference? well, what’s the difference between advertising and marketing?Wednesday, April 13, 2011
  14. 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. 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. 16. USAGE it’s activated on my theme, now how do I style it all?Wednesday, April 13, 2011
  17. 17. 3 WAYS 1. conditionals 2. CSS level 3. template partsWednesday, April 13, 2011
  18. 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. 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. 20. TEMPLATE PARTS division in files (like custom pages) while ( the_loop() ): get_template_part( format, get_post_format() ); endwhile;, April 13, 2011