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

Posted on

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;
	}
}