THE custom post formats of WordPress allow you to transform a classic WordPress blog into a real fun publishing platform. Let's see how it works!
Definition of Post formats
Post formats: kesako?
THE post formats of WordPress constitute a new feature introduced after the release of version 3 of the most famous blogging CMS in the world. This is a function allowing you to subdivide articles into several types, so as to present them differently on your blog depending on what they are.
With custom post formats, you can make your blog interactive, lively and diverse in both content and form. Here is the list of article formats currently provided by WordPress:
- Default: normal item.
- aside: quick article.
- cat: dialogue.
- gallery (gallery): photo gallery.
- link: one or more external links.
- image: simple image.
- quote
- status: A status like on Facebook or Twitter for example.
- video
- audio
Inspired by Tumblr, a provider of interactive and fun blogs, this functionality makes it possible to energize a traditional blog or magazine by giving it the possibility of displaying content in a different way depending on the type of subject covered. THE Tumble Ten theme for example (see left image) shows very explicitly what is possible with Post formats.
Indeed, the fun side here is to provide a specific icon for each type of content, as well as different article elements. For example, you can choose to display only a link, only a title, or only the content of the article without the title, or even a video or a photo gallery.
In terms of loyalty, it is a step forward towards improving the attractiveness of a blog, whether it is a corporate, entertainment, personal or journalistic blog. This type of functionality makes it possible to bring together Twitter-like statuses, detailed articles or editorials, videos, etc. in a single blog.
Difference between Post formats and Custom Post Types
Many people do not understand the distinction between custom post types and post formats, two functions which a priori are duplicates. In truth, custom post types create new types of content that aren't articles. Indeed, articles on one side, and pages on the other for example, are two different types of content. So, by creating a custom post type, you are creating a new type of content. This could be, for example, film reviews, fact sheets, products, interns, etc.
Conversely, post formats are types of posts (therefore types of articles): they have the particularity of being standard and therefore less customizable (in other words, the list of post formats provided above is as is, it cannot be modified a priori), and are displayed as posts everywhere on the blog.
Install Post formats on your WordPress blog
Installing post formats on your blog requires following the following steps. These do not constitute a repository, and several implementation methods exist.
Enable custom post formats
To activate custom post formats on your WordPress theme, go to your theme's functions.php file to add the lines below. You can remove post formats that you don't want to use.
add_theme_support(
'post-formats', array(
'aside',
'cat',
'gallery',
'picture',
'link',
'quote',
'status',
'video',
'audio'
)
);
You should now see the small box relating to article formats in your WordPress admin, more precisely to the right of your post publication form:
Now that post formats are activated, this does not mean that you will see a difference on your blog. Indeed, even by selecting for example "Chat" for one of your articles, it will not be displayed in the form of a chat before you have modified the code of your article file, and incidentally your CSS file.
Indeed, the add_theme_support function installs the basic functions of custom post formats, but it is up to you to make your theme compatible. But don't worry, I'll show you how to do it!
has_post_format() VS get_template_part
There are two options available to you to make your theme files compatible with post formats. The first is a simple solution to understand the principle if you are starting out and you are not very comfortable with PHP code, the second is the cleanest solution.
The has_post_format() function
WordPress has provided this feature to implement where your posts appear in order to customize what you want to show for each post format. This method is only recommended if you only have a few article formats and you want to rush the job :)
loop.php and single.php
if (has_post_format('aside')) {
//show code for quick posts
} elseif (has_post_format('chat')) {
//display the code relating to chat articles
} elseif (has_post_format('gallery')) { //display the code relating to the post's photo gallery
} else { //display the standard code of your theme for displaying your articles
}
Please note: this code must still be used in all cases on the single.php file, even if you choose the method below.
The get_template_part() function
In a well-stocked theme file filled with conditional structures, the method cited above is not very methodical. So we're going to split the code to make it as clear as possible.
loop.php
if (have_posts()):
while (have_posts()): the_post();
if(!get_post_format()) {
get_template_part('format', 'standard');
} else {
get_template_part('format', get_post_format());
}
endwhile;
In other words: if the article currently in the loop does not present a particular article format, then launch the standard theme, otherwise, launch the theme relating to the post format.
With this code, we therefore need to create the standard and specific files. To do this, nothing could be simpler, you just need to create a format-standard.php file containing the standard loop, then a format-video.php file which would contain the code relating to the display of video articles, then a format-aside.php file which would contain the code relating to the display of articles “en passant”, etc…
The post_class() function
Particularly interesting, this function will allow you to implement a class in the article format, so as to personalize it via the CSS file afterwards. Let’s zoom in on the aside format for example:
if (has_post_format('aside')) {
<div id=" »post-NO NUMERIC NOISE KEY" 1001 » no numeric noise key 1000>
<?php the_content();?>
</div>
} else { //display the standard code of your theme for displaying your articles
}
The post_class() function will affiliate the class .format-aside to your post “in passing” for example.
Customize the style of article formats via CSS file
As we just saw above, the aside format is characterized by the .format-aside class. So all you have to do is style this format in the CSS file! Example :
.format-aside h2 {font-size: 2em}
.format-aside {
background: url(images/aside.png) -118px 14px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 15px 20px 5px;
position: relative; }
Via this code, we tell “en passant” type posts to display a specific wallpaper, a specific title size and a rounded border, enough to aesthetically highlight this type of content. You can let your imagination run wild and add all kinds of styles, then generalize the procedure to all post formats!
Summary example
Here is a summary turnkey code to put the ideas in place:
In the loop.php (or index.php) file where the content is displayed:
if (have_posts()):
while (have_posts()): the_post();
if(!get_post_format()) { get_template_part('format', 'standard');
} else { get_template_part('format', get_post_format());
}
endwhile;
endif;
standard-format.php:
The default content of your theme for displaying your articles.
format-aside.php:
<div id=" »post-NO NUMERIC NOISE KEY" 1001 » no numeric noise key 1000>
<?php the_content();?>
</div>
Exclude certain post formats from RSS feeds
Useful when publishing certain formats of short articles or articles relating to moments of mood – I am thinking in particular of statuses, a-side, chat, etc. – this feature discovered here will allow you not to “pollute” your RSS feed with alternative content. Indeed, if you have a lot of readers who follow your RSS feed, they risk quickly being disconcerted by an influx of news from post formats.
Replace “post-format-status” or “aside” with the post formats you want to exclude.
functions.php:
// Execute certain post formats from RSS feeds:
function exclude_post_formats_from_feeds( &$wp_query ) {
// If feed query:
if ($wp_query->is_feed()) {
// Array of post formats to exclude, by slug,
// example: “post-format-{format}”
$post_formats_to_exclude = array(
'post-format-status',
'post-format-aside'
);
// Extra query to hack onto the $wp_query object:
$extra_tax_query = array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => $post_formats_to_exclude,
'operator' => 'NOT IN'
);
$tax_query = $wp_query->get( 'tax_query' );
if (is_array($tax_query)) {
$tax_query = $tax_query + $extra_tax_query;
} else {
$tax_query = array( $extra_tax_query );
}
$wp_query->set('tax_query', $tax_query);
}
}
10 Responses
Hello,
I am taking the time to leave you a comment to congratulate you on the quality of this post: I have just discovered the post formats (my theme not being compatible, I had not been alerted to this new functionality), and your tutorial answers exactly, simply and precisely the questions I asked myself. Hat 🙂
Many thanks, it’s nice to see work rewarded with positive feedback! 😉
It was nothing; I'm adding another layer, but your agency's blog really stands out for its quality - not to mention the truly mastered design. Frankly, the day I need a service I will seriously consider talking to you about my project. Same if I come across someone looking for an agency.
Thank you very much Baptiste, we have been working on the Internet for a long time but this site is very recent, and I make sure to add relevant and complementary content to what is already on the net 😉 The theme, on the other hand, is signed by an excellent graphic designer WordPress, available on the web, although customized by me regarding the post formats precisely :)
In any case, thank you for relaying our content, ironically, I was doing the same with my friends when I saw your forum created a few years ago...!
Good morning,
I actually have a theme with lots of different formats for the articles but if I choose one or the other it doesn't change except the gallery format but I only see the image and not the extract of the article
It's weird because on another blog I chose the gallery format and I got the photo with the extract from the article
Thanks for your help
A priori the get_post_format_strings function allows you to manage and modify predefined formats
Good morning,
Unable to activate post format with my theme.
I tried everything, tried so much that I made a bad move and the entire blog was deleted.
I lost everything but I'm still deciding, I want to put the gallery format for my posts but I really can't do it.
I followed your tutorial but I'm having trouble.
Pls help me
Hello
Your article seems very clear to me, but I can choose format modes in my electricity blog articles, however nothing happens when I activate a format!
Hello, do you know if this post formats feature allows you to open posts in a letterbox directly from their thumbnail on the home page?
This website is really informative!
Keep posting.