Web Development WordPress

Working with WordPress Post Formats

Ever wondered how to display a slideshow or video instead of Featured Image. Post Formats is the answer. Post Formats are not to be mistaken for Post Types. Post types let you create different post types where you go on to add them with different custom fields, taxonomies and they work as another post type for adding similar contents, while post formats may sound somewhat similar initially they are totally different. According to codex,

Post Formats is a theme feature introduced with Version 3.1. 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.

Post Formats let you add a meta that lets you know what type of data it is and hence can be presented accordingly. Different post formats that are available are:

  • 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.

So how do you style each post format? Here is what you would do.

  • On your blog archive inside the while(have_posts()): loop you would put<?php get_template_part( ‘content’, get_post_format() ); ?> making it look like:

    <?php if(have_posts()): while(have_posts()): the_post(); ?>
     <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; endif; ?>

     

  • Now for every post formats create php files like “content-gallery.php” , “content-quote.php”, “content-video.php” etc for each post format
  • Add your content in these files as you would want them to be. Say if you don’t want to show “Title”  for quotes, then do not add “the_title();” inside content-quote.php file, and so on.
    Example, Put only this on content-quote.php

    <blockquote><?php the_content(); ?></blockquote>

    or some more, as you would like them.

So basically the part where you display title and content and other meta inside loop go into these content files. Once you choose a post format while adding post, it would choose the required post-format design style and show it that way, and that is how you display sliders or Video in place of featured Image. With WordPress 3.6 coming out soon the post formats have a new feel and are easier to add then before. WordPres 3.6 Beta has this kind of interface for adding  post formats.

post-formats-1024x850

With that interface, you are going to be using more of Post Formats, so I hope the tutorial comes just in time to help you understand the power of Post Formats. Also you need to activate Post formats, for that add the following line to your themes, functions.php if it does not exist aleady.

add_theme_support( 'post-formats', array('gallery','image','video','audio','quote' ) );