Post Formats (Theme)

Description

What are Post Formats, how can you use them, and how do you develop Post Formats? This step-by-step walkthrough will give you an understanding of what Post Formats are and how to create your own.

Prerequisite Skills

Basic knowledge of HTML/CSS/PHP
Basic knowledge of installing and activating WordPress themes
Understanding of how folders and files are structured
Ability to edit files with a text editor

Objectives

Students will create each post format using a default WordPress theme
Students will enable Post Format support on a theme that does not yet have Post Formats enabled
Students will style each Post Format type

Assets

WordPress installed locally
Twenty Thirteen theme installed (all post formats done and styled)
Twenty Twelve theme installed (to demonstrate how to enable and style Post Formats when not already supported by selected theme)
Child theme to enable post formats
Filler content from Theme Unit Test Data

[alert]It is important that you have Underscores configured as a fully functioning theme, minus the Post Formats, to demonstrate how to configure and style. [/alert]

Screening Questions

Are you familiar with installing and activating themes via the WordPress Dashboard?
Do you have at least a basic knowledge of HTML/CSS/PHP?
Do you feel comfortable using a text editor to edit code?
Will you have a locally or remotely hosted sandbox WordPress site to use during class?

Teacher Notes

Performing a live demo while teaching the steps to make a child theme is crucial to having the material “click” for students.
It is easiest for students to work on a locally installed copy of WordPress. Set some time aside before class to assist students with installing WordPress locally if they need it. For more information on how to install WordPress locally, please visit Installing on a Local Server.
The preferred answers to the screening questions is “yes.” Participants who reply “no” to all 4 questions may not be ready for this lesson.

Hands-on Walkthrough

Introduction: What are Post Formats?

Post Formats have existed in WordPress since 3.1. However, few themes natively support it, and fewer users implement it. 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. Themes are not required to support every format on the list. New formats cannot be introduced by themes or even plugins. The standardization of this list provides both compatibility between numerous themes and an avenue for external blogging tools to access 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. Types of Post Formats include: 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 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, with or without a caption. The first 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 or video playlist. The first

Why Use Post Formats?

Using Post Formats, your blog visitors will know exactly what type of content they are viewing. Different styles for each Post Format will make your blog more visually interesting. Previously, developers tried to accomplish these unique styles for content by modifying categories or by using custom post types. These custom types were intended to be something other than blog content. Using Post Formats will keep your content all within the blog portion of your site, and once configured, will require only that you check which format you are using. Post Formats will show up in your RSS feed, and will be editable within the Posts part of your site.

How Post Formats Work

When you edit an individual post, you’ll see a Format module: [tip]If you do not see the Format module, check that you have it enabled in your Screen Options. If you don’t see the Format option there, then you are likely using a theme that does not use post formats.[/tip] Once you've assigned posts to a particular Post Format, you will see icons in the dashboard indicating which format each post is. Go to Posts > All Posts: When viewing your blog, the content will have a unique look for each format.

Adding Theme Support

Themes need to use add_theme_support() in the functions.php file to tell WordPress which post formats to support by passing an array of formats like so:

add_theme_support( 'post-formats', array( 'aside', 'quote', 'status', 'image', 'gallery', 'chat', 'link', 'audio', 'video' ) );

[info] that you must call this before the init hook gets called! A good hook to use is the after_setup_theme hook.[/info]

Adding Post Type Support

If you would like to use Post Formats styling on Pages or Custom Post Types, it is possible. Post Types need to use add_post_type_support() in the functions.php file to tell WordPress which post formats to support:

// add post-formats to post_type 'page'
add_post_type_support( 'page', 'post-formats' );

// add post-formats to post_type 'my_custom_post_type'
add_post_type_support( 'my_custom_post_type', 'post-formats' );

Using Post Formats

In the theme, make use of get_post_format() to check the format for a post, and change its presentation accordingly. Note that posts with the default format will return a value of FALSE. Or make use of the has_post_format() conditional tag:

if ( has_post_format( 'video' )) {
  echo 'this is the video format';
}

An alternate way to use formats is through styling rules. Themes should use the post_class() function in the wrapper code that surrounds the post to add dynamic styling classes. Post formats will cause extra classes to be added in this manner, using the "format-foo" name. For example, one could hide post titles from status format posts by putting this in your theme's stylesheet:

.format-status .post-title {
display:none;
}

Styling Post Formats

Although you can style and design your formats to be displayed any way you see fit, each of the formats lends itself to a certain type of "style", as dictated by modern usage. It is well to keep in mind the intended usage for each format, as this will lend them towards being easily recognized as a specific type of thing visually by readers. For example, the aside, link, and status formats will typically be displayed without title or author information. They are simple, short, and minor. The aside could contain perhaps a paragraph or two, while the link would probably be only a sentence with a link to some URL in it. Both the link and aside might have a link to the single post page (using the_permalink()) and would thus allow comments, but the status format very likely would not have such a link. An image post, on the other hand, would typically just contain a single image, with or without a caption/text to go along with it. An audio/video post would be the same but with audio/video added in. Any of these three could use either plugins or standard Embeds to display their content. Titles and authorship might not be displayed for them either, as the content could be self-explanatory. The quote format is especially well suited to posting a simple quote from a person with no extra information. If you were to put the quote into the post content alone, and put the quoted person's name into the title of the post, then you could style the post so as to display the_content() by itself but restyled into a blockquote format, and use the_title() to display the quoted person's name as the byline. A chat in particular will probably tend towards a monospaced type display, in many cases. With some styling on the .format-chat, you can make it display the content of the post using a monospaced font, perhaps inside a gray background div or similar, thus distinguishing it visually as a chat session. See Post Formats: Chat for further styling.

Formats in a Child Theme

Child Themes inherit the post formats defined by the parent theme. Calling add_theme_support() for post formats in a child theme must be done at a later priority than that of the parent theme and will override the existing list, not add to it.

add_action( 'after_setup_theme', 'childtheme_formats', 11 );
function childtheme_formats(){
     add_theme_support( 'post-formats', array('aside', 'quote', 'status', 'image', 'gallery', 'chat', 'link', 'audio', 'video') ); }

Calling remove_theme_support('post-formats') will remove it all together.

Group Exercises

Using Twenty Thirteen theme, create a post using each post format option.
Using Underscores:
1. Create each Post Format [info]Model after Twenty Thirteen theme files but remember to change calls to the theme naming convention to your own theme[/info]
2. Style Post Formats (model after Twenty Thirteen Style.css line 1380)

Quiz

What are Post Formats? Post Formats are 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.
What are several Post Format options? Aside, audio, chat, gallery, image, link, quote, status, video
Are Post Formats the same as Custom Post Types? When would you pick a Custom Post Type instead of a Post Format? No, custom post types appear as another option on the admin dashboard near posts and pages. Custom Post Types are useful when you don't want the content to appear on /blog, such as an events calendar or real estate listings.
Where do you enable Post Formats for your theme? Functions.php, specifically in a child theme functions.php
What must you do when writing a post that should use a Post Format? Select which post format to use
Where do you customize the look for Post Formats? Style.css, or specifically the child theme style.css
Do all themes support Post Formats? No
What default WordPress themes support Post Formats? Twenty Thirteen and Twenty Fifteen
Can you add Post Format support to your theme or child theme? Yes

wptrainingteam/post-formats-theme