How to add a Full Width Image below Header on Blog page in Genesis

Hristo asks,

Hey, I would like to add a section to the blog page – a full width banner. Of course, I can edit the child theme, do it manually, etc but I was wondering if there’s a proper Genesis way to do this

It is assumed that you have set a static Page as Posts page at Settings > Reading versus using the built-in Blog Template of Genesis. Thanks Bill.

The beauty of Genesis is the vast number of hooks present throughout the page in various views of a WordPress site.

In this case genesis_after_header hook can be used to insert the HTML markup for displaying image banner below the Header ( + Navigation) like so:

add_action( 'genesis_after_header', 'sk_blog_banner' );
/**
* Full Width Banner Image on Posts page
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/
*/
function sk_blog_banner() {
if ( ! is_home() ) {
return;
} ?>

<div class="blog-banner">
<img src="http://placehold.it/1600x222&text=Banner" alt="Banner" />
</div>

<?php
}

Set your desired banner image’s URL and alt text in line 14.

Then add this in child theme’s style.css:

/* Full Width Banner Image on Posts page
--------------------------------------------- */

.blog-banner {
	text-align: center;
}

.blog-banner img {
	width: 100%;
	vertical-align: top;
}