Widgets are one of the best ways to add extra content or functionality to the top of your WordPress website. These handy content blocks let you easily drop things like social media feeds, email signup forms, or even recent posts into designated areas of your theme.
But we have come across quite a few WordPress themes that don’t include a built-in widget area for the header. Some of our readers have asked us about the best way to handle this.
In this article, we will show you how to easily add a WordPress widget to your website header, making it a valuable and engaging part of your online presence.
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.
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.
But first, let’s take a step-by-step 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:
Add a WordPress Widget to Your Website Header in WordPress Theme SettingsAdd a WordPress Widget to Your Website Header by Adding Code to WordPress
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 will 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.
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.
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.
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.
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.
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.
Now, you can view your header area with the widget or widgets you added.
Here is a screenshot of how it appears on our demo site.
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.
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.
Make sure you click the ‘Update’ button to save your changes to the header widget area.
If your WordPress theme doesn’t 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 or by using a code snippets plugin such as WPCode (recommended):
function wpb_widgets_init() {
register_sidebar( array(
‘name’ => ‘Custom Header Widget Area’,
‘id’ => ‘custom-header-widget’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
) );
}
add_action( ‘widgets_init’, ‘wpb_widgets_init’ );
For more details, you can see our guide on how to add custom code in WordPress without breaking your site.
It will walk you through the WPCode method.
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’.
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 will 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:
This code will add the custom widget area you created earlier to your website header area.
Now, you can visit your WordPress blog to see your header widget area 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. This can be done in a few ways:
To learn more, see our guide on how to easily add custom CSS to your WordPress site.
For this article, we will take a quick look at how to add custom CSS using the WPCode plugin and the WordPress Theme Customizer.
In Method 2 above, we showed you how to use WPCode to add a code snippet to your functions.php file. You can also add this plugin to add custom CSS.
When you create a new snippet in WPCode, make sure you select the code type ‘CSS Snippet’ from the dropdown menu on the right and that the ‘Auto Insert’ option is selected.
In the code preview section, you need to add the CSS for styling your header widget.
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;
}
After that, you need to make sure the ‘Active’ setting is toggled on, and then click the ‘Save Snippet’ button at the top right of the screen.
To use the Theme Customizer instead, you should 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.
This lets you add additional CSS directly to your theme and see the changes in real time.
Simply add the CSS code that we showed you above to the ‘Additional CSS’ box.
Once you have 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.
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 add header and footer code in WordPress and our expert picks of the best WordPress development tools.
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.
