Add a widget area after the header 50

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, by running it first and with higher priority.


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

50 thoughts on “Add a widget area after the header

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

  • Reply


    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.


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

      • Reply

        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 How would I do that?



  • Reply

    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?


  • Reply

    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!

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

  • Reply

    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?

      • Reply
        Liberty Protection, PLLC.


        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?

        • Reply
          ElectricFeet Post author

          This should work:

  • Reply
    Jay kanchana


    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.

    • Reply

      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.

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

    • Reply

      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

      • Reply

        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:
        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:
        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;}

  • Reply

    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 – it runs very slooooowly! Any idea what to do?
    Please, any help is very welcomed!

    PS. Are you able to enter my admin site?

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

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

  • Reply

    How important are the populated before_ and after_ items:

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

  • Reply

    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.

  • Reply

    Using the All-in-One Event Calendar by 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?

  • Reply

    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?

  • Reply
    franzi franzi


    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

  • Reply

    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.

  • Reply
    Juan Carlos Guevara


    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?

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

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

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

  • Reply

    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.———————————————————————— */

    ‘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’);

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

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

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