This solution enables you to add a full width of screen image with text overlaying the image using the customizer.
- The image can be added/changed using the Customize > Front Page Hero Image settings.
- A default image named hero.jpg can be added to your child themes images folder.
- The image is displayed after the header on the front page however this can be changed to any/all page(s)
- The text is added using a HTML or text widget in the Front Page Hero widget area.
This code was written for people who don’t want to edit the code or use FTP to upload image files in order.
Demo Video #
The content is added using the Front Page Hero widget area and the image can be added/set or changed using the customizer. Includes responsive text.
Tested using the Genesis Sample child theme by StudioPress. Should work fine in most Genesis child themes without modification.
Code Installation Steps
There’s 4 steps relating to usage of the files in the download folder :
# Step 1 : Upload the file named front-page.php to the Genesis Sample themes root directory.
# Step 2 : Upload the file named hero.php to the Genesis Sample themes root directory then add the following PHP code to the end of your child themes functions.php file.
require_once get_stylesheet_directory() . '/hero.php';Like this :
# Step 3 : Copy and paste the following CSS to the end of your child themes style.css file and clear caching.
If I put the php files in the correct place, should they show under Appearance > Theme Editor and then under Genesis Sample, along with the style.css, functions.php, etc? I took a picture but I don’t see a place to upload them.
At any rate, the Front Page Hero Image in the Customizer. What did I do wrong?
Did you add a widget to the new widget area? Happy to login and take a look at how you installed the files if you send FTP hostname, username and password or cPanel URL, username and password. brad@wpsites.net
No, I didn’t. I thought adding the code created the widget
It does however you’ll then need to add a widget with your content to your new widget area https://wpsites.net/web-design/add-image-after-header-using-customizer/#step-4
I tried to send a response, not sure if it went through.
I understand that content needs to be placed in the widget for it to be seen on the front end, but the Front Page Hero Image does NOT show up in the Customizer, nor does it show up in the widget area.
Also add this PHP code to the end of your functions file