Would you like to add a WordPress widget to the header area of ​​your website?

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

In this tutorial, we will show you how to easily add a WordPress widget to the header of your website.

Footnotes: This is an intermediate level tutorial. You will need to add code to the files of your WordPress theme and master some CSS.

But before any modification discover our 5 WordPress plugins to save your blog or even How to install a WordPress theme et How many plugins to install on WordPress.

Then let's go back to why we are here. 

Why and when do you need to add a widget on the header?

Widgets allow you to easily add blocks of content to a designated area in your WordPress theme. These designated areas are called " sidebars "Or areas of" widgets».

A widget area on the header can be used to display ads, recent articles, or whatever you want.

This particular domain is used on all popular websites to display really important information.

See also How to add custom widgets after posting on WordPress

zone widgetisee in wordpress head

In general, WordPress themes add sidebars next to content or in the footer area. Very few WordPress themes add widget areas above the content or in the header.

We also advise to discover our MailChimp tutorial in English: the complete guide to creating a newsletter

That's why in this tutorial we will show you how to add a widget area to the header of your WordPress website.

Step 1: Create a widget area

First of all, we need to create a custom widget area. This step will allow you to see a custom widget area in " Appearance> Widgets On your WordPress dashboard.

You will need to add this code to the file functions.php Of your theme.

function bpc_widgets_init () {register_sidebar (array ('name' => 'Custom Header Widget Area', 'id' => 'custom-header-widget', 'before_widget' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'bpc_widgets_init');

This code saves a new sidebar or widget area on your WordPress theme.

If you've never installed WordPress locally, find out How to install WordPress locally on a PC / Windows with XAMPP

You can go to " Appearance> Widgets And you'll see a new widget area marked " Custom Header Widget Area ».

new WordPress widget zone

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

Try also our guide on adding widgets.

Step 2: Show your widget in the header

If you visit your website, you will not be able to see the text widget you just added.

Because we have not yet shown you how to display the zones of custom widgets On WordPress.

This is what we will do in this step.

Here is also for you a list of 5 Critical WordPress plugins to boost your blog's earnings

You will need to edit the file header.php In your WordPress theme and add this code where you want to display the widgets.


 
 
 
 

Don't forget to save your changes.

You can then visit your website and you will see the text widget in your header.

demo site in mind

The result will not necessarily be the most attractive. That's why you will need CSS so that it displays correctly.

3 Step: Give style to your CSS headers

Depending on your WordPress theme, you will need to add some CSS code to control how the header and widget area are displayed.

One of the easiest ways to do this is to use CSS Hero. The latter allows you to use an intuitive user interface to modify the CSS of a WordPress theme.

We also advise you to discover this What can you do with the Yellow Pencil WordPress plugin?

If you do not want to use a plugin, you can add custom CSS to your WordPress theme by visiting " Appearance »Personalize To customize the WordPress theme.

Read also our article on 10 WordPress plugins to improve the traffic of a blog

This will allow you to display the WordPress Customizer interface. You will need to click on the " Additional CSS ».

additional css WorDPress

The tab « Additional CSS " in the " Customizer Allows you to add your custom CSS while viewing the changes on the preview to the right.

For reasons inherent to this tutorial, we assume that you will use this area to add a single widget to display banner ads, or a custom menu widget.

Here's an example of CSS to get you 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; }

Here's how our custom widget will show up on the Twenty Seventeen theme header.

demo theme twenty seventeen wordpress

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Smart4y Tooltip

Smart4y Tooltip is a WordPress Plugin flexible tool dedicated to creating modern tooltips without any dependency on the Javascript library. It is fully responsive and offers the possibility of inserting HTML content.

Smart4y Tooltip Responsive WordPress Plugin

Its WYSIWYG editor will allow you to visually create each tooltip without having to enter any code, but if you are willing you can always do it.

Discover also our 10 WordPress plugins to evaluate articles from your Blog

Its other features are: Builder page support, a fairly responsive layout, the ability to define global parameters for all tooltips or to define specific parameters for each tooltip, support for predefined visual effects, the calculation of the position of the tooltip on the resized window, detailed documentation, etc….

Download | Demo | Web hosting

2. Justified

Le WordPress Plugin Justified is a responsive gallery plugin that aligns your thumbnails in a justified grid using jQuery, like on Flickr. 

Justified-Plugin For WordPress-Photographers,

It brings features that will distinguish your galleries from those of competitors!

Its main features are: responsive layout, special flyover effects, automatic grid realignment,  a shortcode editor, appearance ecompletely customizable, the support of pviewers and many others…

Download | Demo | Web hosting  

3. Schedule Emails

ce WordPress Plugin as the name suggests allows you to schedule email publication on your website. It is part of the “Follow My Blog Post” WordPress plugin extensions. Schedule Emails Follow My Blog Post wordpress plugin

You will now be able to schedule the publication of your emails according to hours, days, or weeks.

Read also our article on 10 WordPress plugins to use maps on your website

It offers the possibility to send a combined email for all notifications instead of each email for each notification and also allows to define different email templates for different email, finally to make the reception of your emails more digestible. .

DownloadDemo |Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's all for this tutorial, I hope it will help you add a widget area on the header of your WordPress theme. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

If you have suggestions or remarks, leave them in our section Comments.

...