How to Add a WordPress Widget to Your Website Header (2 Ways)

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


Do you wish to include a WordPress widget to your web site header location? 

Widgets permit you to include web content obstructs to details areas of your style quickly, yet not every style consists of a header widget location. 

In this post, we’ll reveal you exactly how to quickly include a WordPress widget to your web site header.

Why Include a Header Widget to Your WordPress Website?

Your web site header is just one of the very first points your site visitors will certainly see when seeing your WordPress web site. By including a WordPress widget to your header, you can enhance this location to assist catch visitor focus.

The majority of web site headers will certainly consist of a customized logo design and also a navigating food selection to assist site visitors navigate your website.

You can additionally include a header widget over or listed below this location to include practical web content, banner advertisements, limited-time deals, solitary line kinds, and also a lot more. 

Right Here at WPBeginner, we have a header phone call to activity straight listed below the navigating food selection.

Header CTA example

The majority of WordPress styles have widget prepared locations in the sidebar and also footer locations of the website, yet not every style includes widget prepared locations in the header. 

Editor’s Note: If your style doesn’t have a widget-ready header location, after that you can currently produce entirely customized WordPress styles from the ground up (with no coding).

Yet initially, allow’s have a look at exactly how to include a WordPress widget to your web site header in your existing style. Merely utilize the fast web links listed below to leap right to the approach you wish to utilize.

Approach 1. Include a WordPress Widget to Your Internet Site Header in WordPress Motif Setups

A Number Of the ideal WordPress styles consist of a header widget location that you can tailor to your preference. 

Initially, you’ll wish to see if your present WordPress style sustains a WordPress widget location in the header.

You can discover this by mosting likely to the WordPress style customizer or the widget location of your WordPress admin panel. To do this, browse to Look » Personalize and also see if there is an alternative to modify the header.

In this instance, the complimentary Astra style has actually an alternative called ‘Header Home builder’. We’ll reveal you exactly how to utilize this function in Astra, yet remember that this will certainly look various depending upon the style you’re making use of.

Astra header builder

If you click this, it brings you to a display to modify your header and also include widgets. 

At the end of the display, you can entirely tailor the header, together with the locations over and also listed below the header. Merely float over among the vacant locations and also click the ‘Plus’ symbol.

Click plus icon

This raises a popup food selection where you can choose ‘Widget 1’. 

There are extra alternatives to pick from, yet you’ll require to choose among the ‘Widget’ alternatives to make the header widget-ready.

Select widget 1 option

To include a widget location to your header, click the ‘Widget 1’ box that’s in the header customizer area.

This raises the alternative to include a widget.

Click widget 1 box

Next off, click the ‘Plus’ include block symbol in the left-hand food selection. 

This raises a popup where you can choose a widget to contribute to your header. 

Click plus icon and select widget

You can proceed personalizing your header and also include as lots of widgets as you’d such as.

When you’re done, make certain to click the ‘Publish’ switch to conserve your modifications.

Publish header widget changes

Currently you can watch your header location with the widget or widgets you included.

Header widget example

Not making use of Astra?

An additional means to see if your style currently has a WordPress header widget is by browsing to Look » Widgets in your WordPress admin panel.

After that, see if there’s a widget area classified ‘Header’ or something comparable. 

Go to widgets section for header widget

If there is, after that merely click the ‘Plus’ include block symbol to raise the widgets food selection.

After that you can include whatever widget you such as by clicking it. 

Header widget section

Make certain you click the ‘Update’ switch to conserve your modifications to the header widget location.  

Approach 2. Include a WordPress Widget to Your Internet Site Header by Including Code to WordPress

If your WordPress style doesn’t presently have a WordPress widget location in the header, after that you’ll require to include it by hand by including code to WordPress.

If you haven’t done this in the past, after that see our overview on exactly how to replicate and also paste code in WordPress.

After that, you can include the complying with code bit to your functions.php documents, in a site-specific plugin, or by utilizing a code bits plugin.

feature wpb_widgets_init() {

	register_sidebar( variety(
		'name'          => 'Customized Header Widget Location',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div course="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 course="chw-title">',
		'after_title'   => '</h2>',
	) );

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

This code signs up a brand-new sidebar or a widget prepared location for your style.

If you most likely to Look » Widgets, after that you will certainly see a brand-new widget location classified ‘Customized Header Widget Location’.

Custom header widget area

Currently, you can include your widgets to this brand-new location. For even more information, see our overview on exactly how to include and also utilize widgets in WordPress.

Nonetheless, your header widget won’t show survive on your web site right now. We’ll reveal you exactly how to do that following.

Presenting Your Customized Header Widget in WordPress

Since you’ve developed the header widget location, you require to inform WordPress where to show it on your web site. 

To do this, you require to modify your style’s header.php documents. After that, you require to include the complying with code where you desire the widget to show.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

This code will add the widget area you created earlier to your website header area. 

Now, you can visit your WordPress blog to see your header widget area live.

Header widget live

Style Your WordPress Header Widget Area Using CSS

Depending on your theme, you may also need to add CSS to WordPress to control how the header widget area and each widget inside it are displayed. If you don’t know CSS, you can use a plugin like CSS Hero instead.

To learn more, see our guide on how to easily add custom CSS to your WordPress site.

Next, navigate to Appearance » Customize in your WordPress admin panel. 

This brings up the WordPress theme customizer panel. You need to click on the ‘Additional CSS’ tab.

WordPress customizer additional CSS

This lets you add additional CSS directly to your theme and see the changes in real time. 

Here is some sample CSS code to help you get started:

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

Simply add the CSS code to the ‘Additional CSS’ box.

Add CSS code and publish

Once you’re finished adding your CSS, make sure to click the ‘Publish’ button to save your changes. 

Here is how the custom header widget looks with the CSS changes live.

Header widget example after CSS

We hope this article helped you learn how to add a WordPress widget to your website header. You may also want to see our guide on how to choose the best WordPress hosting and our expert picks of the best live chat software for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a WordPress Widget to Your Website Header (2 Ways) first appeared on WPBeginner.



Share On:

Facebook
Twitter
LinkedIn
Pinterest

Leave a Reply

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

Get Fresh Content Everyday

Ultimate Guides To Start With

Starting A
Blog

WordPress
Performance

WordpPress
Security

WordPress
SEO

WordPress
Errors

Building an
Online Store

Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new posts, updates.