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.
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>', |
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’
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.
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' ); ?> |
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.
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 { |
3 |
background-color: #f7f7f7; |
4 |
border-bottom:1px solid #eeeeee; |
10 |
text-transform: uppercase; |
12 |
background-color: #feffce; |
And this is how your arbitrary widget area will look on the standard Twenty Seventeen theme.
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.
