Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add a WordPress Widget to Your Website Header (2 Ways)

Do you want to add a WordPress widget to your website header area? 

Widgets allow you to add content blocks to specific sections of your theme easily, but not every theme includes a header widget area. 

In this article, we’ll show you how to easily add a WordPress widget to your website header.

How to add a WordPress widget to your website header (2 ways)

Why Add a Header Widget to Your WordPress Site?

Your website header is one of the first things your visitors will see when visiting your WordPress website. By adding a WordPress widget to your header, you can optimize this area to help capture reader attention.

Most website headers will include a custom logo and a navigation menu to help visitors get around your site.

You can also add a header widget above or below this area to feature helpful content, banner ads, limited-time offers, single line forms, and more. 

Here at WPBeginner, we have a header call to action directly below the navigation menu.

Header CTA example

Most WordPress themes have widget ready areas in the sidebar and footer areas of the site, but not every theme adds widget ready areas in the header. 

Editor’s Note: If your theme doesn’t have a widget-ready header area, then you can now create completely custom WordPress themes from scratch (without any coding).

But first, let’s take a look at how to add a WordPress widget to your website header in your existing theme. Simply use the quick links below to jump straight to the method you want to use.

Method 1. Add a WordPress Widget to Your Website Header in WordPress Theme Settings

Many of the best WordPress themes include a header widget area that you can customize to your liking. 

First, you’ll want to see if your current WordPress theme supports a WordPress widget area in the header.

You can find this by going to the WordPress theme customizer or the widget area of your WordPress admin panel. To do this, navigate to Appearance » Customize and see if there is an option to edit the header.

In this example, the free Astra theme has an option called ‘Header Builder’. We’ll show you how to use this feature in Astra, but keep in mind that this will look different depending on the theme you’re using.

Astra header builder

If you click this, it brings you to a screen to edit your header and add widgets. 

At the bottom of the screen, you can completely customize the header, along with the areas above and below the header. Simply hover over one of the empty areas and click the ‘Plus’ icon.

Click plus icon

This brings up a popup menu where you can select ‘Widget 1’. 

There are additional options to choose from, but you’ll need to select one of the ‘Widget’ options to make the header widget-ready.

Select widget 1 option

To add a widget area to your header, click the ‘Widget 1’ box that’s in the header customizer section.

This brings up the option to add a widget.

Click widget 1 box

Next, click the ‘Plus’ add block icon in the left-hand menu. 

This brings up a popup where you can select a widget to add to your header. 

Click plus icon and select widget

You can continue customizing your header and add as many widgets as you’d like.

Once you’re done, make sure to click the ‘Publish’ button to save your changes.

Publish header widget changes

Now you can view your header area with the widget or widgets you added.

Header widget example

Not using Astra?

Another way to see if your theme already has a WordPress header widget is by navigating to Appearance » Widgets in your WordPress admin panel.

Then, see if there’s a widget section labeled ‘Header’ or something similar. 

Go to widgets section for header widget

If there is, then simply click the ‘Plus’ add block icon to bring up the widgets menu.

Then you can add whatever widget you like by clicking on it. 

Header widget section

Make sure you click the ‘Update’ button to save your changes to the header widget area.  

Method 2. Add a WordPress Widget to Your Website Header by Adding Code to WordPress

If your WordPress theme doesn’t currently have a WordPress widget area in the header, then you’ll need to add it manually by adding code to WordPress.

If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Then, you can add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

function wpb_widgets_init() {

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'wpb_widgets_init' );

This code registers a new sidebar or a widget ready area for your theme.

If you go to Appearance » Widgets, then you will see a new widget area labeled ‘Custom Header Widget Area’.

Custom header widget area

Now, you can add your widgets to this new area. For more details, see our guide on how to add and use widgets in WordPress.

However, your header widget won’t display live on your website just yet. We’ll show you how to do that next.

Displaying Your Custom Header Widget in WordPress

Now that you’ve created the header widget area, you need to tell WordPress where to display it on your website. 

To do this, you need to edit your theme’s header.php file. Then, you need to add the following code where you want the widget to display.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

This code will add the widget area you created earlier to your website header area. 

Now, you can visit your WordPress blog to see your header widget area live.

Header widget live

Style Your WordPress Header Widget Area Using CSS

Depending on your theme, you may also need to add CSS to WordPress to control how the header widget area and each widget inside it are displayed. If you don’t know CSS, you can use a plugin like CSS Hero instead.

To learn more, see our guide on how to easily add custom CSS to your WordPress site.

Next, navigate to Appearance » Customize in your WordPress admin panel. 

This brings up the WordPress theme customizer panel. You need to click on the ‘Additional CSS’ tab.

WordPress customizer additional CSS

This lets you add additional CSS directly to your theme and see the changes in real time. 

Here is some sample CSS code to help you get started:

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
		padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

Simply add the CSS code to the ‘Additional CSS’ box.

Add CSS code and publish

Once you’re finished adding your CSS, make sure to click the ‘Publish’ button to save your changes. 

Here is how the custom header widget looks with the CSS changes live.

Header widget example after CSS

We hope this article helped you learn how to add a WordPress widget to your website header. You may also want to see our guide on how to choose the best WordPress hosting and our expert picks of the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

78 CommentsLeave a Reply

    • That would depend on your specific theme, we would first recommend reaching out to your specific theme’s support to see if they have a built-in method for what you’re wanting to do or have recommended settings.

      Admin

  1. Hello, I added the custom header widget successfully, but after updating the theme my custom header widget is not working ? Please tell me the solution! Looking forward to your response. thanks

  2. Excellent code snippets which I was able to adapt and style to do the jobs I wanted. Many thanks for this

  3. Hi WP Beginner,

    How do I get the widget area in the header on the right side of the menu? I want to add the ADD TO CART icon in there.

    • For placement, it would depend on the specific theme you are using, if you check with your theme’s support they should be able to let you know what part of your header.php file to add the code to or if they have a built-in method to do so.

      Admin

  4. Thank You WPBeginner Editorial Team giving a perfect blog to the beginners and middle class coders. It is a big platform to learn and to execute WordPress. You were the big reason for the success of many bloggers and business owners.

  5. Thanks for the tutorial. it works but the trouble I have is that it’s not responsible for mobile devices. is it possible to make the sidebar responsible?

    • I believe you mean responsive in which case, we sadly do not have a recommended method for making this widget responsive at the moment.

      Admin

    • Depending on your specific theme, if there is content before the header.php content, you would want to reach out to the theme’s support

      Admin

  6. hello,
    I would like to make an header like the one in the first picture on the top of this page ( the list 25 website).
    How can I make It?
    Please help me!

  7. well I am unable to access my header.php ! is there any other way to display my header? like from css!

  8. Hello!

    Perfect tutorial.

    Im using it to create a Topbar, but im facing a problem the widgets (in my case 2) are one below the other.

    How can I make them to be displayed side by side?

  9. This tutorial is very useful.
    How to remove the white space above this widget area in Posts? Thanks for any help

  10. What would I have to put in the header.php to ONLY show on the home page but not show on other pages?

    • Hi Mikhail,

      You can use conditional tags like is_home or is_front_page to display things on certain pages in WordPress. For example:

      If ( is_front_page() ) { 
      // code you want to display on the homepage
      } 
      

      Admin

      • Hi, this is really what I’m looking for and it would be great if I could get it to work! Creating the widget area works fine, displaying it does unfortunately not.. I would also like to display it only on the start page.
        I´m not sure
        1) where in the header file to put the display code
        2) where to put this “only-on-startpage”-code and what code goes on line 2
        I understand if my questions are too basic to bother with, but I would be really grateful if someone has time and patience for it anyway..:-) Thanks in advance!!

        • Hi Anna,

          These are perfectly reasonable questions.

          1. You need to put the display code based on where you want to display the header widget. For example, your theme’s header.php file may have a section to display site title, logo, description, and navigation menus. They will probably be wrapped around div tags. You will put your header widget code before or after these areas. If you are unsure, you can place the code at the end of the header.php file.

          2. If you only want to display the widget area on your website’s front page then you can use conditional tags like this:

          if ( is_front_page() ) {
          // your widget display code goes here 
          
          } 
          
        • OK, I cheated and put the widget-code in the front-page.php instead, it worked! Thanks :-)!

    • Hi again, it became visible on start page with css positioning!

      Now it’s only the question of how to put together the only-on-start-page-code with the visibility code…

      Thanks again for kindness and patience..)

  11. Great tutorial thanks. I am trying to implement the JetPack Cookie Consent Widget and despite following your instructions the Cookie Consent bar still appears at the bottom of the page.

    Is it possible the widget is overriding the code?

  12. Does this still work for Twentyseventeen? The functions.php part works fine, but the header.php part doesn’t.

  13. Hello
    pls can someone here help me as how to make this responsive on any mobile device?

    i want to insert a google adsense code here for ads 728 x 90 banner sizes but any time i do so, it shows perfectly on desktops but on mobile devices it becomes weird.
    thank you

  14. I have successfully created a header widget and It was really easy, thanks to you all. But I actually wanted it in the POSTS, not on the Homepage because I’m using Nikko Portfolio theme and it looks awful.
    Please Help.

  15. I placed the code in my functions.php file and added my widget code in the header.php file and added my widget text and saved.
    When I move on to editing pages, upon clicking Update, I get a white screen and can’t see my page.
    I then have to go back to /wp-admin to see the dashboard. There are no console errors when I click update but just a white screen.

  16. This is great for that header advertizment thing, but what I want to do is add a pay pal donation button to my header. (Right side) cant believe there is no video tutorials out there on how to make a a widgetized header space to drag your pay pal widget into so that it appears on the right side of your header.. i can imagine there is alot of people who could benefit from an instructional on this.

  17. This is a great tutorial, but I would like to create a widget area that can be placed above the header area would that also be possible?

  18. Just updated everything and it’s working great on my desktop. Now, if you could tell me how to get the widget to display on my mobile device that would be great! Did I mess something along the way?

  19. Hi, many thanks for writing this, it has helped me massively. However, with my website: how do I get the widget to appear at the far right hand side. When I use the option to show search field in the header, this is the place I want it to go?

    Thanks in advance! :)

  20. I am confused. I don’t understand how to get an image into the widget and let the user change the image. I don’t see where your image is coming from.

  21. Would it be possible to make a tutorial about how to make a TopBar with sections (Social media icons, Notice, Search, Woocommerce cart).

    No plugin does really do that well

    Thanks

  22. If i want to add multiple custom widget areas do i need to add a new function to functions.php for each? or just add them in the area i want?

  23. I managed to use the widget in the navigation bar instead of the header area as I wanted to add a language toggle option at this section. I have a small problem where I can’t move the language two flags to the any horizontal location. I tried to add margin-right: 100px; to the advanced CSS section but it didn’t change. It might be something else centering all the navigation content but I want to make sure if it could be fixed with the widget.

    • Hey how did you edit the code to put it in the nav bar? I’m currently trying to do the same thing without any luck.

  24. When I attempt to add more than one custom widget area, I receive a 500 Error on my website. Is there a reason for this? Is it possible to create more than one custom widget area for a theme?

  25. Hi! When i try to update the function.php file, there is this fatal error:
    Fatal error: Cannot redeclare wpb_widgets_init()
    I am not sure if i did a wrong edit. Could you help

    • Hey Nina,

      This means that wpb_widgets_init function already exists in your functions.php file. You will have to replace it like wpb2_widgets_init to make it unique or remove the previous code that you added.

      Admin

  26. Hello,

    Thanks so much for this, it is really helpful.

    One issue I am running into: My widget is just a menu of a couple of text links to pages. Here is my site:

    See how the text is all the way against the right side of the header area? I would like to use a right margin to line it up under “Contact” without turning the margin area white.

    Also, would love to make the text black. :)

    Many thanks if you can help with these tweaks!

    Sam

  27. Your blog is most helpful. Thank you for helping us made modifications to Twenty Seventeen. People like you make using a new wordpress theme like Twenty-seventeen much easier.

    I am relatively new to word press and would like to try some additional modifications to Twenty seventeen.

    I would like to create a new widget for wp pages. I am trying to figure out how I can take your blog information on how to make a new widget for the header and apply it to a wp page in the twenty seventeen theme. I am getting stuck.

    Could you show us now to create a new widget for a page? That would be awesome.

    Thanks
    Tommy

  28. Thank you very much Mr. Admin.You are teahing to us ‘how to make our own web site. l always follow your posting and l make my own web site. Thank you very much.

  29. I used this and though it worked in adding a custom widget area to the top of my page, i could not get it to align with the other items in the header (company logo and nav menu) in Cherry. No matter where I put it in the header.php, it either appeared above or below the other items. I wanted to use it to create a phone number block between the logo and the nav menu. Though I could get it to center in correct spot horizontally, i could not get it to appear between them. To give you a better idea of what I need, imagine that on this very page’s header, you wanted to move the nav menu justified to the right and put your 800 number between it and the “wpbeginner” logo. How could I use this code (or a variation of it) to do that?

  30. Thank you so much for this (and all) of your detailed tutorials! Could you please tell me how to implement a header widget, excluding the Homepage?

    • In the code that you added to header.php change the first line:
      if ( is_active_sidebar( 'custom-header-widget' ) ) : ? >
      with this one:
      if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page ) : ?

    • Sorry, I missed something!
      The line that you have to add is:
      if ( is_active_sidebar( 'custom-header-widget' ) && ! is_front_page() ) : ?>

  31. Wow, and i taught i was limited to adding widgets only in the sidebar, thanks for the tips.

    Mihaita,

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.