Featured image section for Pages in Genesis

In Genesis Slack chat, a user asked:

Hi Everyone, any ideas on how I would create a featured image area above a page in the enterprise pro theme that looks like this : http://puu.sh/lZpz2/954b84e870.png

In this article I share the code for adding a section having breadcrumbs, title and excerpt on the left and featured image on the right below header on static Pages in Genesis.

Step 1

Add the following in child theme’s functions.php:

// Enables the Excerpt meta box in Page edit screen.
function wpcodex_add_excerpt_support_for_pages() {
	add_post_type_support( 'page', 'excerpt' );
}
add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' );

// Register a custom image size for featured images on Pages
add_image_size( 'page-featured', 560, 175, true );

Regenerate thumbnails.

Step 2

Create a file named page.php in the child theme directory having the following code:

add_action( 'genesis_after_header', 'sk_featured_section_pages' );
function sk_featured_section_pages() { ?>

<div class="featured-section">
<div class="wrap">
<div class="one-half first">
<?php genesis_do_breadcrumbs();
genesis_do_post_title();
the_excerpt(); ?>
</div>
<div class="one-half">
<?php genesis_image( 'size=page-featured' ); ?>
</div>
</div>
</div>

<?php }

// Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

// Remove entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

// Modify breadcrumb arguments
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {

$args['sep'] = ' > ';
$args['labels']['prefix'] = '';

return $args;

}

genesis();

Step 3

Add the following in child theme’s style.css:

.featured-section {
	padding: 30px 0;
	background-color: #ededed;
	border-bottom: 1px solid #d2d2d2;
}

.featured-section .breadcrumb {
	margin-bottom: 10px;
}

.featured-section .entry-title {
	margin-bottom: 20px;
}