How to Display Featured Image in Genesis Child Themes

This tutorial enables you to display featured image in Genesis Child Themes. We all know that images are extremely important for enhancing the appearance of your website, and posts. It benefits you in various ways including increasing the unique visitors to your website. This is the reason the most famous and advanced CMS- WordPress has an in-built option for the featured image.

Some of you might have noticed that the featured image is not displayed on the single post of the Genesis child themes. I recently updated to the latest version of the Genesis child theme and I was surprised to see that the featured image section was no longer there.

I started exploring the StudioPress documentation section for the single post featured image. Luckily, I fixed the issue in a few minutes by copy-pasting a few lines of PHP code.

Code to Display Featured Image in Genesis Child Theme

You can simply copy-paste these PHP codes in the functions.php file of your Genesis Child Theme. The code below will enable you to display the featured post image, before or after your title on single posts.

Display Featured Image After Title

The PHP code below displays the featured image after the post title on a single post.

add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image Before Title

The PHP code below displays the featured image before the post title on a single post.

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image on Static Pages

To display the featured image on static single pages, just copy-paste the code given below:

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular( 'page' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Display Featured Image on Static Pages & Single Posts

If you want to display featured image on both static pages and single posts, add the PHP code given below:

add_action( 'genesis_entry_header', 'single_post_featured_image', 5 );

function single_post_featured_image() {
	
	if ( ! is_singular() )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

Change Image Size

The PHP code below helps you change the size of the featured image according to your Media Settings. You can use other default sizes configured in Settings > Media.

• thumbnail
• medium
• large
• full

add_action( 'genesis_entry_header', 'single_post_featured_image', 15 );

function single_post_featured_image() {
if ( ! is_singular( 'post' ) )
		return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) );
printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	
}

To use any other custom size, use the code below:

add_image_size( 'portfolio', 540, 340, TRUE );

Using Old XHTML Loop Hooks

If you are still running XHTML, use the old Loop Hooks:

add_action( 'genesis_before_post_title', 'single_post_featured_image' );

function single_post_featured_image() {
	
	if ( ! is_singular( 'post' ) )
		return;
	
	$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );
	}

Space Between Title & Image

To add a margin between the title and the image you just need to add a single line code to your style.css file or custom CSS file.

.single .post-image {
margin-bottom: 20px;
}

You can adjust the margin-bottom property by increasing or decreasing its value.

Align Featured Image on Single Post

To align the featured image on the right, use the following CSS:

.single .post-image {
    float:right; 
    margin:0 0 1em 1em;
    width: 150px;
    height: 150px;
}

If you want to use the same styling without writing the CSS, you can use the PHP code (alignright class) inside the PHP file.

'class' => 'alignright'

To align the featured image on the left, use the following CSS:

.single .post-image {
    float:left; 
    margin: 1em 1em 0 0;
    width: 300px;
    height: 300px;
}

To execute the same without writing CSS, use the PHP code below:

'class' => 'alignleft'

Remove a href Link from Featured Image

To remove the link from the featured images, simply replace this code

$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	printf( '%s', get_permalink(), the_title_attribute( 'echo=0' ), $img );

with this:

$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) );
	echo $img;

Alternate Method: Display Featured Image for Genesis Plugin

Display Featured Image for Genesis Plugin is an easiest way to display featured image in Genesis Child themes. The plugin comes up with various features that help you to display lovely large and full-width images.

Features include:

• display the featured image as a banner (screen width) image.
• display the featured image above your post/page content.
• display nothing if the featured image width is less than or equal to your media Setting.

All you need is to navigate to plugins » add new.

Search for "Display Featured Image for Genesis", install and activate the plugin.

You can play with the configuration settings to get featured image as screen width and large.

That's it!

I hope this would help you to display featured image in Genesis Child Themes. If you face any difficulty, ask me in the comment section below.