Add and Style Post Formats in Your Genesis Child Theme

This tutorial will show you how to add and style post formats in your Genesis child theme.

So what are post formats?

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.

WordPress Codex

But really, adding post formats to your WordPress website just allows you to easily style different posts. Some other platforms, such as Tumblr do this automatically. The default WordPress theme Twenty Thirteen is styled using post formats.

Add Theme Support

Open your Genesis child theme functions.php in a text editor. Add the code below.

<?php // Remove this line before adding to functions.php

// Add support for post formats
add_theme_support( 'post-formats', array(
	'aside',
	'audio',
	'chat',
	'gallery',
	'image',
	'link',
	'quote',
	'status',
	'video'
) )

If you know you will never use one of these formats, like “status”, for instance, you can remove it.
If you will want to use images to identify your different posts, you will also need to add the following:

<?php // Remove this line before adding to functions.php
// Add support for post format images
add_theme_support( 'genesis-post-format-images' );

You don’t need this last line, if you want to just style your post backgrounds with different colors, or if you want to use font icons, instead of images or image icons.

Add the Images

You will want to add some icons to this folder in your child-theme:
images/post-formats/

So if your child theme is Lifestyle Pro, you would add the images (post-formats) folder:
/wp-content/themes/lifestyle-pro/images/post-formats/

You can use any images you like, as long as they are added to the /images/post-formats/ folder, and as long as they use the same file names as the original.

Add a New Post

Once you’ve added the code and the image icons folder, you can go to the add new post screen. Over on the right sidebar, you’ll see a new area called Format. You can choose the format of the post, for instance, quote or video.

Now look at your blog. The image icons will be just above the post title.

Add Some Styles

You can style the image icons, as you like. For instance, you could just move them over to the left. Add this CSS to Appearance > Customize > Additional CSS.

/* Align icon over left border */
img.post-format-image {
	display: block;
	margin-left: -90px;
}

If you wanted to center the image icons, you could use:

/* Center icon above title */
img.post-format-image {
	display: block;
	margin: 0 auto 30px auto;
}

Or you could move them left at larger screen sizes, and center them on smaller screens, like so:

/* Align icon over left border */
img.post-format-image {
	display: block;
	margin-left: -90px;
}

@media only screen and (max-width: 960px) {
        /* Center icon above title */
	img.post-format-image {
		display: block;
		margin: 0 auto 30px auto;
	}
}

Use Dashicons Instead of Image Icons

You can also use dashicons to style your post formats.
For this style option, you don’t need to add the line that adds theme support for post format images in your functions.php:
add_theme_support( 'genesis-post-format-images' );

Enqueue Dashicons

Many Genesis child themes already have dashicons enqueued. If yours doesn’t, you’ll need to follow another tutorial to enqueue the dashicons.

For this tutorial, I added the dashicons to the top of each post on blog and single posts (not pages). (See image at top of post.) The default icon of “\f464” (the pencil) is used in case no post format is checked. There are also other dashicons that you could choose for each of the formats, and for the default.

Add CSS

/* CSS to Add Top Border with Dashicon */
.blog .entry:first-of-type,
.page-template-page_blog .entry:first-of-type,
.single .entry:first-of-type {
	margin-top: 40px;
}

.blog .entry,
.page-template-page_blog .entry,
.single .entry {
    border-top: 1px solid #ccc;
    position: relative;
    margin-bottom: 80px;
}

.blog .entry:before,
.page-template-page_blog .entry:before,
.single .entry:before {
    background-color: #f5f5f5;
    border: 2px solid #ccc;
    border-radius: 50%; 
    color: #999;
    content: "\f464"; /* adds dashicon */
    display: block;
    -webkit-font-smoothing: antialiased;
    font: normal 48px/1 'dashicons';
    height: 60px;
    line-height: 60px;
    position: absolute;
      top: -30px;
      left: 50%;
    margin-left: -30px;
    text-align: center;
    width: 60px;
}

Then you will need to add the CSS for each of the formats.

.format-aside.entry:before {
	content: "\f123";
}

.format-audio.entry:before {
	content: "\f127";
}

.format-chat.entry:before {
	content: "\f125";
}

.format-gallery.entry:before {
	content: "\f161";
}

.format-image.entry:before {
	content: "\f128";
}

.format-link.entry:before {
	content: "\f103";
}

.format-quote.entry:before {
	content: "\f122";
}

.format-status.entry:before {
	content: "\f130";
}

.format-video.entry:before {
	content: "\f126";
}

Add Dashicons Before the Entry Title

You can add the dashicons just before the titles, instead of at the top of the post.

You would use the CSS below.

/* Add dashicons before titles */
.entry-title {
    display: inline-block;
}

.entry-title:before {
    color: #999;
    content: "\f464"; /*adds dashicon */
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 42px/1 'dashicons';
    margin-right: 10px;
    position: relative;
      top: 5px;
}

.format-aside .entry-title:before {
    content: "\f123";
}

.format-audio .entry-title:before {
    content: "\f127";
}

.format-chat .entry-title:before{
    content: "\f125";
}

.format-gallery .entry-title:before {
    content: "\f161";
}

.format-image .entry-title:before {
    content: "\f128";
}

.format-link .entry-title:before {
    content: "\f103";
}

.format-quote .entry-title:before {
    content: "\f122";
}

.format-status .entry-title:before {
    content: "\f130";
}

.format-video .entry-title:before {
    content: "\f126";
}

Note that the CSS above will add a dashicon to all your post and page titles. If you want to add them only to the titles for posts on the blog and single pages, you would use:

.blog .entry-title,
.page-template-page_blog .entry-title,
.single .entry-title

instead of .entry-title
and

.blog .entry-title:before,
.page-template-page_blog .entry-title:before,
.single .entry-title:before

instead of .entry-title:before

So there are lots of ways to add post formats to your Genesis child theme and to style them.

*** Updated to differentiate between posts and pages.