post

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.

Sidenote: In case you don’t know what the parent-child power combo inherent in Genesis is all about, have a read of why I Love Genesis Themes for WordPress and why so many top bloggers recommend it.

 

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

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

code to copy for adding post format

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

Adding Post Format code to 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

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.

Tip: if you don’t see the Format box (to the right of your post-edit area), check that the Formats checkbox is ticked in the “Screen Options” pull down (at the top of your edit-post area).

 

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

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

downloaded WP Post Format Icons – unzipped

Tip: you can see that a .psd has been kindly included.  With this, if you wish, you can customize your own icons using this as a base. You do not need to upload the .psd file.

 

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

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 :)


Reference for those who need more:

Enjoyed this post?

Easily subscribe to keep get all new postings via email. No We Don't Serve Spam - Ever!

Comments

  1. I am not sure I understand the point of using the Post Format if it looks just like any other Post except has an icon indicating it is “different”. Am I missing something?

    I appreciate the instructions though!

    Landon

    • Helena Asmus Lim says:

      Hi Landon,
      great question. At the moment, I think you are right: there does not seem to be much point in having various Post Formats. Right now, I don’t use them for much else than having those various icons so that I can quickly and easily determine what kinds of post I have published over time. However I imagine (but as yet, have had no time to research) that one could CSS-style various formats so that they can look different. But even before that, in WordPress’s Appearance > Menus functionality, once you have the Post Formats, you can choose to have your various Post Formats appear in a menu (navigation) for your site. I imagine that with a little planning, it could be quite handy to have a Menu with separate Videos, Asides, Quotes, Gallery etc – all automatically done once you have assigned the correct Post Formats and created a menu based on said post formats.
      It gets a bit easier to “see” this when the Post Formats for WordPress have been installed. Hope that helps. Thanks again for coming by :)

  2. Great instructions. I implemented it into my Genesis Metro theme and it worked but when I am trying to add a new post, for example, when selecting the “Video” format, I am not presented with a field to input/embed a video. Any Suggestions?

    • Helena Asmus Lim says:

      Hi Ren, thanks for your comment. I think I was a bit confused with that as well. But now, I think that choosing those various formats does not change the FORMAT of your post – i.e. what you can post. Nor does it give you extra/unique fields for posting different items (e.g. images, videos).
      I believe that for some themes, the layout might actually vary. But for most themes (like mine), nothing much changes except that there is a different icon attached to each post indicating what type of post it predominantly is.
      So in a way, there is almost no huge difference in having these various post format indicators. I use it mainly coz on the front page, one can quickly see whether a post is a video orientated post, images mainly, or standard blog etc. – if that makes sense?
      Maybe these should have been more correctly named Post Format INDICATORS.

Your Comments? Tips to share?