Add a widget area after the header 133


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


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

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

        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.

  • Reply
    10sGerar

    I copy and paste the code exactly as it shows in here to my child theme functions.php file and it didn’t work. No widget on back end or front (obviously). Any ideas why this could be? Thanks.

    • Reply
      Giorgio25b

      I tried the code on a fresh installation and it works fine.
      Maybe you have some other plugins conflicting? Did you try disabling all of them? Did you try to activate another theme and re-activate your child theme? Maybe you can post it on the forum with a link to your site…

      For your convenience this is the full snippet I’m using:

  • Reply
    Cynthia

    I followed these exact steps and it’s not showing up on my site. It’s showing up on the back end, just not on the front.

    Please help. Many thanks!

    –Cynthia

    • Reply
      Giorgio25b

      Ok, at this point a link to your site would be handy.
      What widget did you place inside the new widget area? can you try with a text widget and write in the widget-box some random text and see if it shows on the page?

      Debugging in the dark is not easy, so if you can please provide a link.
      Thanks

    • Reply
      ElectricFeet Post author

      Normally, if something works on the back end, but not the front, it’s a caching issue. Your cache is serving you an old version of the page on the front end. Clear your cache.

  • Reply
    10sGerar

    I used this snippet to add a widget area under the slider and worked great. Now I need another widget area under the header so I tried to use it again and I got an error message: Fatal error: Cannot redeclare add_my_widget_area() (previously declared in… )
    Can anyone help me with this one? What do I need to do? I tried renaming add_my_widget_area to something else but didn’t work.

    • Reply
      Giorgio25b

      Here is the doubled snippet to create 2 different widget areas above and below the slider, some pure WP PHP expert might come up with a cleaner solution though:

  • Reply
    Chuck Corvec

    I have this working perfectly the way it was designed. But to tell you the truth I don’t like the i looks. I would actually like to put this widget area ABOVE the header. Is this possible.

      • Reply
        Chuck Corvec

        So when I try that I can see it above the header for about 5 seconds and then it disappears.

        This is the code I am using

        // 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 before the header',
         'before_widget' => '',
         'after_widget' => '',
         'before_title' => '',
         'after_title' => ''
         ));
        }
         
        // Place the widget area after the header
        add_action ('__before_header', 'add_my_widget_area', 10);
        function add_my_widget_area() {
         if (function_exists('dynamic_sidebar')) {
         dynamic_sidebar('Extra Header Widget Area');
         }
        }
        {/pre}
        • Reply
          Giorgio25b

          Hi Chuck Corvec,
          the problem can be solved via css. It depends on what widget you put in the extra header section you just need to give it a margin-top of 5% or so.
          Here on my test site it worked out with 2 widgets and sticky header! If you link your site we can help!

          • Reply
            Chuck Corvec

            I noticed that your widget is below the header. As I mentioned earlier I want it above the header. When I make the change that Nicolas suggested. The widget would appear for a few seconds and then disappear. When I turn off sticky headers the problem went away. BUT I want to keep sticky headers. You mentioned I can change the top margin but I am not sure how to do that. The site is in development and is located at http://www.canwestech.com/dev/decsa1. Currently the sticky header is off

            • Giorgio25b

              The 2 widgets on the test site, are actually above the header, since I’m using the same snippet you are using. They show below because via css I moved them lower to be visible. What you are trying to do involves removing the position: fixed from the header and making it relative.
              Try to add this to your style.css

              it worked on my test site, doesn’t look good but it works, you’ll need to polish the style.

      • Reply
        Aseel Al Dallal

        Hi Nicholas,

        I tried using the __before_header hook, but nothing happens. I get an empty white space between the grey navigation bar and the slider instead. Here is the code

        • Reply
          Aseel Al Dallal

          As mentioned above, the widget only appears before header if sticky header is unchecked. If it’s checked, it doesn’t worked.

          Also, when I add

          Sticky header doesn’t work.

          I want the above header widget area to be sticky, along with the header.

          • Reply
            Rocco Aliberti

            Hello Aasel,
            of course the widget is there also when you have the sticky-header, but since the sticky header is fixed to the top it will hide it.
            As you say you want your widget area being sticky as well, so it should be part of the sticky header.
            Then in the snippet above make this:
            add_action ('__after_header', 'add_my_widget_area', 10); become this

            add_action ('__header', 'add_my_widget_area', 0);

            and also add the following css:

            .tc-header .brand { margin-left: 0; }

            Hope this helps.

            (edit Aug 18 2015: use correct hook __header instead of __before_header)

  • Reply
    Jhoveleen

    I added the code below to my functions.php but it gave me parse error. I have no idea about php. I need to know why it is error. Please help. Thank you very much.

    • Reply
      Rocco Aliberti

      Hello,
      the code you provide above isn’t the code of this snippet.

      should be

      As you can see you miss some lines. But maybe you just pasted it wrongly here..?
      Also dunno why you erased some parameters.

      Anyway you also missed a closing brace.
      As final note you really don’t need to close the php tag ?> at the very end of the snippet.

      Hope this helps.

  • Reply
    Mila

    Hi Nicolas, Rocco and others! Great template WP, great backoffice, forum, 3x thanks.
    Add original code in my site. Works all right. I want place widget inside header.
    I change original row from:
    add_action (‘__after_header’, ‘add_my_widget_area’, 10);

    to: add_action (‘__header’, ‘add_my_widget_area’, 10);

    widget inside header, but disappeared all menu items in header.
    Can you help me? Nice day all. Tahnk you.

    • Reply
      Giorgio25b

      Hi Susan,
      just change this line from
      add_action ('__after_header', 'add_my_widget_area', 10);
      to
      add_action ('__before_header', 'add_my_widget_area', 0);

  • Reply
    Jacqui

    Hi there,

    I’ve added the code and the widget appears in my backend, but nothing’s appearing on my site. I’ve just added a text widget as a test, and yes, I’ve cleared my cache. Any other suggestions?

    Thanks,
    Jacqui

    • Reply
      BillR

      I tried the same on a site with the same result as Jacqui. added and Advanced text widget to it with just text to test and the text doesn’t show.

        • Reply
          Rocco Aliberti

          Hello Jacqui,
          I see you’re not using the child theme on your site. Did you place the codes in your parent theme’s functions.php ?
          Also, did you copied both “Defining the widget area” and “Placing your widget area” codes there?

          • Reply
            Jacqui

            Hi Rocco,

            Yes, I copied both pieces of code to the functions.php file. And no, I didn’t create a child theme (yes, I know this is naughty).

            Thanks,
            Jacqui

            • BillR

              Am staying with this thread because I’m testing it on std and not Pro before implementing it.
              It works but only without Sticky On Scroll for me.
              Tested with a few any old widgets – Advanced Text and JetPack Blog Subscription.
              I had thought it would have vanished on scroll and liked that idea for what I intend to use it for.

            • Jacqui

              Hi Rocco,

              It looks like the issue is that I’m using an older version of customizr, and the header.php file is slightly different. I’ve tried upgrading customizr in the past and it broke my site, so I think I’ll just stick with what I have and forgo the widget area as the lesser of two evils.

              Thanks for your help,
              Jacqui

  • Reply
    Rocco Aliberti

    Hello BillR,
    for which concerns to this snippet there’s no difference between the free and the Pro theme’s version.
    Also this snippet is about putting a widget area after the header, not before the header. You’re using “__before_header” hook, right?
    What you’re seeing makes sense when you use the sticky header which is designed to stay at the very top of the page (fixed element), if you don’t tell it to stay below another element.
    You might want to add something of the sort to your child-theme functions.php
    http://pastebin.com/Pwk6SNqG

    Hope this helps.

    For further issues, as pro user you might want to open a new topic in the Pro Support forum.
    Or if you’re using Customizr free please open a new ticket on https://wordpress.org/support/theme/customizr

    • Reply
      William Rodgers

      Ifyou refer to the thread I am well aware of your first point.
      Of course I’m using before_header. I’m using the code you put forward:
      “of course the widget is there also when you have the sticky-header, but since the sticky header is fixed to the top it will hide it.
      As you say you want your widget area being sticky as well, so it should be part of the sticky header.
      Then in the snippet above make this:
      add_action (‘__after_header’, ‘add_my_widget_area’, 10); become this

      add_action (‘__before_header’, ‘add_my_widget_area’, 0);

      and also add the following css:

      .tc-header .brand { margin-left: 0; }

      Hope this helps.”
      Will I actually get better support in Pro Support at present?
      I donated long before I made any Customizr purchase because of the great support and have made a few purchases since.At present I have reservations since questions here seem to be passed off by yourself.

  • Reply
    Rocco Aliberti

    Hello BillR,
    I’m sorry about your reservations, and if my answers might have hurt you. Which answers?
    I was just staying that we handle the support on those forums, doing it here (as comments to a snippet) is a bit complicated, isn’t really a forum platform as you can see :).
    About the hook, sure, the thing is that from your first post I thought you were using the __after_header hook which is the hook used in the snippet. Sorry if I looked somewhat “harsh”, wasn’t my my intention. So you replied to my reply but the comments structure didn’t show it, so I didn’t understand ;).
    Also my code above is wrong :D. To actually have it inside the header you should use:
    __header hook and not __before_header. Sorry.

    Anyway, I gave you a snippet you can put in your child-theme functions.php to set the offset of the sticky-header so your widget area will be taken in account. Did you try it and it doesn’t work? I tried it, works fine here.

    Hope this helps.

    p.s.
    I will reply on the free support forum so we can continue there.

  • Reply
    Christine

    Hello,
    on my website the code will not displayed on my homepage and i tried instead of right in the style.css center, but it doesn’t work. Isn’t it center?

    thanks
    christine

    • Reply
      Giorgio25b

      Hi Christine,
      I’m assuming you copied correctly all the code snippets in your functions.php and now we are talking about this css rule:

      The float css properties are only 3: left, right, none.

      Maybe a link to your site would make it easier. Thanks

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=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">