WordPress Post Formats similar to Tumblr Posts

March 7, 2011 DPR

WordPress Post Formats similar to Tumblr Posts

Tumblr Style Post Formats introduced in WordPress 3.1

Post Formats, recently introduced with WordPress 3.1 offers Tumblr microblogging

Simple: the new Post Format function emulates Tumblr style posts. Using post_format template tags with conditional statements, you can exclude or include a post’s contents. It all depends on what you want that particular post format to display.

Tumblr Style Post Formats introduced in WordPress 3.1

Tumblr Style Post Formats introduced in WordPress 3.1

Essentially, it’s meta information attached to posts to allow themes to present posts differently than just the standard way. They’re pre-defined and cannot be extended (developers cannot add new ones).

The [intlink id=”2582″ type=”post”]Post Formats[/intlink] feature provides a standardized list of formats that are available to all themes that support the feature.
–WordPress Codex

As of [intlink id=”2582″ type=”post”]WordPress 3.1[/intlink], you’ll have the option of nine (9) separate post formats. Similar to Tumblr, you’ll be able to share almost anything in an effortless manner:  Aside, Gallery, Link, Image, Quote, Status, Video, Audio or Chat.

So, when you find a quote you want to share on your blog, then post it as a Quote. You just took an image you want everyone to see, then post it as an Image, and so on. Each can have their own unique styling. Users can choose a post format when editing posts.

Some of the main benefits of Post Formats:

  • Portable* – changing your theme will not break your website. Especially good for themers.
  • Post Quickly – Designed to share posts regardless of size.
  • Microblogging – More versatile, allowing posting of short twitter-like blurbs or large articles.
  • Less Confusion – your blog readers and contributors will know exactly what type of post they are currently looking at since ideally each format will be uniquely styled.
  • Visually More Interesting – you can present each post [format] with a distinct a layout.  Prior to WordPress 3.1 all  posts are  displayed with the same basic layout.

What Post Format is NOT

  • NOT enabled by default.
  • NOT required to support every format on the list.
  • New formats (other than nine predefined formats) cannot be introduced by themes or plugins.
  • NOT Custom Post Types**

Here are the nine predefined formats which offer a general guideline to what how post can be displayed.

  1. Aside – Similar to Facebook note update. Short notes, usually without a title.
  2. Gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  3. 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.
  4. 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.
  5. Quote – A quote. Maybe a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  6. Status – Status update similar to a Twitter status update.
  7. 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).
  8. Audio – An audio file. Could be used for podcasting.
  9. Chat – a chat transcript

To implement these different formatting designations, themes will  need to add support in the theme’s functions.php file:

// Add Post Format Support
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

What can be “Customized” with the new feature?

There are two (2) aspects of a post display that can be customized using Post Format function within your post templates:

  1. Content – conditional statements are with each has_post_format to exclude or include content. For example (below), you can include only the_title, the_post_thumbnail and the_content in an Image formatted post. The same applies to all nine formats. Here is an example that I borrowed from Lisa Sabin-Wilson’s well-written article:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?<span ></div>
		<?php
			if  ( has_post_format( 'image' )) {
				echo '<h3>';
  				echo the_title();
				echo '</h3>';
 				echo the_post_thumbnail('medium');
				echo the_content();
			}

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

2. CSS Style – Using body_class() and post_class(), you can now take advantage of the new post format classes that are applied to all posts within the loop. Class names will look like this:

  • format-aside
  • format-gallery
  • format-link
  • format-image
  • format-quote
  • format-status
  • format-video
  • format-audio
  • format-chat

FINAL NOTES:

A great example of Tumblr style WordPress theme: Shelf Theme. By far, the simplest explanation I found of what Post Formats is.
Here are some other articles I borrowed from:

  • https://lisasabin-wilson.com/wordpress-3-1-post-formats-reference
  • https://markjaquith.wordpress.com/2010/11/12/post-formats-vs-custom-post-types
  • https://flashingcursor.com/wordpress/intro-to-post-formats-in-wordpress-3-1-739
  • https://www.wpbeginner.com/wp-themes/what-whys-and-how-tos-of-post-formats-in-wordpress-3-1/
  • https://ottopress.com/2010/post-types-and-formats-and-taxonomies-oh-my/

** Post Types is poorly named. It should be more like Custom Content Types like attachments, menu items, pages, posts. However, they are not Posts. They do not show up on the Blog portion of your site. They do not appear in the Posts Feed. However you can create special feeds for Post Types. Also, custom Post Types is a way for plugins to define types of content for themselves.

, , ,

DPR

Intrigued, excited, and enamored by technology and life. 30 plus years providing businesses with marketing, design, and strategies for success. Specializing in WordPress, Magento, and SEO.

Comments (3)

  1. Tom

    Well documented. I wonder if the post formats (status, video, image, gallery, etc) will effectively equal the name of the categories for these type posts, or can they be called something differently?
    For example, on the Wumblr theme it seems they are using some of the post format names as the category names, but at the same time some of their posts (with that “post format” design) carry category labels that differ from the 9 standard post formats.
    Do you know how this works in that respect?
    Also, I find it hard to picture what “custom post types” (yes, I know they should be called “custom CONTENT types”) are exactly for….okay they are NOT for the blog section of a website, but how exactly would they be used? And would a plugin offer that functionality, or WP or the theme?
    Is that something for ecommerce driven WP sites perhaps?

    Thanks
    Tom

  2. DPR

    To preface: Post Formats were introduced as a standardization for theme designers. Best way to get the concept behind post formats is to set up an account at tumblr. Post Formats simplify the sharing/posting process, parring down the contents (e.g. title, content, etc,) of different types of posts (e.g. quotes, images, links, etc.). The thinking (I assume) is to make WordPress more micro-blogging capable. Thanks for your comment.

  3. Raj

    Your explanation stands unique on Post Formats and saved lots of my time. Hope with Status Post Format i can have my (twitter like) updates in my own blog in a page or sidebar. If you write on doing so will be more helpful.

Leave a Reply

Creative design from the North

Call at (845) 247-0909 !
Or, email at [email protected]