How to Add a WordPress Widget to Your Website Header

WordPress widgets are small parts of website content that can be placed outside of the main area of a WordPress page or post and can serve various purposes like conveying information, being part of the shopping process, or simply assisting with navigating the website. To be able to use widgets, you must have registered widget areas, which are typically created by your theme. In most cases, the registered widget areas belong to the header and footer areas. In this article, the header area, or more specifically, the widget areas displayed in the header, will be our main focus. These widget areas often contain banners, search widgets, cart widgets, social icons, and other equally useful information. As such, they are a must for any WordPress website in this day and age.

Furthermore, widgets are added to the desired area simply by drag-and-drop. This is done within the Appearance > Widgets section of the dashboard, so the process of adding widgets to your website’s header is a breeze. However, if your current theme doesn’t have any designated header widget areas or if you simply aren’t satisfied with their placement and display on the website, the process of adding WordPress widgets to your website’s header becomes painfully difficult. However, there is a solution to every problem. And you can overcome this specific problem by creating custom header widget areas. So, without further ado, let’s begin.

Adding WordPress widgets to a custom widget area

As the concept of custom header widget areas is a bit advanced, it will require using some custom code. Therefore, this article might be slightly coding-intensive and require you to conduct additional research to fully grasp all the talking points. We will explain all the code we use in detail so that a wide audience can still follow along with the steps for adding custom header widget areas.

Before we begin

For this article, we will be using the Lekker theme from QodeInteractive and our goal is to create and display a new widget area. In our example, its content will be shown after the existing header content, i.e. below the logo and navigation menu. Even though the code we create this way will be theme-specific, we will carefully explain every step we take. That way, you will be able to use the knowledge to edit the code accordingly and make sure it suits your current theme and its header layout.

Since we will be discussing how to create and add a custom code snippet, we strongly suggest making a backup of your website beforehand. You should do this from time to time as a precautionary measure.

The code we’ll show you can be added, using FTP, either to the functions.php file of your child theme or to a site-specific plugin. Later in the article, we will touch on why these are the preferred ways of adding new features to your website as opposed to changing the template files directly. However, we assume you are aware of how to use FTP so we will not go into details about inserting this code.

Creating a custom widget area

The first thing you should do is create a new widget area using the register_sidebar() function. You can see an example of the code we used for this purpose below.

function register_custom_header_widget_area() {
register_sidebar(
array(
'id' => 'new-header-widget-area',
'name' => esc_html__( 'New Header Widget Area', 'theme-domain' ),
'description' => esc_html__( 'Custom header after widget area', 'theme-domain' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title-holder"><h3 class="widget-title">',
'after_title' => '</h3></div>'
)
);
}
add_action( 'widgets_init', 'register_custom_header_widget_area' );

Let’s break it down.

The code represents a custom function we named register_custom_header_widget_area(), which is hooked onto the widgets_init hook. The content of this function is pretty clear—a single use of the register_sidebar() function, which we employed to register our new widget area. The ID of this widget area is new-header-widget-area, and it will be used when displaying it. Then, its name is New Header Widget Area, with the description Custom header after widget area that will be shown below the name. Both of those will be visible when you access this widget area in the Appearance > Widgets section.

Additionally, we specified the HTML structure that wraps the display of any widget inserted into that widget area, using the before_widget and after_widget attributes. Also, we specified the HTML structure that wraps the widget titles, provided they are shown on the frontend, by using the before_title and after_title attributes.

It is worth noting that the register_sidebar() function accepts some additional parameters, although we didn’t use them in our example. If you’d like to learn more about this function, you can take a look at the code reference page that we linked earlier.

Once you register your custom widget area, it will be displayed in the Widgets section. So, your next step is to navigate to Appearance > Widgets and locate the new custom header widget area by searching for its name. After you find it, you can add widgets to it from the Available Widgets list on the left. For our example header area, we just added a text widget and a social icons widget.

After you add the widgets you want to your newly created widget area, there is only one thing to do—add the code that displays the widget area. As simple as that sounds, it represents the most difficult part of the process. Additionally, how you approach this differs greatly depending on the theme you’re using, its code, and its file and folder structure. Let’s take a look at why this is the case.

First of all, the basics of the code required to display this custom widget area are rather simple. We’ve included it below.

if ( is_active_sidebar( 'new-header-widget-area' ) ) { ?>
<div id="header-after" class="additional-header-widget-area">
<?php dynamic_sidebar( 'new-header-widget-area' ); ?>
</div>
<?php }

As you can see, this small code snippet represents a single if statement. What this means is that by using the is_active_sidebar() function, we are first checking if the widget area with the ID new-header-widget-area has any widgets inserted. If it has, then the rest of the code is executed, i.e. that widget area is displayed using the dynamic_sidebar() function.

We also wrapped the content with a div element and added a unique ID and a custom class. This will come in handy for the CSS code that we’ll have to write at the end to style the new widget area.

Even though this code is quite simple, knowing where and how to place it is the real problem. In the past, developers have inserted these kinds of code snippets directly inside corresponding template files. In this particular case, the corresponding template file would be the header.php file, located within your theme’s directory.

However, this way of adding new features has fallen out of favor in recent years, as it’s not protected against theme updates. More precisely, since template files get overwritten when the theme gets updated, you would have to repeat the same edits after each update to keep the same feature(s) on your website. As this is very time-consuming, the recommended practice has become to use hooks instead.

For those who aren’t familiar with WordPress hooks, in the simplest terms, they could be described as placeholders. Essentially, developers leave them inside themes or plugins so that other users could employ them to add new features (action hooks) or to edit existing ones (filter hooks). This is done by writing custom functions, which are then hooked onto the appropriate hooks. When you do that, the function code works as if it were placed directly inside the appropriate template file. As this doesn’t change the template files, you don’t have to worry that your work will be overridden on theme updates. This is made possible by adding the code inside the functions.php file of your child theme or via a site-specific plugin, instead of into the corresponding template file. And, this way you only need to add it once and it won’t be affected by theme updates.

Now that we established why using hooks is the recommended (and developer-approved) way of adding custom code, let’s explore how that code could look. In this particular case, an example of the code we used is shown below.

function name_of_your_custom_function() {
if ( is_active_sidebar( 'new-header-widget-area' ) ) { ?>
<div id="header-after" class="additional-header-widget-area">
<?php dynamic_sidebar( 'new-header-widget-area' ); ?>
</div>
<?php }
}
add_action( 'use_the_appropriate_action_hook_here', 'name_of_your_custom_function' );

To break this down, we simply put the above-mentioned code inside a function and called the add_action() function that hooks the function onto an appropriate action hook. When used like this, the function is called a callback function, or simply a callback.

Generally speaking, the name of the callback is less important, as long as the same name is used when using the add_action() function to hook that function. Most often, developers tend to use obvious names for callbacks to make the purpose of the code clear to anyone reading it. We advise you to do the same.

The name of the hook on which you wish to hook your callback is the first parameter of the add_action() function. This is the most important part of the code, but one that differs on a case-by-case basis. As such, we can’t provide you with a hook that will work with all WordPress themes. Instead, you will need to find a suitable hook yourself. However, we will guide you through the process behind finding the most appropriate hook, which we then used in our example.

Before we do that, you should know that the add_action() function accepts up to four parameters. Of those four, we only used two—the hook tag and the callback name, since no more than that was required in this specific case. The other two parameters that this function accepts are the priority and the number of arguments the callback accepts. To learn more about those, as well as the general use of the add_action() function, we advise reviewing the link we provided above. With that being said, let us proceed with our explanation on finding the right hook.

The code for displaying a new header widget area should be added in the header.php file (located in your current theme’s directory). This makes it the perfect place to start looking for a suitable action hook. The line of code that you are looking for will contain a use of the do_action() function, where the hook tag will be its parameter.

If you find multiple hook tags this way, you can test each of those hooks by replacing them in the code we made above, one at a time. After you replace a hook in that code, insert the code properly—either inside the functions.php file of your child theme or inside a site-specific plugin—and examine the results on your website. Depending on where the placeholder was in the code, the content of your new widget area could be positioned in various locations. Those include above or below the logo or navigation, between it, or on one of the header’s sides, depending on the code in the header.php file and the placement of the do_action() function call within that code. Therefore, if multiple hooks are available, choosing the appropriate one depends on the structure of the template file code and where you want the new header widget area to be displayed.

However, in some cases, just reviewing the header.php file won’t be enough to find the most suitable hook tag. This could happen if the header.php file doesn’t have any placeholder hooks or if some parts of its code were put into separate files and those could contain some hooks you can use. Therefore, you should examine all other parts of the header code, as well.

Depending on the structure of the files and folders within your current theme, the header code could be split across a couple of files or, even, a whole nested structure of files and folders. This was the case on our end. We ended up looking in the \wp-content\themes\lekker\inc\header directory for those additional files. After examining the directory and the files within, the most useful hooks were located in \wp-content\themes\lekker\inc\header\templates\header.php. This file loads a part of the header template that contains the header content, i.e. the logo and the navigation menu. Alongside that, it contained three hooks we could use. You can see them marked out on the screenshot below.

There is an action hook outside of the <header> HTML tag—lekker_action_before_page_header, and two that are inside the <header> tag—lekker_action_before_page_header_inner and lekker_action_after_page_header_inner, which are placed before and after the main header content, respectively. For this article, we wanted to add a widget area after the header content, so we used the lekker_action_after_page_header_inner action hook in our code. For the name of the callback function, we decided to use display_custom_header_widget_area, which is a very straightforward name. All that has resulted in the final version of our code that you can see below.

function display_custom_header_widget_area() {
if ( is_active_sidebar( 'new-header-widget-area' ) ) { ?>
<div id="header-after" class="additional-header-widget-area">
<?php dynamic_sidebar( 'new-header-widget-area' ); ?>
</div>
<?php }
}
add_action( 'lekker_action_after_page_header_inner', 'display_custom_header_widget_area' );

Code like this should be added either in the functions.php of your child theme or to a site-specific plugin. Which option you choose to use is up to you.

By adding the code shown above, we successfully displayed the content of our custom widget area inside the <header> HTML tag and after the logo and navigation menu. However, we need to stress that this code isn’t meant to be copy-pasted, as it contains a theme-specific hook. Instead, you should carefully go over the whole process we described in this article and you will be able to create a similar code that will work with your currently active theme.

After doing that, the only thing that remains is to stylize the new content. In most cases, the new content that you added to your header won’t be fully styled when displayed this way. Therefore, it is up to you to create the additional CSS code to ensure the new content matches the remaining parts of your website and your brand as a whole.

Creating this CSS code is also done on a case-by-case basis. As such, we can’t give you a specific piece of code that will work for every website. What we suggest is you use the IDs or classes added to the content of the new widget area to make CSS that will specifically fit it. In our case, we used the header-after ID added to the div element surrounding the content of the widget area. You can find the CSS code we used for this article below.

#header-after {
padding: 10px 45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #f3f3f3de;
}
#header-after .widget {
margin-left: auto;
margin-bottom: 0;
}
#header-after .widget:first-of-type{
margin-left: 0;
}
#header-after .widget:not(:last-child) {
margin-right: 24px;
}
#header-after .widget.widget_text{
max-width: 60%;
}

Once again, we have to point out that this CSS code shouldn’t be copy-pasted, either. It was created specifically for the example used in the article and has style elements that will match the Lekker theme in particular. You will need to create a CSS code for your new widget area using the same principle.

After doing that, you can add the CSS code inside Appearance > Customize > Additional CSS. In the case that larger quantities of CSS code are needed to properly stylize the output of this new widget area and its widgets, we advise putting that CSS code into a separate .css file. Then you can upload the file to your server and enqueue it using the wp_enqueue_style() function.

Finally, you can see the result we got after displaying our new widget area, adding widgets to the header in WordPress, and inserting the CSS needed for their stylization.

This concludes our guide on creating custom header widget areas. By understanding and following the points we made, you will be able to create and display your new custom header widget area and any corresponding widgets placed inside it. In the process, you will be able to enrich the design and functionality of your website, and, also, broaden your WordPress knowledge as a whole.

Final Thoughts

WordPress widgets placed in the header area of your website are some of the most important widgets on your website. They can grab the visitors’ attention, help them navigate across your website, find the item or page they were looking for quickly, help them with the shopping process, and more. As such, your theme needs to have widget areas that display content within the header and in the spots that are most suited for it. For themes that don’t have suitable widget areas, creating ones using custom code is a must.

To create a new header widget area, you need to register it and create the appropriate code for displaying the widget area. Then, you need to pick and add the right widgets to the header in WordPress. Whereas the latter is something every WordPress user does daily, the former is rarely discussed and often known only to more advanced WordPress users. Furthermore, in this article, we also discussed what hooks are and how to use them. This knowledge can be very helpful in the long term as WordPress hooks are one of the most important advanced WordPress concepts. By understanding them, you will be able to create other custom code snippets that can bring significant improvements to your website.