Add a widget area after the header


Nicolas showed you how to add a block of text after the header here. But what if you want to add something more substantial, such as a search bar or a language chooser — something that requires a widget area? Below I show you how to add a widget area after the header instead

 

Defining the widget area

Here’s what to do:

Add the following code to your functions.php:

 

This will set up the widget area and you will be able to see it in Appearance > widgets. (And depending on your setup, you may even find that WordPress has filled it with stuff you need to remove.)

 

Placing your widget area

But it won’t yet appear on your site — you still need to place it on your page. This is where Customizr’s flexibility comes in, as it has “hooks” throughout the theme, on which you can “hook” your code. Add the following to your functions.php, below the code you pasted above:

This places the widget on each page, after the header; substituting the Customizr __after_header function..

 

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

That’s it! Now go to Appearance > Widgets, where you’ll find your widget area, ready to be filled with whatever you want. Drag and drop new widgets into the area and click the dropdowns to delete the widgets you don’t want.

 

Styling your widget area

You can style the widget area with the new my-extra-widget-area class that you created above, as well as styling the individual items.

For instance, you could add the following to your Custom CSS or to the style.css in you child-theme:

Have fun!


About ElectricFeet

ElectricFeet started using Wordpress for the first time in the summer of 2013. Customizr is such a great theme, it's hard not to get swept up in the fun of discovering new tricks for modding pages with (and for) others on the Wordpress forums. The fun continues :-)


90 thoughts on “Add a widget area after the header

  • Reply
    crosswire

    After doing the updates of the theme etc, my extra widget defaulted to what it was. Right now, the width of footer goes across the screen
    The extra widget is right above it, however its taken the width of the featuredpages container which is centered on the page.

    Before the theme update, the extra widget was the same width of the footer below and was right above it. How can i get it back to that state.
    I had all the codes mentioned from here added to the functions and style sheets. Much appreciate it.

    // Adds a widget area.
    if (function_exists(‘register_sidebar’)) {
    register_sidebar(array(
    ‘name’ => ‘Extra Header Widget Area’,
    ‘id’ => ‘extra-widget-area’,
    ‘description’ => ‘Extra widget area after the header’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));
    }

    /* Place the widget area after the header – only on home page*/
    add_action (‘__after_main_container’, ‘add_my_widget_area’, 0);
    function add_my_widget_area() {
    if ( (function_exists(‘dynamic_sidebar’)) && (tc__f(‘__is_home’)) ) {
    dynamic_sidebar(‘Extra Header Widget Area’);
    }
    }

  • Reply
    Giorgio Riccardi

    In case somebody is interested, the original snippet can out put the widget area also after the slider, but always outside the content container.
    This snippet has priority set to 20 instead of the default 10.

    • Reply
      Joel Beckwith

      Hi Giorgio,

      This sounded like exactly what I was looking for, but for some reason the widget has disappeared from the home page.
      Any idea why?

      • Reply
        Joel Beckwith

        Nevermind! I figured it out. Your code lacked

        But I got it to work! You are a saint sir!

        • Reply
          Giorgio Riccardi

          glad it helped ;-) I’m receiving a lot of support from the dev team of Customizr.
          It is good to give back a bit.

          p.s. line 7 of my code is what you were missing?

    • Reply
      Tiffany Scott

      Thank you for sharing this. I would like to know how to get two other widget areas horizontal to it just as the footer widgets are positioned
      (1st widget-2nd widget-3rd widget), as with just this code there is a lot of white space. I would also like to change the margin in style.css to

      to decrease the height of the area, but it will not stay, I’m not sure what I should be putting differently…newbie here. I have asked this question also on wordpress, but I have not yet gotten a response. Thank you very much!

      • Reply
        Giorgio Riccardi

        Hi Tiffany,
        I’m not sure I really understand what you are asking. Are you talking about widgets to be displayed on the page? or widgets areas to be output in the dashboard via functions.php?

        If you meant 3 widgets displayed on the page, this is what I did on this test example:
        in the dashboard extra widget area (created with the above function), I’ve added 3 text widgets boxes; I style them after pasting in the text widget some html.
        Maybe a link to the forum tread you are posting would make it easier to follow up.

Leave a Comment

Your email address will not be published. Required fields are marked *

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">