Add a widget area after the header


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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

 

To restrict the widget area only to the home page use this instead:

 

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!


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



156 thoughts on “Add a widget area after the header

  • Chel

    Hi, I want to put to login widget next to the slider. Slider left, right login widget, but both centered. I am not able to fit it well … how can I do?

  • Janelle

    Hello, I cant get mine to show up on the pages. Could it be that because i have Sidebar Manager, it wont work?

  • mohd

    Hi Nicolas, Endless to say thank you, it a great theme, and i followed your instruction to create a child theme before i update the functions.php to make it looks like this

    // 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 before the header

    add_action (‘__before_header’, ‘add_my_widget_area’, 0); // from 10 priority set to 0 to output the widget before anything else

    function add_my_widget_area() {

    if (function_exists(‘dynamic_sidebar’)) {

    dynamic_sidebar(‘Extra Header Widget Area’);

    }

    }

    but still i see the widget under the header, WHY?

  • pankaj

    Please help me in getting a widget area on my home page of the site.. Please.. I had tried this but it shows after the header.. I had also tried the above featured page widgets..
    But i Want a widget area on my home page sidebar..
    Please help.. Iam new here..

  • Jodie Davis

    I have already added a widget on my home page below the slider. Now I want to add one above the footer.
    I followed Giorgio25b’s code above, dated Feb 18 and changed some things in my attempt to get it to do what I wih.
    The parse error that came up said it found an unexpected string, expecting ‘)’
    Can’t for the life of me see what that can be as I compare the two. What is it?

    // Place the widget area before the footer
    add_action (‘__before_footer’, ‘add_my_widget_area’, 20); // from 10 priority set to 20 to output the widget after the slider
    function add_my_widget_area() {
    if (function_exists(‘dynamic_sidebar’)) {
    dynamic_sidebar(‘Above Footer Widget Area1’);
    }
    }

    // Adds a widget area.
    if (function_exists(‘register_sidebar’)) {
    register_sidebar(array(
    ‘name’ => ‘Above Footer Widget Area1’,
    ‘id’ => ‘ Above-Footer-Widget-Area1”,
    ‘description’ => ‘ Above Footer Widget Area1’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”
    ));
    }

    // Place the widget area after the header
    add_action (‘__before_footer’, ‘add_my_widget_area’, 10);
    function add_my_widget_area() {
    if (function_exists(‘dynamic_sidebar’)) {
    dynamic_sidebar(‘Above Footer Widget Area1’);

  • 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

    • 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

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

  • 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

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

  • 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

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

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

          • 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

    • 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);

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

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

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

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

      • 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}
        • 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!

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

      • 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

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

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

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

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

  • 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

    • 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

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

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

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

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

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

      • Joel Beckwith

        Nevermind! I figured it out. Your code lacked

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

        • Giorgio25b

          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?

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

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

  • 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’);
    }
    }

  • Taryn

    Hi, how would I move the green facebook icon “next” to the yelp badge instead of under it? In other words, move the facebook icon to the right of the yelp badge, closer to the navbar, on this website – http://www.bestofindianashville.com? I’ve asked on the wordpress forums, but got referred here. Thanks!

  • Devon James

    My bad, I didn’t wrap my code in a syntax highlighter. Below is my correction:

    }
    /*— my extra widget—*/
    .my-extra-widget{
    background: #ecf0f1;
    height:160px;
    width: 100%;
    /*z-index: 999;*/
    position: relative;
    }

  • Devon James

    ElectricFeet,

    After countless hours of following a variety of tutorials and subjecting myself to, seemingly, endless trial and error, I have finally made some progress by following your tutorial. And for that, I thank you very much. However, I still have not been able to successfully add a widget space beneath my header.

    I should mention that my website is running the engine theme ‘Forumengine’.

    I have pasted the coding from your tutorial into my functions.php file. On the plus side, the extra widget area appears in dashboard/widgets, and I am able to drag and drop widgets into the category, just as I am able to do with the sidebar widgets. Unfortunately, this new widget area does not show up on my website.

    I tried to add the following code to both my custom.css and customizer.css files, and this resulted in no change. Clearly, I haven’t the slightest clue as to what I’m doing… So if you have any suggestions I will be forever in your gratitude.

    }
    /*— my extra widget—*/
    .my-extra-widget{
    background: #ecf0f1;
    height:160px;
    width: 100%;
    /*z-index: 999;*/
    position: relative;
    }

  • alex

    hi, i’m using your theme and i’m very happy with it 😉 i use also your child-theme and a few code snippets. one of them is the “add a widget area after the header” where i diplay two language flags. since the last theme-update it’s possible to stick the header to the top of the page on scroll down, but if I use this feature the two flags are not shown anymore. for now i have the stick feature deactivated, but if you could take a look…….
    thanks, alex

    • ElectricFeet Post author

      Hi yami. It’s impossible to say, I’m afraid. It depends on what hooks your theme has. It may not have any at all. Customizr’s hooks throughout its code are what make it so special and so customizable.

  • Amber Eland

    sorry it still didnt post the first part

  • Amber Eland

    here is all the codes I am trying to use, they are in my child theme, which is active, If I mess up the code one bit I get errors on my page, but perfect like this, and none of this is wroking….

  • JP Rocks

    Nicolas I am glad to say my nightmare is over, the job is done… Thank you for this handy piece of code and I shall now go away and get on with the job in hand. Though my client has just informed me they want something quite different… Thank the lord for Notepad++ as that did the job…. Spanish Internet Cafe is not the best to be honest…. Would help if I spoke Spanish

  • Nicolas

    Hi Felix,
    Thanks for your message :).
    you may want to inspect your code with a web development tool to find the CSS code used in the footer.
    The arrow effect on hover is javascript + css based but uses generic css selector :

    Hope this helps

  • Felix

    Hi Nicolas, best theme and support, thanks.
    I added the widget area below the header. How can I adapt the CSS of the footer widgets also for this widget area? Especially I’d like to use the footer’s CSS for “lists” that shows little arrows before every entry in “recent posts” etc. Could you please help me with that? Thank you!

  • JP Rocks

    Sorry here is the code…

    • ElectricFeet Post author

      You’re still missing:

      at the top.

      • JP Rocks

        Hi me again. I fully understand you may by now be beginning to think….

        “Oh no its this one again who cant copy and paste code correctly!”

        Thas ok thats alright as I have pasted the code I have got above.
        Alas still not in header though.

        I suspect it could be the computer I am using as I am using one in an internet cafe on a pc running Windows Vista I think or it could be 8. The reason why I cannot work that out is because as an added bonus to my woes it is in Spain and I do not speak Spanish… long story.
        Could you pretty please as a big favour be able to send me the complete PHP file via google? I have added you in my g+ my user name is Jason Rox.

        Oh also forgot to mention the other bonus and that is my path in WordPress Apperance-Editor has gone, but thats another story…

        • JP Rocks

          <?php
          /**
          // Adds a widget area.
          if (function_exists('register_sidebar')) {
          register_sidebar(array(

          This code is there and I know not why it does not appear. Once again I suspect this computer… Thanks

  • JP Rocks

    Glad I stumbled across this helpful topic as it is just what I need to do. Unfortunately though I have cut and pasted the code into my functions.php file and have then uploaded the child theme to WordPress but I cannot see in the widget area a widget area for the header just still the normal sidebar and footer areas. Any ideas as to what I have done wrong gladly received. here is the code.

    Could it be that when I saved the file in notepad it has defaulted to a simple notepad file rather than a php file. If so how would I go about saving it back as a php file. Thanks JP

    • ElectricFeet Post author

      Hi JP Rocks. You’re missing the top of the code and you have a spurious “*/” at the bottom. A php file is a text file; no special format.

      • JP Rocks

        Hi thanks for that so here is the edited code and have uploaded again but sorry to say still no joy… 🙁

  • William Rodgers

    This is great!
    I used this with Advanced Text Widget to place a shortcode just below the navbar. Changed above accordingly.
    I’d like to place it on the right but when I do it too far off t the right.
    Is there any way to pad it out a bit from the right hand side?
    Thanks!

    Ref at:

    • Nicolas

      Hi William, this looks like a CSS issue.
      The snippet wraps your widget with a div with the following classes : .widget.my-extra-widget
      Try to style those CSS classes to place your widget as you want.
      Cheers

      • William Rodgers

        Thanks!
        I just used this to float it to the right and pad it. Works but is it acceptable?
        /* Move the extra widget area to the right of the page*/
        .my-extra-widget {float: right;}
        /* Add Padding to the right of the extra widget area*/
        .my-extra-widget { padding-right: 100px; }

        • ElectricFeet Post author

          Re “Works but is it acceptable”: Generally, with CSS, if it works, it’s acceptable 🙂

          Test it on several screen sizes to check it works on all. You may need to use some media queries to modify the display on smaller screens.

  • Ben

    I am using wp 3.9.1 with Barrister Theme. if i put the code in functions.php, extra widget does not appear in widget section. However if I put the code in Theme function.php, the extra widget is in the widget area and accepts new widgets added to it but I still can’t see it on my page? Why can this be? Here are the snippets I used. I removed the condition because there are no function_exists(‘register_sidebar’) in my code.

    /** Adds a widget area.———————————————————————— */

    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——————————————————– */
    add_action (‘__before_header’, ‘add_my_widget_area’, 0);
    function add_my_widget_area() {
    if (function_exists(‘dynamic_sidebar’)) {
    dynamic_sidebar(‘Extra Header Widget Area’);
    }
    }

    • ElectricFeet Post author

      Hi Ben.
      This is a site for the WordPress Customizr theme. The code will not work with your theme probably because the __after_header hook doesn’t exist in your theme. if you look through your theme’s files, you might find that the author has added hooks in the theme that you can use, but this isn’t a given. Customizr is unique in the number of hooks it includes.

      Hope you manage to fix it for you theme.

  • Sanjida Shaheed

    It WORKED!!!!!!!!!!!!!!!!!!

    Thank you so much for a wonderful theme and for your kind help.

    Keep it UP!

  • Sanjida Shaheed

    I totally love this theme! So clean and simple and customizable! Thanks for making it free!

    I need an extra widget area after header in Customizr. I have found out how to have one after the header here.I followed the instructions and got a widget after the header almost instantly.

    But I really need the widget after the slider and not after the header. Can you please share with me the code needed to that?

    Also, once I have the widget, I would like to center-align it. I understand that I have to put a code in Custom CSS to do that.
    But where is Custom CSS?

    Newbie alert!
    ……………
    I should mention that I am almost totally new to self-hosted wordpress. I have an intuitive understanding of things to a certain extent. But this time, I really need step-by-step clear explanation.

    Please help.

    • ElectricFeet Post author

      Hi Sanjida,
      Instead of the __after_header in the line: add_action ('__after_header', 'add_my_widget_area', 0);, you can use __before_main_container.

      The featured pages are also hooked on the __before_main_container hook. But in the code I gave above, I gave the add_action function a very high priority, so it will run before other actions on the same hook. So your widget will always show before the featured pages.

      The CSS styling goes in the Custom CSS panel in Dashboard > Appearance > Customize.

  • Kurt Wyngaard

    Hi everyone!

    Thank you for a great theme Nicolas!

    I have a small problem. I have placed the widget area under the menu by using the __after_navbar hook as ElectricFeet has stated, but any links I create in a text widget does not work. The link appears like a link, but it is not clickable.

    Any help would be appreciated!
    Thanks 🙂

  • Juan Carlos Guevara

    Hello,

    Thanks a lot for your support, I’ve successfully added a widget after the header. However when I float it to the right in the CSS (I copied the snippet from here), it visually floats but it seems like the slider is above the widget so the widget is not clickable. If I don’t float it to the right then it is fully clickable. Can anybody help me to fix it?

  • ken

    it would be helpful on these tutorials if you were to show an example of where/what we are talking about. I can’t be the only one who doesn’t know exactly where “after the header” is.

  • franzi franzi

    Hello,

    thanks for this code it work well but i wondering how to make the widget have the full widht like the slideshow ?

    thanks a lot

  • Melissa

    I followed your code precisely and the widget box shows on the dashboard, but when I add a text/social media icons, etc.. widget, nothing shows up on my blog where that widget is suppose to be.

    Any suggestions?

  • Stacey

    Using the All-in-One Event Calendar by Time.ly I would like to add the “widget” to my header. I have a button from Tockify and I’d rather do something more like that. When I insert the widget, it wants to show at least 1 event and it makes the header to clustered.

    Any ideas?

  • Daniel

    How can I add a search box to the menu? Using as reference this page, I would like to place this box where the “login” link is located.

  • Ron

    How important are the populated before_ and after_ items:

    Did I possibly grab stuff from this snippet at an earlier stage, before complete?!

  • Daniel

    How can I place the widget side by side with the right sidebar? My goal is to have two right sidebars.

  • Sagar Manohar

    What changes should I make to the given snippet if i want the widgets only on my homepage and after the slider? Thank you.

  • Jamie Tomkins

    Is there a way to add a widget area under the footer? I’d like to put some html things under the footer area. Thanks.

  • Jay kanchana

    Hi I was able to style the search form and button by adding following css and place it before the header..
    But the widget does not appear on my home page.

    .my-extra-widget {float: right; border: 0px ; width:300px; height:30px; padding: 10px 10px 10px 20px ; }

    form#searchform.searchform {width:300px; height:50px;}
    input#searchsubmit {vertical-align:top; }
    input#s {width:200px; }

    .screen-reader-text {display:none;}

    This is the code to add the widget to the hook. doesnt this work for static home page?
    add_action (‘__before_header’, ‘add_my_widget_area’, 0);
    function add_my_widget_area() {
    if (function_exists(‘dynamic_sidebar’)) {
    dynamic_sidebar(‘Extra Header Widget Area’);
    }
    }

  • Tommy

    Hi!
    1) How can I delete the Icons just before the page headings? (I just would like to have plain text here).
    2) How can I change the fonts of the headings? (I have created a Child theme, but I do not know how to progress (I’d hoped to copy and paste the original style.css into a new one (in the child folder). And from here change fonts styles and sizes – but there are no ones to be changed 🙁
    If I’m an advanced WP user? NOT!!
    3) Thirdly – pls visit my site http://www.marknadschefen.se – it runs very slooooowly! Any idea what to do?
    Please, any help is very welcomed!

    PS. Are you able to enter my admin site?

  • Jay kanchana

    Hi!

    I just installed customizr to create our intranet. I want to add search box in the header. I have created and activated the child theme. heres how my child theme functions.php looks. Is this correct?

    I dont see the search box in the header. I do see the extra widget area in the admin console and I have added search box to that widget area.

    Thank you very much for this beautiful theme and the wonderful support.
    -Jay

    • jay

      hi, this is me again. I do see the search bar on all the other pages except home page. but the search box is full page width. the input field is very wide (full page). Is there a way it can be just on the right hand corner? thank you very much.

      • ElectricFeet Post author

        Hi jay. This is a general styling question. In addition to Nicolas’ links above, you might want to check this out this video as it shows you how to style elements on your pages.

    • Nicolas

      Hi,
      You seem to have include the CSS in the functions.php file, which is wrong.

      If you are new to Customizr (and WordPress), you might want to read this short guide on how to customize Customizr.

      Then, you can you try to make a research in :
      1) the Customizr theme documentation
      2) the FAQ
      3) how to make a research in the Customizr user’s forum
      4) the Customizr code snippets

      You might find all answers to those questions! If not then post a new thread in the the Customizr user’s forum.

      If you still have issues then post a new thread in the the Customizr user’s forum and we’ll do our best to help you.

      Thanks and best regards

      • jay

        Hi Nicolas, thanks for the quick reply.

        the CSS is in style.css. sorry I pasted the “This is how style.css is” inside the code body in my comment above.

        This is how style.css is

        /*
        Theme Name: Customizr Child
        Theme URI: http://presscustomizr.com/customizr
        Description: A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr’s core code. In order to keep your code as clean and flexible as possible, try to use Customizr’s hooks API for your customizations. Do something awesome and have fun !
        Author: Nicolas Guillaume (nikeo)
        Author URI: http://presscustomizr.com
        Template: customizr
        Version: 1.0.0
        */

        /* Your awesome customizations start right here !
        ————————————————————– */

        /* Move the extra widget area to the right of the page*/
        .my-extra-widget {float: right;}
        /* Don’t display it on the home page*/
        .home .my-extra-widget {display: none;}

  • Micke

    Trying the Customizr theme and really like it so far. This snippet was very good but i would prefer to limit it’s view to only first page. Is that possible without using CSS?

      • Liberty Protection, PLLC.

        Hello,

        I tried to add Logic to the if tag however i keep getting an error. can you please be more specific onto how it should totally look with the code?

        • ElectricFeet Post author

          This should work:

  • Bryan

    I’m working on a localhost version of my WordPress site to be uploaded later. I LOVE this theme, and definitely want a header widget to show up below the header.

    I was able to implement the code and add widgets just fine. But it doesn’t show up on my page. I implemented the PHP code on the Child theme. Was that a mistake?

    Thanks for your help!

    • ElectricFeet Post author

      What happens if you go to Appearance > Widgets? Is your widget area there? What happens if you drag a text widget into the area and enter some text in it? Does it show up?

  • Fa-bio

    Hi! Thanks a lot for this guide i found it really helpful!
    but what should i do if i want to move the widget inside the nav box?
    i mean what’s the best way to do it?

    thanks
    Fabio

  • Peter

    Hi!

    Thanks for the code snippet. Is there also snippet to put a widget in the header? I would like to have the search bar on the top right.

    Thanks,
    Peter

    • ElectricFeet Post author

      Hi Peter. The code currently hooks to the __after_header hook. You could also hook it on the __before_header hook or on the __after_navbar hook. Just substitute either in the code above.

      • Walt

        Thanks for all the info, ElectricFeet. What I would like to do is replace the tagline with a search box, essentially what you’ve done with the “Showcase” and “View Demo” buttons on presscustomizr.com. How would I do that?

        Best,

        Walt

  • corentin trouillet

    Thanks for the tip it should be very useful for my website, but how can i center this widget ? because the float: middle/center obviously won’t work ?

    Thanks the team !

    • ElectricFeet Post author

      I would tend to style whatever you have put inside the widget. E.g. if it’s text, you can use the text-align property.

    • Wuma

      add it to the CUSTOM CSS 🙂

Comments are closed.