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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Full Width Banner Image on Posts page | |
| --------------------------------------------- */ | |
| .blog-banner { | |
| text-align: center; | |
| } | |
| .blog-banner img { | |
| width: 100%; | |
| vertical-align: top; | |
| } |
to get, for example:
