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() {
2
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     ) );
11
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
2
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>
7
8 <?php endif; ?>

Remember to save your changes.

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

Unstyled-Widget

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:

Do you want to add spaces or indents for paragraphs in WordPress? The main part of your texts on the site is left justified, but sometimes you may need to add indents for the first line of the paragraph to improve the readability of the text. In this article, we will show you how easy it is to add indents for paragraphs in WordPress. Method 1: Use The Buttons To Add Indents In The Visual Editor By default, most WordPress themes will display paragraphs aligned to the left. If you want to indent...
Have you decided to add keywords and a meta description to WordPress content? Keywords and page descriptions allow you to improve your site’s SEO. In this article, we will show you how to properly add keywords and meta descriptions in WordPress.   Why Add Keywords And Meta Descriptions To WordPress Key words and descriptions will allow you to tell search engines about your content in posts and pages. Keywords are important words or phrases that people most often request if they were looking...
Do you want to add notifications to the admin panel in WordPress? Admin notifications are used by the WordPress core, themes, and plugins to display warnings, notifications, and important information for users on the screen. In this article, we will show you how to add notifications to the WordPress admin panel. Why And When Should I Use Admin Messages In WordPress? WordPress uses notifications in the admin panel to inform users of errors, warnings and messages about the successful completion ...