Skip to Main Content

How to add a widget to the header of your WordPress blog

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

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.

Notes: 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

Typically, 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

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 look and optimize the grip 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 flexible WordPress plugin 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

The WordPress Justified plugin is a responsive gallery plugin that aligns your thumbnails in a justified grid using jQuery, as 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

this WordPress plugin as its name suggests allows you to schedule the e-mail publication on your website. It is part of the plugins of the WordPress plugin "Follow My Blog Post". 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

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

...

This article features 8 comments

  1. Hi! I would like to know if you have a chance to tell me how to put an "info box" similar to the one used here at the beginning of this article, including the clickable buttons next to "Download" and "Spreadsheets", the layout is very nice. Thank you!

  2. Sir, I tried it. Indeed, the widgets page is output defining the addition of widgets. And I added it. When step 2 fails to enter the code in the php header. Guess 2, what's the mistake, sir?

  3. In the first code shown, which is to generate a new widget area, start by typing "function", but I would say it starts with "function". Actually this code has several errors which make it wrong while writing it. I would appreciate it being corrected.

  4. 🙂 Everything is OK, only no one in their advice explains where to add the code to “functions.php !!! " It is important! Everyone uses the “different” themes…

  5. Hello,

    Thank you for these supports.

    I knew how to add my search bar in the personalized header. On the other hand, to personalize the style is more complicated ...

    I would like to change the size, the position (that it does not take the entire width of the header) as well as the background color.

    Thank you in advance.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
7 shares
Share1
tweet
Save6