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