Adding a Widget Area Below the Header in Genesis Child Theme

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ MY DISCLAIMER FOR MORE INFO.

For a resent project I wanted to add a widget area below the header and have it display on all pages except the homepage. I’m calling it the “Page Title Widget Area”.

Here is a screenshot of what it looks like, the red box is highlighting the widget area.

widget area below header genesis theme

This is a really simple setup. You just need to be able to edit three of your theme files, functions.php, home.php, and style.css.

Step 1:

We need to register the new widget area and get it to display in the correct location, below the header.

This code also adds the appropriate class to the widget area for styling purposes.

Add the following code to your themes function.php file.

https://gist.github.com/chrisegg/8117498.js

Step 2:

Because I already have several widget areas on the homepage, I did not need the Page Title widget to show up in the homepage. This code will remove the Page Title widget area from the homepage of your website.

Add this code to your themes home.php or front-page.php file.

https://gist.github.com/chrisegg/8117771.js

Step 3:

This code will style the widget area like you see it in the screenshot at the top of this page. Feel free to edit it as needed.

Add this code to your themes style.css file.

https://gist.github.com/chrisegg/8117824.js

Now, when you go to the widgets section of your WordPress dashboard you will see a new widget area titled, “Page Title”.

Add the desired widgets to the new widget area and you’re done.

If you have complications or need assistance, feel free to use the comments below.

Advertisements

14 thoughts on “Adding a Widget Area Below the Header in Genesis Child Theme”

  1. This is so awesome! Thanks so much! I have some mystery padding or margin at the bottom that I can’t seem to pinpoint with Firebug. Any thoughts? I really appreciate you posting this!

    Reply
    • Hey Jane,

      I’m glad this tutorial was helpful!

      I could take a look at the site and see if I could figure out the extra space.

      Are you using a Genesis child theme or building a custom one?

      Talk soon,
      Chris

      Reply
  2. Just to clarify, does the:

    remove_action( ‘genesis_after_header’, ‘cegg_pagetitle’ );

    Need to go in the home.php file in the child theme folder?

    You were talking about the child them functions.php file previously, so I wasn’t sure if we are to add it to the functions.php or to the home.php if we want to NOT show that widget on the home page.

    Reply
  3. Hello! Thanks for this 🙂

    I have a question… What would I change if I want it to ONLY show up on the homepage?

    Reply
    • Hi Sarah,

      Step 2 removes the widget from the homepage. So first thing, skip step 2.

      To accomplish your goal, you have 2 options.

      Option 1:

      You can take the code below (step 1 in tutorial) out of the function.php file and place it in your home.php or front-page.php file. If you don’t have a home or front-page file, you’ll have to take option 2.


      //* Add the Page Title section
      add_action( 'genesis_after_header', 'cegg_pagetitle' );
      function cegg_pagetitle() {

      if (is_active_sidebar( 'pagetitle' )) {
      genesis_widget_area( 'pagetitle', array(
      'before' => '

      '

      '
      ) );
      }
      }

      Option 2:

      Just replace the code in step 1 with the code below:


      //* Add the Page Title section
      add_action( 'genesis_after_header', 'cegg_pagetitle' );
      function cegg_pagetitle() {

      if ( is_home() ) {
      genesis_widget_area( 'pagetitle', array(
      'before' => '

      '

      '
      ) );
      }
      }

      //* Register widget areas
      genesis_register_sidebar( array(
      'id' => 'pagetitle',
      'name' => __( 'Page Title', 'cegg' ),
      'description' => __( 'This is the page title section.', 'cegg' ),
      ) );

      I’ve used option 2 on my test site which you can checkout here: https://demo.chrisegg.com/themehacks/

      Let me know if you have any other questions.

      – Chris

      Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.