WordPress Post Format for Genesis

This is a step-by-step tutorial on how to add additional WordPress Post Format if you are using StudioPress’s Genesis Framework and a child theme.

We have already talked about what the new WordPress Post Formats are.   Genesis Framework is the premium (parent) theme  I use, together with a Genesis (from StudioPress) child theme of my choice.  Here at NetWebbing for instance, my child theme at time of writing is Prose Theme.

Adding WordPress Post Format for Genesis

Reminder: With a Genesis framework, you almost invariably never touch any of the files in your parent Genesis framework/theme.  You only ever want to work on files within your chosen Genesis child-theme.

For example, here at NetWebbing, I have the Genesis Framework theme installed, and the Genesis child-theme Prose which is installed and activated.  And I will only be making changes to files in Prose child-theme.

Steps: Adding Additional Post Formats to Genesis

1. Backup WP database: to be safe, do a backup of your WP (WordPress) database.
2. Backup functions.php: make a backup copy of your child-theme’s functions.php which should be in
   [your wordpress install folder]/wp-content/themes/[child-theme]/functions.php

3. Get Code to Add Post Formats

The best place to get this code is from Studio Press Post Format .  It will look like as per below.  Click on the “view raw” to get the code you can copy.

Get code to add WordPress Post Format

When you “view raw”, you will get the raw code which you can copy and then paste into our child-theme’s functions.php file.

Note: only copy the code as indicated by my pink box below.

code to copy for adding post format

4. Add Post Format code to your Child-Theme’s functions.php

Adding Post Format code to CHILD-THEME’S functions.php

Go to your WP admin area >> Appearance >> Editor

Make sure that you have your child-theme selected.

Then select the functions.php

Add the code for post format that you just copied to this functions.php file.

(I added it to the bottom of my file.)

Then “update file” to save it.

WordPress Post Formats

Now when you go to add a new post or edit an existing one, you will see that you have new post formats available.

Now at this stage you can already use these various WordPress Post Format for any of you posts.

However if you want a visual marker (or icon) to distinguish the different types of post formats, then that is possible too.

5. Get Post Format Icons

Rafal Tomal, lead designer at Copyblogger Media has kindly provided us with graphics we can use. Go to StudioPress Post Format Icons download and download the zip file.

Post Format Icons you can use. By Rafal Tomal

Save the downloaded zip file (post-format-icons.zip) to wherever you want to on your local computer.  Unzip it.

When you un-zip it, it will automatically create a folder like below:

downloaded WP Post Format Icons – unzipped

6. Upload to your Child-Theme images folder

Your child theme should be located at something like:

[your wordpress install folder]/wp-content/themes/[child-theme]/

We want to upload the indicated .png graphic files to

[your wordpress install folder]/wp-content/themes/[child-theme]/images/post-formats/

If you do not have the folder “post-formats”, then create that folder first in

[your wordpress install folder]/wp-content/themes/[child-theme]/images/

Once that is created, upload the .png icon graphic files to

[your wordpress install folder]/wp-content/themes/[child-theme]/images/post-formats/

7. Add Post Format Icons support to your Child-Theme’s functions.php
Copy the following code to enable your post format icons.

// Add support for post format images (for Genesis Framework only)
add_theme_support( 'genesis-post-format-images' );

Go to your WP admin area >> Appearance >> Editor

Make sure that you have your child-theme selected.

Then select the functions.php

Add the code above for icon support to the end this functions.php file (after the earlier post format code).

Then “update file” to save it.

That’s it. Once that is done, when you look at one of your posts, you will see a visual icon to identify the WordPress Post Format used for that post.

For example, this below is a post with an “aside” post format – showing the post format icons.

Example of an Aside post format

Please comment …

Did you find this useful?  Do you have another easier way of doing this?  Feel free to share your expertise and experience. Sharing makes our world a better place 🙂