Add a custom header Hero style to the home page in Genesis Sample from within the WordPress customizer

Discover in this tutorial how to modify the home page header to your liking in Genesis Sample from the WordPress customizer using code.

One of the advantages of belonging to the OsomCode Club is that you can suggest future tutorials.

Following the tutorial on how to add a Hero section to the blog page, another subscriber proposed:

And another option in case you find it interesting to create the tutorial: how to create in the front-page the hero section to add the image highlighted with the h1 and the description from the customizer?

Said and done. 😉

With this tutorial you are going to take advantage of the WordPress customizer to add the image, choose its frame and insert the title and description text you want.

And not only that, but you will also be able to choose the color of both texts independently.

Sounds good, doesn’t it? This is the final result:

Although these snippets are designed for Genesis Sample, you can apply them to any other Genesis child theme after making minor changes to the code.

Here we go.

Instructions for displaying a custom header on the Genesis Sample front page from within the WordPress customizer

1. Create a template for the home 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:

With this you generate the template that will be displayed in the home 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 file 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:

With this block you insert a new section to the WordPress customizer called “Home Page Header” inside which you will find the options to add and position the image, as well as the sections to add the title and description.

Also from here you can choose the color of both texts independently.

3. Customize the CSS of the header

Once the template for the new home page and the customizer file have been configured, all you have to do is assign the styles to make it look the way you want.

Paste this block at the end of style.css:

By entering these lines of CSS you ensure that the header is displayed correctly.

All you need now is the last detail.

4. Add the background image from the WordPress customizer

Choose the photo 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 insert a header with image and title on the Genesis Sample home page from the WordPress customizer.

From there you can also easily choose the text and colors for the title and description.

Do you want to apply it to another Genesis child theme? Just 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. 🙂