Add and Style Post Formats in Your Genesis Child Theme

post formats with centered dashicons

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

choose post format on post edit screen

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.

default post format image icon

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

Add Some Styles

post formats with image icons left


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;
}
center post format images


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.

icons before title for post formats


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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

11 responses to “Add and Style Post Formats in Your Genesis Child Theme”

  1. Thanks for the comprehensive tutorial! I appreciate your generosity. I tried to modify the CSS snippet so I can show the dashicon below the featured image. But i couldn’t get it right on the blog home page or archive pages. I wondering if you could take a look at my site (www.topleague.in/blog) and let me know what the issue is.

    Also, what should I do to prevent the post formats dashicons from appearing on the pages?

    Looking forward to your help.

    Thanks

    • Marcy Diaz says:

      Thanks for your comment.
      The .entry class is for the entire post. If you want the dashicon inside the post, then you would need to use different CSS.
      Instead of
      .entry:before
      You could use
      .entry-content:before

      And instead of each of the individual formats
      .format-quote.entry:before
      you could use
      .format-quote .entry-content:before
      Note the space after .format-quote for this CSS.

      You may need additional padding or margins too.

      • Susanta says:

        I tried .entry-content:before but it’s still not working. Plus, how do I remove the dashicon to appear on my pages? Thanks for your help!

        • Marcy Diaz says:

          You don’t have dashicons added to .entry-content:before, only to .entry:before

          On the blog page, you have the image as part of the .entry, but on the single post the image is above the .entry. That’s why the dashicon is in different places between the blog page and the single post.

          To remove the dashicons, just remove all the CSS that you added for the dashicons.

          • Susanta says:

            Thanks for your reply! Is there a way I could make the dashicon appear on the blog page exactly the way it appears on the single post?

            Also, I still can’t figure out how to make it disappear on the pages for example: http://topleague.in/

            Thanks for your help!

          • Marcy Diaz says:

            It looks like you have them removed from your pages; they are only on the single posts.

            (I edited the post to differentiate between adding the dashicons to posts only, and not pages.)

  2. Marcy Diaz says:

    I edited the post to differentiate between adding the dashicons to posts only, and not pages.

  3. Could you share how to have an image show full size on an archive page using post format in genesis? Right now I have excerpts shown on the blog page which I like but if I have just an image posted in that date and no words I would like on the blog page/ archives/categories page to show the image at the full size so you don’t have to click to see it?

    Thank you for your help!

    • Marcy Diaz says:

      I don’t see that you have any post-formats on your site. Your example is categories, not post formats. You can set the image size under Genesis > Theme Settings and then the Content Archives Section for Category Pages. The image that is used is the featured image or the first image in the post.

  4. Damon Moats says:

    A very informative article, thanks. There’s a very good WordPress Post Formats beginner’s guide on wpblog to learn all about Post Formats, for better understanding do have a look at it too. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *