How to Add a Featured Image to a Genesis Post or Page

Most Genesis templates provide the ability to add a WordPress Featured Image to a post and to display the Featured Image on the Blog page. But what if you also want to display a Featured Image on a single post or page? And what if you want to use a Featured image with a size different than the Featured Image used on your blog page? The following tutorial explains how to add a featured image to a genesis post or page.

I ran into this exact problem last week and spent an hour searching for an answer. I found several links that supposedly provided an answer, but they required a paid subscription to view it. Fortunately, I found one link that provided the code to display a Featured Image on top of the post. With a bit of experimentation, I figured out how to put a Featured Image anywhere in a post or a page.

IMPORTANT: This tutorial is for Html5 Genesis templates only. You can use it on XHTML Genesis templates, but you need to look up the correct Genesis XHTML hook.

To add a Featured Image to both post and page, add the following code to your theme’s functions.php file:

/* Code to Display Featured Image on top of the post */
add_action( 'genesis_entry_content', 'featured_post_image', 8 );
function featured_post_image() {
  if ( !is_singular( array( 'post', 'page' ) ))  return;
	the_post_thumbnail('large'); /*you can use medium, large or a custom size */
}

The code above will allow you to add a featured image to a single post or page. Note that this will not affect the blog page featured images sizes. Furthermore, it will not automatically add a featured image to every post and page. The post or page must already have a featured image assigned to it.

Featured Image Code Options

Featured Image Only on Page

Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;

With this: if ( !is_singular( ‘page’ ) return;

Featured Image Only on Post

Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;

With this: if ( !is_singular( ‘post’ ) return;

Use a Different Image Size

Replace This: the_post_thumbnail(‘large’);

For example, with this: the_post_thumbnail(‘medium’);
Where medium is the featured image size.

You can find your default image size in the WordPress Admin page under Settings > Media. The default WordPress image sizes are as follows:

• thumbnail
• medium
• large
• full (original size of the image when you upload it)

Furthermore, it is likely that your Genesis theme has custom image sizes. To find out what these are, open your themes function.php and search for add_image_size.
For example:

//* Add new image sizes
add_image_size( 'home-bottom', 150, 150, TRUE );
add_image_size( 'home-middle', 332, 190, TRUE );
add_image_size( 'home-top', 700, 400, TRUE );

 Change the Image Insertion Point

In the code I provided, the image is inserted below the title and header info, at the top of the content, inside the entry-content div. See the image below.

To move the image above the title, change this:

add_action( 'genesis_entry_content', 'featured_post_image', 8 );

To this:

add_action( 'genesis_before_entry', 'featured_post_image', 8 );

See the image below.