Discover in this tutorial how to display an image header or Hero section on the Genesis Sample blog page from within the WordPress customizer using code.
One of the advantages of belonging to the OsomCode Club is that you can suggest future tutorials.
Following a request from a subscriber, I prepared a tutorial on how to add a Hero on the blog page.
However, in it you had to enter the path of the image in the CSS snippet.
This is not a problem for you, that’s for sure. But it could be a limitation for your clients.
So with this version 2.0 of the tutorial you’re going to take advantage of the WordPress customizer to add the image, choose its frame and the color of the title.
Sounds good, right? This is the final result:
Although I’ve created these snippets for Genesis Sample again, you can apply them to any other Genesis child theme after making small changes to the code.
Here we go.
Instructions on how to display an Hero header in the blog page from the WordPress customizer
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 displayed 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. Modify the customize.php
To add the options in the WordPress customizer you must edit the customize.php in the folder /lib/.
Specifically, insert the following code at the end of the code:
To see this and another 997 code snippets of this website, login or subscribe here.
With this snippet you insert a new section in the WordPress customizer called “Blog Header” inside which you have the options to add and position the image.
3. Customize the CSS of the header
Once you’ve set up the template for the blog page and the customizer file, all you have to do is assign the styles to make it look the way you want.
To do this, paste this snippet at the end of style.css:
To see this and another 997 code snippets of this website, login or subscribe here.
By entering these lines of CSS you ensure that the header is displayed correctly.
Now all you need is the last detail.
4. Add the background image from the WordPress customizer
Finally, enter the image you want to use as your background directly from the WordPress customizer.
As this section of the customizer tells you, make sure that the image has a generous width (1600-2000px) so that it fits high-resolution devices as well.
Conclusions
Now you know the code to add an image and title header, Hero style, to the Genesis Sample blog page from within the WordPress customizer.
Do you want to apply it to another Genesis child theme? Make a few tweaks 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. 🙂
