Discover in this tutorial how to add an image header (Hero style) to the blog page for Genesis Sample using code snippets.
One of the advantages of belonging to the OsomCode Club is that you can suggest future tutorials.
For example, a subscriber left me this comment not long ago:
Hey!
I’m gonna love this snippet. Thank you.
Here’s a suggestion for a tutorial:
Located on the blog page, could you put the title and the highlighted image of the blog to be seen under the full width menu (the image)? And under this image would come the entries. Mai Pro Lifestyle style too. I hope I explained myself.
Thanks again.
Greetings.
In short, what this subscriber is asking is to display a full width header with the title superimposed on the image before the post entries appear.
Let’s do it!
Although I’ve created these snippets for Genesis Sample, you can apply them to any other Genesis child theme after making small changes to the code.
This is the final result:
Instructions for adding a Hero header to the Genesis Sample blog page
1. Create a template for the blog page
Genesis Sample lacks a dedicated blog template by default, so the first step is to create a home.php in the child theme’s root folder that contains the following code:
To see this and another 997 code snippets of this website, login or subscribe here.
With this you generate the template that will be shown in the blog page and you add a header section in Hero format.
Also, this block forces the full width design, although if you prefer to leave the sidebar you can remove the responsible line, that’s it.
2. Customize the CSS of the header
Once the template for the blog page has been set up, all you have to do is assign the styles to make it look the way you want.
To do this, add this block at the end of style.css:
To see this and another 997 code snippets of this website, login or subscribe here.
By inserting these CSS lines you ensure that the header is displayed correctly.
Now all you need is the last detail.
3. Add the background image
Finally, insert the image you want to use as your background in the /images/ folder of Genesis Sample root.
There are 2 options:
- Upload a picture with the name hero-blog.jpg (in this case you don’t have to do anything else).
- Upload a photo with the name you want and edit the next line of CSS by replacing hero-blog.jpg with the name of your file.
background: #222 url(images/hero-blog.jpg) no-repeatMake sure that the image has a generous width (1600-2000px), so that it also suits high-resolution devices.
By the way, if you want an prepare an advanced version of this tutorial so you can choose the image and change the text color from the WordPress customizer, take a look at this other tutorial.
Conclusions
Now you know the code to add a header with image and title, Hero style, on the Genesis Sample blog page.
Do you want to apply it to another Genesis child theme? Make a few adjustments and you’re done.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
