Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How To Easily Add A WordPress Widget To Your Website Header

Do you want to add a Wordpress Widget to your website’s header? In this article, we will show you how to easily add a WordPress widget to your site’s header. This is how our custom header widget area looked at the default Twenty Seventeen theme.

Widgets allow you to easily add content blocks into designated sections of your theme.

How To Easily Add A WordPress Widget To Your Website Header

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

WordPress widgets areas allow you to easily add your content blocks to a designated area in your WordPress theme.

These designated widget areas are called sidebars are widget-ready areas.

A widget area in the header or before site content can be used to display advertisements, recent articles, or anything you want to add.

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

Typically, All WordPress themes, add sidebars next to the content or in the footer region.

Not many of the WordPress themes, add widget-ready areas above the content area or in the header section.

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

Step 1:

How To Display Your Custom Header Widget

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

That’s because we have not yet told WordPress where to display this widget area. Let’s do that in this simple step.

You only need to edit the header.php file in your WordPress theme and add this below code where you want to display your custom widget area on your website.

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' ); ?>
<?php endif; ?>

Don’t forget to save your changes when done.

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

You will observe that it looks a bit unpolished.

That’s where you will need CSS to make it appear better.

Step 2: 

Creating a Header Widget Area

The very first, we only need to make a custom widget area.

This straightforward step will allow you to pick up your custom widget area on Appearance » Widgets page in your WordPress dashboard.

You just need to add this below code to your theme’s functions.php file.this below 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 above code reads a new sidebar or a widget-ready area of your WordPress theme.

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

custom sidebar area

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

Step 3:

Style Your Header Widget Area Using CSS

Depending on your WordPress theme, you will just need to add a CSS code to manipulate how the header widget area and each widget inside it are displayed.

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

For more details, find out our CSS Hero review.

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

This will set up the WordPress theme customizer interface.

You will need to come home on the ‘Additional CSS’ tab.

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

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

Here are some sample CSS to help you stick 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 your header widget area looked at the default Twenty Seventeen theme.

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

If you liked this article, then please subscribe to our YouTube Channel for WordPress, Blogging & SEO video tutorials. You can also find us on Facebook and Twitter.

I’m wishing you the best of luck!

Get started on WordPress today and start turning your spare time into spare cash.

Don’t forget to share this article with your friends.

Best of luck and have a great flight!

How To Easily Add A WordPress Widget To Your Website Header is a post from Creativedreamtech - SEO, SMO, Blogging, WordPress, Web Hosting, Make Money Online Tips.

This post first appeared on SEO, Blogging, WordPress, Web Hosting, Make Money Online,Mobile & Email Marketing Tips, please read the originial post: here

Share the post

How To Easily Add A WordPress Widget To Your Website Header


Subscribe to Seo, Blogging, Wordpress, Web Hosting, Make Money Online,mobile & Email Marketing Tips

Get updates delivered right to your inbox!

Thank you for your subscription