Supporting Post Formats

The Retraceur software offers a list of 11 Post Formats: aside, audio, chat, code, gallery, image, link, quote, status, video & standard (which is the default post format). A Retraceur theme can “opt-in” to support 1 or more Post Formats from its functions.php file. For instance the “Point” theme (which is the default Retraceur theme) supports 4 Post Formats: link, status, image, quote (the standard Post Format is always included as soon as a theme opted-in for the Post Formats feature).

Opting in Post Formats

If it doesn’t already exists, add a functions.php file into your theme’s folder to put the following code in it (don’t forget to eventually add the PHP opening tag at the top of your file!).

functions.php

/**
 * Set up Post Formats support.
 */
function your_theme_setup() {

  // Opting in Post Formats.
  add_theme_support( 'post-formats', array( 'link', 'status', 'image' ) );
}
add_action( 'after_setup_theme', 'your_theme_setup' );

The boxed code indicates that the theme supports 3 post formats and the next time Retraceur displays the site dashboard, this code will generate the Post Formats administration screen to allow site administrators to customize the name, description and URL portion of each of the supported formats.

Editing your theme generic templates

The key benefit of this Post Formats feature is to let themes use a dedicated layout for each format. To do so, you can first review some generic templates such as the index.html one which by default is showing the published posts. Retraceur provides a specific block to let you decide which post formats will display this block inner blocks: it’s the core/post-format-part block.

index.html

<!-- wp:query -->
  <!-- wp:post-template -->
    <!-- wp:post-format-part {"include":"standard"} -->
      <!-- wp:post-title {"isLink":true,"level":2} /-->
    <!-- /wp:post-format-part -->
    <!-- wp:post-format-part {"include":"image"} -->
      <!-- wp:post-format-name {"isLink":true,"level":2,"outputId":true} /-->
    <!-- /wp:post-format-part -->
  <!-- /wp:post-template -->
<!-- /wp:query -->

Let’s say you published 2 posts, a standard one having “My beautiful post” as title and another post using the image Post Format containing an image, the index.html template will loop into the published posts and only display “My beautiful post” for the standard one and only display “Image #2” (the Post Format name and the post ID) for the one using the image Post Format.

Note

The core/post-format-name block is another block provided by Retraceur to output the singular name of the post’s Post Format as defined into the Post Formats administration screen.

Adding templates specific to Post Formats

Your theme can also include a template to display a loop of posts all having the image Post Format (eg: when visiting the site.url/type/images URL of your site) differently than all other loops. To achieve this, you’ll need to create a new template whose name is following this structure: taxonomy-post_format-post-format-{postFormatKey}.html.

For the image Post Format, it’s taxonomy-post_format-post-format-image.html. For instance, the “Point” theme is providing this template to show posts in a grid.

Finally, your theme may include a specific template to output the single view of a Post Format: this can save you headaches compared to using a complex core/post-format-part blocks combination inside the generic single.html template!

The single template file name for Post Formats needs to follow this structure: single-post-format-{postFormatKey}.html.

For instance, the “Point” theme is providing a specific template to show posts having the quote Post Format.