Mike vs Web: the blog and projects of a web developer fascinated by the web and all its technical greatness.

Posting and Toasting with WordPress Formats

This tutorial is going to be about different ways to display your WordPress posts based on their Post Format. We’re going to set up 2 custom templates and 1 default that will be assigned to posts based on a switch statement.

What an amazing finish to the NCAA Final Four! Just like Louisville and Michigan, impressively showed us different ways to put points on the scoreboard..

postin-and-toastin

..this tutorial is going to be about different ways to display your WordPress posts based on their Post Format. We’re going to set up 2 custom templates and 1 default that will be assigned to posts based on a switch statement.

What Are Post Formats?

Post Formats have been part of Wordress since 3.1, a.k.a. “Reinhardt.” They allow you to choose a format for your post. It’s not a required feature, but can be very useful for controlling how you want a post displayed. There are 9 different formats to choose from:

  1. Standard
  2. Aside
  3. Gallery
  4. Link
  5. Image
  6. Quote
  7. Status
  8. Video
  9. Audio
  10. Chat

When you log into your WordPress site, go to Posts->Add New and you should see this on the right sidebar:

post-format-section

I Don’t See That!

If it’s not in your sidebar, than your theme may not support it. You may have to spend a lot of money and get a brand new theme… or simply add this to your functions.php file:

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

This will add all the Post Format options to your site. You can choose to only use the ones that you require. For this tutorial, we’re only going to add this to our functions.php:

add_theme_support( 'post-formats', array( 
    'quote', 
    'status' ) 
);

Let The Tutorial Begin

After making sure your theme allows you to assign Post Formats to your posts, we’re going to start editing the WordPress Loop in our index.php file.

Here is a very basic loop. It’s going to display the post’s title that links, and an excerpt. If there are no posts to display it will show a Star Wars influenced message.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="post-<?php the_ID(); ?>" class="entry">
    <h2><a href="<?php the_permalink() ?>">
        <?php the_title(); ?>
    </a></h2>
    <?php the_excerpt(); ?>
</div>
				
<?php endwhile; else : ?>
    <h3>These aren\'t the posts you\'re looking for.</h3>
<?php endif; ?>

To keep things tidy and organized, we are going to add a Folder in our theme’s directory called post-formats. This is where we are going to store our templates. We are going to create a template for status, quote, and a default. It should look like so:

post-formats-folder

Template Creating Time!

Here is what our templates will look like:

status.php

<div id="post-<?php the_ID(); ?>" class="entry">
    <h2>I'm Feeling,</h2>
    <?php the_excerpt(); ?>
</div>

quote.php

<div id="post-<?php the_ID(); ?>" class="entry">
    <blockquote>
      <?php the_content(); ?>
    </blockquote>
</div>

default.php

<div id="post-<?php the_ID(); ?>" class="entry">
    <h2><a href="<?php the_permalink() ?>">
        <?php the_title(); ?>
    </a></h2>
    <?php the_excerpt(); ?>
</div>

Next, we’re going to need a function that allows to get the Post Format from a post. We only need it in string format, so get_post_format() will be perfect.

With a switch statement, we can customize how the post displays based on its Post Format like so:

switch(get_post_format()) {
  // Quote
  case("quote"):
    include 'post-formats/quote.php';
    break;
  // Status
  case("status"):
    include 'post-formats/status.php';
    break;
  default:
    include 'post-formats/default.php';
}

With get_post_format(), we can very easily find our post’s format and have it change based on what format we assigned it. You can have of fun with by having posts display in a customized manner when showing quotes, statuses, videos, images and even adding social media specific to the format.

I hope you enjoyed this tutorial and best of luck posting and toasting your own WordPress posts.

The Complete Loop

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

switch(get_post_format()) {
  // Quote
  case("quote"):
    include 'post-formats/quote.php';
    break;
  // Status
  case("status"):
    include 'post-formats/status.php';
    break;
  default:
    include 'post-formats/default.php';
}
				
<?php endwhile; else : ?>
    <h3>These aren\'t the posts you\'re looking for.</h3>
<?php endif; ?>