This tutorial provides the code which enables you to display a unique hero image with unique overlaying text on any page/post using the Genesis Sample child theme by StudioPress.
If the hero image or hero text is empty, the default image added via the customizer with default content added to the Hero Text widget is displayed.
Shows the custom fields added to the Single post/page Edit screen enabling you to add a unique hero image and different overlaying text to any single post or page. Otherwise, the default text added to the Hero Text widget is displayed along with the default hero image added via the customizer.
Tested using the latest version of the Genesis Sample child theme by StudioPress however should work in any version of the sample theme.
There’s 4 steps :
- # Install the ACF plugin ( Free or Premium version ) and import the file named acf-73032.json using Custom Fields > Tools > Import file.
- # Copy & paste the PHP code from the functions.php file to the end of your Sample themes functions file
- # Copy & paste the CSS from the style.css file to the end of your Sample themes style sheet and clear caching.
- # Upload the file named hero.js to your Sample theme folder
You can then follow this step to populate the Hero Text widget.
WordPress Custom Fields
If you prefer not to use a custom fields plugin like ACF, you can use the custom fields native to WordPress with the custom field name ( key ) for the text hero_text and the name for the image unique_hero.
- Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme
- Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme