Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Place a Header Widget in WordPress

How to Place a Header Widget in WordPress

Widgets are useful components of WordPress that provide a space for a specific function on your site. For example, you might see websites with ads, calendars and category lists in the right sidebar. But what about using header widgets?

A header widget gives you the extra space to promote something you want every visitor to see. It’s the first segment of the site that is displayed to people and is often reserved for prominent material. Unfortunately, not all themes offer a header widget to modify.

In this tutorial, I’m going to show you how to set up widgets in a WordPress header. This will require a bit of coding, but it’ll mostly be copy and paste.

Why Use a Header Widget?

Most sites will use the header element to show logos or other business and site related graphics or texts. However, many will also use the header to host advertisements or affiliate banners. For instance, you can easily paste the code from Google Adsense into the header section.

Header widgets make adding components like this much easier. Essentially, you can drag and drop a text widget into the header and paste your code from affiliates and ad revenue sites. Because a widget is so flexible, you can add everything from a countdown timer to promoting your own business elements.

Before you commit to making changes to the header in your website, make sure you need one. Many themes have a collection of widgets already available in the Appearance section under, “Widgets.”

Here is a three-step process to add a new header widget element to your WordPress website.

1. Setting Up the Header Widget Space

The first step in adding a header widget is creating the space for it on the site. This is done through the functions.php file. There are a few ways to access this file: using FTP programs such as FileZilla, using cPanel’s File Manager or directly through WordPress Editor.

In this tutorial, we’re going to use the editing system from the website.

Go to the Appearance area in WordPress and click, “Editor.”

Appearance

Click on the “Functions.php” file of your theme. By default, WordPress will display the current theme you’re using. However, you can edit another by choosing a different one from the “Select theme to edit” drop down above the list of files on the right.

Functions File

Add the following code into the file:

function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );

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

Add Code File

Once you add the code, click the “Update File” button.

Update File Button

This will include a new widget area in Appearance called, “Header Widget.” It will then behave like a sidebar area, meaning you can add widgets to it just like you can in other areas.

However, this new header section will only be visible in the WordPress admin screen. You’ll need to edit the header.php file so the site can use it.

2. Showing the Header Widget Area

The next part of this puzzle is to tell WordPress to display the header section including its widget. Without the following coding, your website will simply ignore the instructions in the above step.

This next part is also within the Editor of WordPress. Click the “header.php” file on the right of the editor screen.

Header File

Look for a part in the code where you want the header widget to appear. This may take a bit of coding knowledge. Every theme will look different depending on the developer. Some may be elaborate while others are relatively basic.

In the example image below, I am looking at the theme, “Twenty Fifteen.” As you can see, there really isn’t much to this header layout. For the sake of this tutorial, I am just going to place it after the site description.

Place your cursor into the area you want the widget and paste the code:

<?php

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

Header Widget Code

When you’re done, click the “Update File” button.

Update File

Now WordPress will use your new header widget, and you can start adding content immediately.

3. Customizing Your Header Widget in WordPress

If you know CSS, you can add coding to customize the header widget area either directly through the editor or through the Customizer. I know a lot of people would rather skip this step as they are intimidating by coding, and I wouldn’t blame you.

If you’re not 100 percent sure what you’re doing, it’s easy to break a site on the coding level.

If you’d like to learn more about CSS, W3 Schools is a great platform that is free to use in terms of learning. Most coding elements on that website can be used in WordPress with ease.

Using Themes

Not all themes are void of a header widget. In fact, adding this tutorial to those that do offer a header widget may make the site appear cluttered. For instance, the ColorMag theme has a Header Sidebar already. In this particular case, it’s a sidebar in the header that can stretch up to 720 pixels wide before it becomes too big for a normal display.

ColorMag Header Sidebar

This tutorial is better suited for themes that do not have a header widget already installed. This allows you to take an ordinary and basic theme and turn it into something unique.

One important thing to consider is how WordPress handles theme updates. Should the theme you’re editing have an update, the changes above may be overwritten. In that case, you will need to add the code again. This is one of the biggest reasons why many developers will use child themes instead.

Adding More to Your Site

WordPress is one of the easiest and most flexible content management systems available. Adding a header widget is just one very small benefit to using this platform. Find ways to customize your site and offer a unique experience to your visitors. It may turn those one-time readers into returning fans.

What kind of things have you added to WordPress to make it your own? Have you found certain widgets to engage more visitors than before you installed them?

Author: Kaumil Patel

Kaumil Patel is the Chief Operating Officer of GreenGeeks and has over 13 years of experience in the web hosting industry working for and owning web hosting companies. Kaumil’s expertise is in marketing, business development, operations, acquisitions and mergers.

Was this article helpful?

Related Articles

Comments

    1. Hi Harpinder,

      I’m glad this worked for you 🙂

  1. It’s work with me. It just that, I want to make it on the left side, not on the right side. Can you suggest a way?

    1. Hello Andrei,

      Glad it was able to work for you! Be sure to share the article 🙂

  2. this is great, i love it, but i can add my company name align with the logo, basically the right side of the logo?.

  3. Thanks for your “easy to understand” post! I’ve had success with only half of the process (setting up the header widget space). My child theme (Altitude Pro) doesn’t list a header.php, so I took my chances at copying the Genesis header.php to my child theme, then adding your code to that. No luck. Any suggestions? Thank you

  4. I’m trying to find ways to rework a new theme to look very similar to my existing theme, which is Suffusion. I currently have a widget area under my header banner and menu, which is the same width as the page / banner. Would these instructions mimic what I have? (dangerouslilly.com, slightly nsfw)

  5. yes but now anytime you have to update the theme you will lose the newly added codes

  6. Is not working on my site =( It won’t show the header.php file where its supposed to and I don’t know where else to look for it…
    Is this still working on 2019?

    Also, is there an easy way to make a right header?

    Thanks!

  7. It “works” but how do I position and style it? When I use the “inspect element” feature in my browser it shows tags such as “header-widget-area” that aren’t anywhere to be found in the WordPress files or theme files so what do I edit to accomplish my goal of positioning a search widget styled as a magnifying-glass on the right of the header?

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.