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. See our guide on how to add and use widgets in WordPress for detailed instructions on adding widgets.

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. For more details see our CSS Hero review.

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.

You may need to adjust the CSS to match your theme. Take a look at our guide on how to add custom styles to WordPress widgets.

We hope this article helped you learn how to add a WordPress widget to your site’s header. You may also want to see our list of 25 most useful WordPress widgets for your site.

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.