• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Add Widget After Header With Background Image Using Customizer

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.

Add Customizer Image After Header
Customize > Front Page Hero Image
Full Width Image After Header
Full Width Image After Header

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 :

Register or login to access the download folder :

# Step 1 : Upload the file named front-page.php to the Genesis Sample themes root directory.

Step 1

# 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 2

# Step 3 : Copy and paste the following CSS to the end of your child themes style.css file and clear caching.

Register for full access

After Header Image Customizer

Reader Interactions

Comments

  1. Cheryl Smith says

    January 11, 2020 at 10:03 pm

    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?

    Log in to Reply
    • Brad Dalton says

      January 12, 2020 at 3:55 am

      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

      Log in to Reply
      • Cheryl Smith says

        January 12, 2020 at 4:15 am

        No, I didn’t. I thought adding the code created the widget

        Log in to Reply
        • Brad Dalton says

          January 12, 2020 at 4:30 am

          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

          Log in to Reply
          • Cheryl Smith says

            January 12, 2020 at 4:53 am

            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.

          • Brad Dalton says

            January 12, 2020 at 5:09 am

            Also add this PHP code to the end of your functions file

            require_once get_stylesheet_directory() . '/hero.php';

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.