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:
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.
Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;
With this: if ( !is_singular( ‘page’ ) return;
Replace this: if ( !is_singular( array( ‘post’, ‘page’ ) )) return;
With this: if ( !is_singular( ‘post’ ) return;
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:
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 );
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.