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.
Demo Video
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.
Installation Steps
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.
Is there a way to exclude the hero on certain pages?
You can add a conditional tag to stop the code executing on any page id to the add_hero_image_inline_css function.
actually meant to not add anything at all (so no hero).
I just put the conditional in execute_if_widget_active and it did what I wanted.
THANKS!!
as a way to improve my this I also added a conditional to check for a body class:
function execute_if_widget_active() {
$body_css_classes = get_body_class();
if ( in_array( ‘no-hero’, $body_css_classes ) ) {
$no_hero=true;
} else {
$no_hero=false;
}
So now I just test for the custom body class and not have to go back into functions to add pages.
again thanks for the solution and the code.
Or, you could add a switch in the backend. Something like this https://wpsites.net/web-design/academy-pro-checkbox-to-remove-hero-section-on-inner-pages/
ok, i added this variable to hero js and it works
$( ‘.wp-custom-logo .title-area img’ ).attr( ‘src’, “Link to the logo ” );
but I’m not sure it’s really the best way.
Hello Peter. I like it otherwise you can use CSS. It does exactly what you want right?
Yeah, right.
With CSS I also tried the following:
filter: invert(1) – works perfectly black and white. Difficult with colors or multicolored logos.
What works: content: url();
Embedding the logo as ‘background’ and then colorizing it with background-color: ; works but I can’t use the custom-logo class.
But I’m not sure if using the logo as background is the right way.
Anyway at the moment I have a solution.
Thanks!
Also note, I have been working for 2 days on multiple solutions using different methods for changing the logo on scroll based on your question “but I’m not sure it’s really the best way”.
I’ve finished the code and will publish the tutorial soon.
Great! Thanks a lot, I am curious what your tests have shown and which solution you find best.
2.5 days work. Here it is https://wpsites.net/web-design/3-ways-to-change-logo-on-scroll-using-jquery-in-genesis-sample-theme/
Peter, please note, there’s a $75 charge on tutorial requests https://wpsites.net/terms-of-service/#additional-tutorial-requests
Link to the page in question on your site
____________________________________________
https://project-space.modular4web.ch/hero/
Link to the tutorial which contains the code on wpsites.net
________________________________________________________________
Describe what you need help with
______________________________________
I use the Genesis Sample Theme with the code snippets «Hero Image Behind Site Header & Menu On Front Page In Genesis Sample Theme»
(works perfectly)
Under Costomizer, Website Information, Logo I have added the standard logo:
The standard logo fits all pages except Home:
For Home I work with the following code snippet:
(Perfectly solved with the picture ID)
_________________________________
When I scroll, the site header (white, position: sticky;) appears and the set custom logo “sflogo-light” is no longer visible (white on white).
My request:
– The custom logo should only be visible when the page is loaded.
– When I scroll down, the custom logo (white) should be hidden,
– and the default (standard) logo (on white site header) will be visible.
I am not sure how to proceed and would be very happy about your support.
Kind regards / Peter Spiess
So you want to change something on scroll? You can use the .white selector class added to the site-container div via the hero.js to make changes on scroll.