How to Add a WordPress Widget to Your Website Header

Do you want to add a WordPress widget to your website’s header area? Widgets allow you to easily add content blocks into designated sections of your theme. In this article, we will show you how to easily add a WordPress widget to your site’s header.

Note: This is an intermediate level tutorial. You will need to add code to your WordPress theme files and write CSS.

Why and When You Need a Header Widget on Your Site?

Widgets allow you to easily add content blocks to a designated area in your WordPress theme. These designated areas are called sidebars or widget-ready areas.

A widget ready area in header or before content can be used to display ads, recent articles, or anything you want.

This particular area is called ‘Below the fold’ and all popular sites use it to show really important stuff.

Typically, WordPress themes add sidebars next to the content or in footer area. Not many WordPress themes add widget-ready areas above the content are or in the header.

That’s why in this article, we will cover how to add a widget area to your WordPress website’s header.

Step 1. Creating a Header Widget Area

First, we need to create a custom widget area. This step will allow you to see your custom widget area on Appearance » Widgets page in your WordPress dashboard.

You will need to add this code to your theme’s functions.php file.

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.

You can now go to Appearance » Widgets page, and you will see a new widget area labeled ‘Custom Header Widget Area’.

Go ahead, and add a text widget to this newly created widget area and save it.

Step 2: Display Your Custom Header Widget

If you visit your website now, you will not be able to see the text widget you just added to your newly created header widget.

That’s because we haven’t yet told WordPress where to display this widget area.

Let’s do that in this step.

You will need to edit the header.php file in your theme and add this code where you want to display your custom widget area.

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

Don’t forget to save your changes.
You can now visit your website and you will see your header widget area.

You will notice that it looks a bit unpolished. That’s where you will need CSS to make it look better.

Step 3: Style Your Header Widget Area Using CSS

Depending on your theme, you will need to add CSS to control how the header widget area and each widget inside it is displayed.

The easier way to do this is by using CSS Hero plugin. It allows you to use an intuitive user interface to change CSS of any WordPress theme.

If you don’t want to use a plugin, then you can add custom css to your theme by visiting Appearance » Customize page.

This will launch the WordPress theme customizer interface. You will need to click on the ‘Additional CSS’ tab.

The additional CSS tab in theme customizer allows you to add your custom CSS while watching the changes appear in the live preview.

For the sake of this tutorial, we are assuming that you will be only using this area to add a single widget to display banner ads, or a custom menu widget.

Here is some sample CSS to help you get started.

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

This is how our custom header widget area looked on the default Twenty Seventeen theme.

We hope this article helped you learn how to add a WordPress widget to your site’s header.