How to display Featured image before entry content on Posts and Pages in Genesis

Posted on
5/5 - (234 votes)

Polly in the GenesisWP Facebook group wanted to know how Featured images attached to Posts and Pages can be shown automatically above the content in Genesis.

Step 1

Add the following at the end of child theme’s functions.php:

// Register a custom image size for Singular Featured images
add_image_size( 'singular-featured-thumb', 800, 250, true );

add_action( 'genesis_before_entry', 'sk_display_featured_image' );
function sk_display_featured_image() {
if ( ! is_singular( array( 'post', 'page' ) ) ) {
return;
}
if ( ! has_post_thumbnail() ) {
return;
}
// Display featured image above content
echo '<div class="singular-featured-image">';
genesis_image( array( 'size' => 'singular-featured-thumb' ) );
echo '</div>';
}

Step 2

Add the following in child theme’s style.css and modify depending on which child theme is active:

.singular-featured-image img {
	vertical-align: top;
}

@media only screen and (max-width: 800px) {
	.singular-featured-image {
		margin-bottom: 40px;
	}
}