WP SITES

Log in

Add Widget After Header With Background Image Using Customizer

—

by

Brad Dalton

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

Comments

6 responses to “Add Widget After Header With Background Image Using Customizer”

  1. Cheryl Smith Avatar
    Cheryl Smith

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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

      1. Cheryl Smith Avatar
        Cheryl Smith

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

        1. Brad Dalton Avatar
          Brad Dalton

          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

          1. Cheryl Smith Avatar
            Cheryl Smith

            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.

          2. Brad Dalton Avatar
            Brad Dalton

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

            [code]require_once get_stylesheet_directory() . ‘/hero.php’;[/code]

Leave a Reply

Join 5000+ Followers

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