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.
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.
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.
- Add a WordPress header widget in WordPress theme settings
- Add a WordPress header widget by adding code to WordPress
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.
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.
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.
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’.
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.
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.
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.
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.
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.
The post How to Add a WordPress Widget to Your Website Header (2 Ways) first appeared on WPBeginner.
January 27, 2022 at 05:08PM
