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

Posted on Leave a comment
5/5 - (158 votes)

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
function sk_blog_banner() {
if ( ! is_home() ) {
} ?>

<div class="blog-banner">
<img src="" alt="Banner" />


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;
Leave a Reply

Your email address will not be published. Required fields are marked *