How To Add Widgets In Your Website Header [ In 3 Steps ]

Do you want to add a WordPress widget to your website’s header area? In this WordPress Tutorial, you will learn how to add widgets to your WordPress WebSite header.

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

But WordPress also gives the option to code custom widgets manually for all users. In this WordPress tutorial, you will also learn how to create custom widget WordPress without a plugin

A lot of WordPress themes with widget area are now available in WordPress premium themes. you will also find WordPress custom widget plugin to add a widget in your WordPress theme header.

In this WordPress tutorial, I’m going to show you how to create a WordPress widget without a plugin. and How to edit widgets in WordPress

Most sites will use the header element to show site-logos or other business and site-related graphics and texts. However, many will also use the header to display advertisements or affiliate banners. For instance, you can easily paste the code from Google Adsense or affiliate code into the header section. that is a one of reason Why use a header widget?

Adding WordPress Widgets in Your WordPress Site

How To Adding Widgets in Header

Unfortunately, not all themes offer a header widget to modify. In this situation, you need to add some code to your WordPress theme to add a widget to your WordPress theme header.

Before you commit to making changes to the header in your site, make sure you need one. Many WordPress themes have a collection of widgets already available in the Appearance » Widgets section.

So Let’s see how to call widget in WordPress. Here is a three-step process to add a new header widget to your WordPress website.

Step 1. Creating a Header Widget Area

First, You need to create a custom widget area That will allow you to view your custom widget area on Appearance » Widgets page in your WordPress dashboard.

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

Go to Dashboard » Appearance » and click on the theme editor

talksindepth.com-Apperance-widgets-39

In the first time, you will get a warning message screen. click on “I Understand”

talksindepth.com-Apperance-widgets-40

On the left side of the next screen, you will see “Functions.php” file of your theme. By default, WordPress will show the currently activated theme you’re using. However, you can edit another by choosing a different one from the “Select theme to edit” drop-down above the list of files on the right.

Click on “Functions.php” file

talksindepth.com-Apperance-widgets-41

Now add following code into “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' );

Once you add above code in a function.php file, click the “Update File” button.

talksindepth.com-Apperance-widgets-42

This will register new sidebar or a widget ready area in your theme.

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

Now you can add a text widget to this newly created widget area and after adding a text widget, save it.

But still, 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.

Step 2: Display Your Custom Header Widget:

To display this widget area in your WordPress theme, you need to add some code in your header.php file

You will need to edit the header.php file in your WordPress theme.

Go to Dashboard » Appearance » and click on the WordPress Theme editor 

Click on header.php in the right side column

talksindepth.com-Apperance-widgets-44

and add following 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; ?>

After Adding the code click on Update File button.

You can now visit your website and you will see your header widget area in your website header.

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

3. Customizing Header Widget in WordPress:

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

You can also add coding to customize the header widget area either directly through the editor or through the Customizer of your theme. For this, you need CSS knowledge.

If you’re not 100 percent sure what you’re doing, it’s easy to break a site on the coding level.

If you’d like to read more about CSS, W3 Schools is a great platform that is free to use in terms of learning. Most coding elements on that website can be used in WordPress site with ease.

Another 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.

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

Further reading:

  • Thinking of getting into blogging? Here’s our WordPress Tutorial on how to start a blog 
  • Also, refer WordPress tutorial on How To Choose The Best Domain Name
  • Here’s how to install WordPress For First Time.

Need Help?

You can send us your questions using our contact form, and we will answer your question directly. You can also personally call me.  Or WhatsApp me on my mobile number +91 91730 80525.

Join TalksInDepth:

As TalksInDepth is a free resource site, hence you can visit here any time.

Here is how to make sure that you never miss any of our new WordPress tutorial:

Thank you for visiting TalksInDepth. We look forward to helping you to learn WordPress step by step TalksInDepth.

5/5 (3)

Please rate this

TalksInDepth

Founder, CEO and Digital Marketer at TalksInDepth. I am a full-time blogger, Here I write about Starting & managing a blog, WordPress, social media, SEO, and making money online. Join me talksindepth.com to learn how to start a blog and build a profitable side business. Let’s chat on Twitter about the blog and making money online.

Love To Hear Your Thoughts!