Do you need so as to add a WordPress widget on your website online header field? 

Widgets let you upload content material blocks to precise sections of your theme simply, however now not each and every theme features a header widget field. 

On this article, we’ll display you the right way to simply upload a WordPress widget on your website online header.

How to add a WordPress widget to your website header (2 ways)

Why Upload a Header Widget to Your WordPress Web site?

Your website online header is likely one of the first issues your guests will see when visiting your WordPress website. By way of including a WordPress widget on your header, you’ll optimize this field to assist seize reader consideration.

Maximum website online headers will come with a custom logo and a navigation menu to assist guests get round your web site.

You’ll be able to additionally upload a header widget above or underneath this field to characteristic useful content material, banner commercials, limited-time provides, single line forms, and extra. 

Right here at WPBeginner, we’ve got a header call to action immediately underneath the navigation menu.

Header CTA example

Maximum WordPress topics have widget waiting spaces within the sidebar and footer spaces of the web site, however now not each and every theme provides widget waiting spaces within the header. 

Editor’s Observe: In case your theme doesn’t have a widget-ready header field, then you’ll now create completely custom WordPress themes from scratch (with none coding).

However first, let’s check out the right way to upload a WordPress widget on your website online header for your current theme. Merely use the fast hyperlinks underneath to leap instantly to the process you need to make use of.

Means 1. Upload a WordPress Widget to Your Site Header in WordPress Theme Settings

Lots of the best WordPress themes come with a header widget field that you’ll customise on your liking. 

First, you’ll need to see in case your present WordPress theme helps a WordPress widget field within the header.

You’ll be able to in finding this by means of going to the WordPress theme customizer or the widget field of your WordPress admin panel. To try this, navigate to Look » Customise and spot if there’s an approach to edit the header.

On this instance, the unfastened Astra theme has an possibility known as ‘Header Builder’. We’ll display you the right way to use this option in Astra, however needless to say this may glance other relying at the theme you’re the usage of.

Astra header builder

For those who click on this, it brings you to a display screen to edit your header and upload widgets. 

On the backside of the display screen, you’ll utterly customise the header, together with the spaces above and underneath the header. Merely hover over one of the vital empty spaces and click on the ‘Plus’ icon.

Click plus icon

This brings up a popup menu the place you’ll choose ‘Widget 1’. 

There are further choices to make a choice from, however you’ll want to make a choice one of the vital ‘Widget’ choices to make the header widget-ready.

Select widget 1 option

So as to add a widget field on your header, click on the ‘Widget 1’ field that’s within the header customizer phase.

This brings up the choice so as to add a widget.

Click widget 1 box

Subsequent, click on the ‘Plus’ upload block icon within the left-hand menu. 

This brings up a popup the place you’ll choose a widget so as to add on your header. 

Click plus icon and select widget

You’ll be able to proceed customizing your header and upload as many widgets as you’d like.

Whenever you’re achieved, be sure to click on the ‘Put up’ button to save lots of your adjustments.

Publish header widget changes

Now you’ll view your header field with the widget or widgets you added.

Header widget example

No longer the usage of Astra?

Differently to look in case your theme already has a WordPress header widget is by means of navigating to Look » Widgets for your WordPress admin panel.

Then, see if there’s a widget phase classified ‘Header’ or one thing equivalent. 

Go to widgets section for header widget

If there’s, then merely click on the ‘Plus’ upload block icon to deliver up the widgets menu.

Then you’ll upload no matter widget you favor by means of clicking on it. 

Header widget section

Be sure you click on the ‘Replace’ button to save lots of your adjustments to the header widget field.  

Means 2. Upload a WordPress Widget to Your Site Header by means of Including Code to WordPress

In case your WordPress theme doesn’t recently have a WordPress widget field within the header, you then’ll wish to upload it manually by means of including code to WordPress.

For those who haven’t achieved this sooner than, then see our information on how to copy and paste code in WordPress.

Then, you’ll upload the next code snippet on your functions.php record, in a site-specific plugin, or by means of the usage of a code snippets plugin.

serve as wpb_widgets_init() {

	register_sidebar( array(
		'title'          => 'Customized Header Widget House',
		'identity'            => 'custom-header-widget',
		'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); } add_action( 'widgets_init', 'wpb_widgets_init' );

This code registers a brand new sidebar or a widget waiting field on your theme.

For those who pass to Look » Widgets, then you’ll see a brand new widget field classified ‘Customized Header Widget House’.

Custom header widget area

Now, you’ll upload your widgets to this new field. For extra main points, see our information on how to add and use widgets in WordPress.

Alternatively, your header widget gained’t show survive your website online simply but. We’ll display you the way to do this subsequent.

Showing Your Customized Header Widget in WordPress

Now that you just’ve created the header widget field, you wish to have to inform WordPress the place to show it to your website online. 

To try this, you wish to have to edit your theme’s header.php record. Then, you wish to have so as to add the next code the place you need the widget to show.


This code will upload the widget field you created previous on your website online header field. 

Now, you’ll seek advice from your WordPress blog to look your header widget field reside.

Header widget live

Taste Your WordPress Header Widget House The use of CSS

Relying to your theme, you may additionally wish to upload CSS to WordPress to regulate how the header widget field and every widget inside of it are displayed. For those who don’t know CSS, you’ll use a plugin like CSS Hero as a substitute.

To be informed extra, see our information on how to easily add custom CSS to your WordPress site.

Subsequent, navigate to Look » Customise for your WordPress admin panel. 

This brings up the WordPress theme customizer panel. You want to click on at the ‘Further CSS’ tab.

WordPress customizer additional CSS

This permits you to upload further CSS immediately on your theme and spot the adjustments in actual time. 

Right here is a few pattern CSS code that can assist you get began:

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px forged #eeeeee;
    text-align: heart;
		padding: 20px;
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;

Merely upload the CSS code to the ‘Further CSS’ field.

Add CSS code and publish

Whenever you’re completed including your CSS, be sure to click on the ‘Put up’ button to save lots of your adjustments. 

This is how the tradition header widget appears to be like with the CSS adjustments reside.

Header widget example after CSS

We are hoping this newsletter helped you learn to upload a WordPress widget on your website online header. You might also need to see our information on how to choose the best WordPress hosting and our skilled selections of the best live chat software for small companies.

For those who favored this newsletter, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be able to additionally in finding us on Twitter and Facebook.

The put up How to Add a WordPress Widget to Your Website Header (2 Ways) first seemed on WPBeginner.

WordPress Maintenance

[ continue ]