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:
How would you do this in Dynamik?
Here you go: http://sridharkatakam.com/how-to-add-a-full-width-image-below-header-on-blog-page-in-dynamik/
[…] the comments section of How to add a Full Width Image below Header on Blog page in Genesis, a user […]
This is a great tutorial! I was just wondering, is there any way to change the code to make the banner show up on every page on my website? The link is http://www.wildzest.com if that is helpful. Thanks, Jodie
Yes. Replace the code to be added in child theme’s functions.php with http://pastie.org/pastes/10416035/text.
Hi Sridhar,
It looks like pastie.org is down, or this link isn’t working for some reason. Can you post this code here?
Thanks!
Tim
Sure. Here it is: http://pastebin.com/raw/LAx2cyVD
greate tutorial, I was looking for it for a long time
please, how can I create full width image below header on blogger platform
Thank you, this is so much simpler than what I was trying to do with widgets and shortcodes… wondering how to adjust this code if I want different banners on different pages?
https://sridharkatakam.com/different-banner-images-different-pages-genesis/
This code places a banner on all Pages not just the Blog Page. What is the code please to place the banner onto the Blog Page only please?
Sridhar, Thank you so much! This makes a lovely full width banner on my site https://simpledecoratingtips.com/ however, once added the content column and sidebar are spaced further out to the edges. I’ve added CSS for each of those elements to try to get them back closer together. It looks ok on some screens, but on my wider computer screen it’s really spread apart still. Wondering if there is a better solution to fix this? Thanks again, Liz