How To Add WordPress Widgets To The Site Header

4 minutes read

Would you like to add a WordPress widget to your site’s header area? Widgets allow you to easily add content blocks to specific places in your theme. In today’s article, we will show you how easy it is to add a WordPress widget to the site header.

Why And When It May Be Necessary To Add A Widget To The Header

Widgets allow you to easily add content blocks to specific areas of your theme. These areas are called sidebars or widget areas.

The area for widgets in the header or in front of the content can be used to display ads, fresh materials, etc.

This area is usually called “Under the Fold” and is used by many popular resources to display important information.

Above The Fold

Usually in WordPress themes sidebars are added next to the content or in the footer. And only some topics have a widget area above the content or in the header.

That is why in the article we will describe how to add a widget area to the header of your site.

Step 1. Create An Area For The Widget In The Header

First we need to create our own widget area. In this step, we will add an arbitrary area, which will be visible on the Appearance »Widgets page in the site console.

To do this, add the following code to the theme’s functions.php file:

1 function wpb_widgets_init() {
3     register_sidebar( array(
4         'name'          => 'Arbitrary area for widgets in the header',
5         'id'            => 'custom-header-widget',
6         'before_widget' => '<div class="chw-widget">',
7         'after_widget'  => '</div>',
8         'before_title'  => '<h2 class="chw-title">',
9         'after_title'   => '</h2>',
10     ) );
12 }
13 add_action( 'widgets_init''wpb_widgets_init' );

This code registers a new sidebar or area for widgets in your theme.

Now you can go to the Appearance page »Widgets and you will see a new area called ‘Arbitrary area for widgets in the header’

Custom Side Bar

Add to it a text widget to check and save.

Step 2: Display An Arbitrary Area For The Widget In The Header

If you now go to the site, you will not see the added text widget.

And you will not see it because we have not yet told WordPress exactly where to display this area for widgets. Now this will do.

You will need to edit the header.php file of your theme and add the following code to the place where you need to display the area for the widgets.

1 <?php
3 if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
4     <div id="header-widget-area" class="chw-widget-area widget-area"role="complementary">
5     <?php dynamic_sidebar( 'custom-header-widget' ); ?>
6     </div>
8 <?php endif; ?>

Remember to save your changes.

Now go to the site and see the added widget in the header.


Of course, now it’s all not very nice, and therefore you need to add a bit of CSS in order to refine the result.

Step 3: Styling The Widget In The Header Using CSS

Depending on your theme, you will need to add CSS in order to shape the area for the widgets in the header and each widget inside it.

The easiest way to do this would be to use the CSS Hero plugin. It will allow you to use an intuitive interface to change the CSS of any WordPress theme.

If you do not want to use the plugin, then you can add CSS to your theme on the Appearance »Customize page .

The customizer interface WordPress theme will appear. Here we select the ‘Custom CSS’ title.

Additional CSS

The custom CSS tab in the customizer will allow you to add your own CSS and immediately see these changes.

Below is a sample code for minimal widget layout.

1 div#header-widget-area {
2     width100%;
3     background-color#f7f7f7;
4 border-bottom:1px solid #eeeeee;
5     text-aligncenter;
6 }
7 h2.chw-title {
8     margin-top0px;
9     text-alignleft;
10     text-transformuppercase;
11     font-sizesmall;
12     background-color#feffce;
13     width130px;
14     padding5px;
15     }

And this is how your arbitrary widget area will look on the standard Twenty Seventeen theme.

Header Widget

Most likely, you will need to customize the CSS code to fit the area into the design of the theme.

We hope that this article has helped you learn how to add WordPress widgets to your site’s hider.

For all questions and feedback, please write in the comments below.

Facebook Twitter LinkedIn Telegram Pocket

Related Posts:

To embed external content in a WordPress widget, follow these steps:First, log in to your WordPress admin panel.Navigate to the Appearance section and click on Widgets.In the Widgets section, select the widget area where you want to add external content.Click ...
Filtering posts in WordPress by category allows you to display only the posts that belong to a specific category or categories. This can be helpful if you want to create custom pages or sections on your website that focus on specific topics.To filter posts by ...
Would you like to remove the “WordPress site” link from the footer of your site? Recently, one of our readers asked if it was possible to remove copyrights from the footer in WordPress themes. In this article, we will show you how to remove a link for a WordPr...