{"id":3722,"date":"2011-09-14T21:32:16","date_gmt":"2011-09-14T19:32:16","guid":{"rendered":"https:\/\/tulipemedia.com\/?p=345"},"modified":"2025-05-28T15:19:54","modified_gmt":"2025-05-28T13:19:54","slug":"tutorial-and-guide-on-wordpress-post-formats","status":"publish","type":"post","link":"https:\/\/tulipemedia.com\/en\/tutoriel-et-guide-sur-les-post-formats-de-wordpress\/","title":{"rendered":"Tutorial and guide on WordPress post formats"},"content":{"rendered":"<blockquote><p>THE <strong>custom post formats<\/strong> of <strong>WordPress<\/strong> allow you to transform a classic WordPress blog into a real fun publishing platform. Let&#039;s see how it works!<\/p><\/blockquote>\n<p><!--more--><\/p>\n<h2>Definition of Post formats<\/h2>\n<h3>Post formats: kesako?<\/h3>\n<p>THE <strong>post formats<\/strong> of <strong>WordPress<\/strong> 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 <strong>subdivide articles into several types<\/strong>, so as to present them differently on your blog depending on what they are.<\/p>\n<p>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:<\/p>\n<ul>\n<li>Default: normal item.<\/li>\n<li>aside: quick article.<\/li>\n<li>cat: dialogue.<\/li>\n<li>gallery (gallery): photo gallery.<\/li>\n<li>link: one or more external links.<\/li>\n<li>image: simple image.<\/li>\n<li>quote<\/li>\n<li>status: A status like on Facebook or Twitter for example.<\/li>\n<li>video<\/li>\n<li>audio<\/li>\n<\/ul>\n<p>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 <a href=\"http:\/\/themes.digitonik.com\/tumbleten\/\" target=\"_blank\" rel=\"noopener\">Tumble Ten theme<\/a> for example (see left image) shows very explicitly what is possible with Post formats.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h3>Difference between Post formats and Custom Post Types<\/h3>\n<p>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&#039;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.<\/p>\n<p>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.<\/p>\n<h2>Install Post formats on your WordPress blog<\/h2>\n<p>Installing post formats on your blog requires following the following steps. These do not constitute a repository, and several implementation methods exist.<\/p>\n<h3>Enable custom post formats<\/h3>\n<p>To activate custom post formats on your WordPress theme, go to your theme&#039;s functions.php file to add the lines below. You can remove post formats that you don&#039;t want to use.<\/p>\n<p><em>add_theme_support(<\/em><br \/>\n<em>&#039;post-formats&#039;, array(<\/em><br \/>\n<em>&#039;aside&#039;,<\/em><br \/>\n<em>&#039;cat&#039;,<\/em><br \/>\n<em>&#039;gallery&#039;,<\/em><br \/>\n<em>&#039;picture&#039;,<\/em><br \/>\n<em>&#039;link&#039;,<\/em><br \/>\n<em>&#039;quote&#039;,<\/em><br \/>\n<em>&#039;status&#039;,<\/em><br \/>\n<em>&#039;video&#039;,<\/em><br \/>\n<em>&#039;audio&#039;<\/em><br \/>\n<em>)<\/em><br \/>\n<em>);<\/em><\/p>\n<p>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:<\/p>\n<p>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 &quot;Chat&quot; 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.<\/p>\n<p>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&#039;t worry, I&#039;ll show you how to do it!<\/p>\n<h3>has_post_format() VS get_template_part<\/h3>\n<p>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.<\/p>\n<h4>The has_post_format() function<\/h4>\n<p>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 :)<\/p>\n<p>loop.php and single.php<\/p>\n<p><em>if (has_post_format(&#039;aside&#039;)) {<\/em><br \/>\n<em>\/\/show code for quick posts<\/em><br \/>\n<em>} elseif (has_post_format(&#039;chat&#039;)) {<\/em><br \/>\n<em>\/\/display the code relating to chat articles<\/em><br \/>\n<em>} elseif (has_post_format(&#039;gallery&#039;)) { \/\/display the code relating to the post&#039;s photo gallery<\/em><br \/>\n<em>} else { \/\/display the standard code of your theme for displaying your articles<\/em><br \/>\n<em>}<\/em><\/p>\n<p><strong>Please note: this code must still be used in all cases on the single.php file, even if you choose the method below.<\/strong><\/p>\n<h4>The get_template_part() function<\/h4>\n<p>In a well-stocked theme file filled with conditional structures, the method cited above is not very methodical. So we&#039;re going to split the code to make it as clear as possible.<\/p>\n<p>loop.php<\/p>\n<p><em>if (have_posts()):<\/em><br \/>\n<em>while (have_posts()): the_post();<\/em><br \/>\n<em>if(!get_post_format()) {<\/em><br \/>\n<em>get_template_part(&#039;format&#039;, &#039;standard&#039;);<\/em><br \/>\n<em>} else {<\/em><br \/>\n<em>get_template_part(&#039;format&#039;, get_post_format());<\/em><br \/>\n<em>}<\/em><br \/>\n<em>endwhile;<\/em><\/p>\n<p>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.<\/p>\n<p>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 \u201cen passant\u201d, etc\u2026<\/p>\n<h3>The post_class() function<\/h3>\n<p>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\u2019s zoom in on the aside format for example:<\/p>\n<p><em>if (has_post_format(&#039;aside&#039;)) {<\/em><br \/>\n<em>&lt;div id=&quot;&nbsp;&raquo;post-NO NUMERIC NOISE KEY&quot; 1001&nbsp;&raquo; no numeric noise key 1000&gt;<\/em><br \/>\n<em>&lt;?php the_content();?&gt;<\/em><br \/>\n<em>&lt;\/div&gt;<\/em><br \/>\n<em>} else { \/\/display the standard code of your theme for displaying your articles<\/em><br \/>\n<em>}<\/em><\/p>\n<p>The post_class() function will affiliate the class <strong>.format-aside<\/strong> to your post \u201cin passing\u201d for example.<\/p>\n<h3>Customize the style of article formats via CSS file<\/h3>\n<p>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 :<\/p>\n<p><em>.format-aside h2 {font-size: 2em}<\/em><br \/>\n<em>.format-aside {<\/em><br \/>\n<em>background: url(images\/aside.png) -118px 14px;<\/em><br \/>\n<em>-webkit-border-radius: 10px;<\/em><br \/>\n<em>-moz-border-radius: 10px;<\/em><br \/>\n<em>border-radius: 10px;<\/em><br \/>\n<em>padding: 15px 20px 5px;<\/em><br \/>\n<em>position: relative; }<\/em><\/p>\n<p>Via this code, we tell \u201cen passant\u201d 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!<\/p>\n<h3>Summary example<\/h3>\n<p>Here is a summary turnkey code to put the ideas in place:<\/p>\n<p>In the loop.php (or index.php) file where the content is displayed:<\/p>\n<p><em>if (have_posts()):<\/em><br \/>\n<em>while (have_posts()): the_post();<\/em><br \/>\n<em>if(!get_post_format()) { get_template_part(&#039;format&#039;, &#039;standard&#039;);<\/em><br \/>\n<em>} else { get_template_part(&#039;format&#039;, get_post_format());<\/em><br \/>\n<em>}<\/em><br \/>\n<em>endwhile;<\/em><br \/>\n<em>endif;<\/em><\/p>\n<p>standard-format.php:<\/p>\n<p><em>The default content of your theme for displaying your articles.<\/em><\/p>\n<p>format-aside.php:<\/p>\n<p><em>&lt;div id=&quot;&nbsp;&raquo;post-NO NUMERIC NOISE KEY&quot; 1001&nbsp;&raquo; no numeric noise key 1000&gt;<\/em><br \/>\n<em>&lt;?php the_content();?&gt;<\/em><br \/>\n<em>&lt;\/div&gt;<\/em><\/p>\n<h2>Exclude certain post formats from RSS feeds<\/h2>\n<p>Useful when publishing certain formats of short articles or articles relating to moments of mood \u2013 I am thinking in particular of statuses, a-side, chat, etc. \u2013 <a href=\"http:\/\/www.josscrowcroft.com\/2011\/code\/wordpress-exclude-post-formats-aside-status-from-rss-feeds\/\" target=\"_blank\" rel=\"noopener\">this feature discovered here<\/a> will allow you not to \u201cpollute\u201d 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.<\/p>\n<p>Replace \u201cpost-format-status\u201d or \u201caside\u201d with the post formats you want to exclude.<\/p>\n<p>functions.php:<\/p>\n<p><em>\/\/ Execute certain post formats from RSS feeds:<\/em><br \/>\n<em>function exclude_post_formats_from_feeds( &amp;$wp_query ) {<\/em><\/p>\n<p><em>\/\/ If feed query:<\/em><br \/>\n<em>if ($wp_query-&gt;is_feed()) {<\/em><\/p>\n<p><em>\/\/ Array of post formats to exclude, by slug,<\/em><br \/>\n<em>\/\/ example: \u201cpost-format-{format}\u201d<\/em><br \/>\n<em>$post_formats_to_exclude = array(<\/em><br \/>\n<em>&#039;post-format-status&#039;,<\/em><br \/>\n<em>&#039;post-format-aside&#039;<\/em><br \/>\n<em>);<\/em><\/p>\n<p><em>\/\/ Extra query to hack onto the $wp_query object:<\/em><br \/>\n<em>$extra_tax_query = array(<\/em><br \/>\n<em>&#039;taxonomy&#039; =&gt; &#039;post_format&#039;,<\/em><br \/>\n<em>&#039;field&#039; =&gt; &#039;slug&#039;,<\/em><br \/>\n<em>&#039;terms&#039; =&gt; $post_formats_to_exclude,<\/em><br \/>\n<em>&#039;operator&#039; =&gt; &#039;NOT IN&#039;<\/em><br \/>\n<em>);<\/em><\/p>\n<p><em>$tax_query = $wp_query-&gt;get( &#039;tax_query&#039; );<\/em><br \/>\n<em>if (is_array($tax_query)) {<\/em><br \/>\n<em>$tax_query = $tax_query + $extra_tax_query;<\/em><br \/>\n<em>} else {<\/em><br \/>\n<em>$tax_query = array( $extra_tax_query );<\/em><br \/>\n<em>}<\/em><br \/>\n<em>$wp_query-&gt;set(&#039;tax_query&#039;, $tax_query);<\/em><br \/>\n<em>}<\/em><br \/>\n<em>}<\/em><\/p>","protected":false},"excerpt":{"rendered":"<p>How to transform a Wordpress theme into a real fun Tumblr-style blog using Custom Post Formats: personalized post formats. Follow the guide, and learn how to activate, install and use them on your theme!<\/p>","protected":false},"author":17,"featured_media":2386,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"chat","meta":{"footnotes":""},"categories":[5],"tags":[166],"class_list":["post-3722","post","type-post","status-publish","format-chat","has-post-thumbnail","hentry","category-wordpress","tag-tutoriels-wordpress","post_format-post-format-chat"],"_links":{"self":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/3722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/comments?post=3722"}],"version-history":[{"count":2,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/3722\/revisions"}],"predecessor-version":[{"id":4199,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/3722\/revisions\/4199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media\/2386"}],"wp:attachment":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media?parent=3722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/categories?post=3722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/tags?post=3722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}