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
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 ».
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.
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 ».
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.
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.
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.
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.
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. .
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to create Excel and Word documents on WordPress
- How to customize the WordPress logo of the dashboard
- How to find files to edit from a WordPress theme
- How to customize the CSS of your WordPress 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.
...
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!
The code adding header.php does not work
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?
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.
OKAY.
🙂 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…
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.
Hello Thomas,
It takes a bit of CSS knowledge for that. But I recommend this excellent WordPress plugin: https://codecanyon.net/item/yellow-pencil-visual-css-style-editor/11322180?ref=voirplusgrand