WP SITES

Log in

Hero Image Behind Site Header & Menu With Unique Text Overlay In Genesis Sample Theme

—

by

Brad Dalton

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 :

  1. # Install the ACF plugin ( Free or Premium version ) and import the file named acf-73032.json using Custom Fields > Tools > Import file.

    2.  
    Step 1

  2. # Copy & paste the PHP code from the functions.php file to the end of your Sample themes functions file

    3.  

    Step 2

  3. # Copy & paste the CSS from the style.css file to the end of your Sample themes style sheet and clear caching.

    4.  

    Step 3

  4. # Upload the file named hero.js to your Sample theme folder

    5.  

    Step 4

You can then follow this step to populate the Hero Text widget.

Download Folder

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.

Related Tutorials

Comments

14 responses to “Hero Image Behind Site Header & Menu With Unique Text Overlay In Genesis Sample Theme”

  1. Boris Margolin Avatar
    Boris Margolin

    Is there a way to exclude the hero on certain pages?

    1. Brad Dalton Avatar
      Brad Dalton

      You can add a conditional tag to stop the code executing on any page id to the add_hero_image_inline_css function.

      1. Boris Margolin Avatar
        Boris Margolin

        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!!

        1. Boris Margolin Avatar
          Boris Margolin

          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.

          1. Brad Dalton Avatar
            Brad Dalton

            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/

  2. Peter Spiess Avatar
    Peter Spiess

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Peter. I like it otherwise you can use CSS. It does exactly what you want right?

      1. Peter Spiess Avatar
        Peter Spiess

        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!

        1. Brad Dalton Avatar
          Brad Dalton

          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.

          1. Peter Spiess Avatar
            Peter Spiess

            Great! Thanks a lot, I am curious what your tests have shown and which solution you find best.

          2. Brad Dalton Avatar
            Brad Dalton

            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/

          3. Brad Dalton Avatar
            Brad Dalton

            Peter, please note, there’s a $75 charge on tutorial requests https://wpsites.net/terms-of-service/#additional-tutorial-requests

  3. Peter Spiess Avatar
    Peter Spiess

    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
    ________________________________________________________________

    https://wpsites.net/web-design/hero-image-behind-site-header-menu-with-unique-text-overlay-in-genesis-sample-theme/

    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:

    https://wpsites.net/web-design/template-for-custom-logo-different-menu/

    (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

    1. Brad Dalton Avatar
      Brad Dalton

      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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.