How to Add a WordPress Widget in the Header?

add wordpress widget in the header of websiteWordPress Widgets permit you to handily add specific blocks of content to specific segments of your WordPress subject and specific pages of your site, yet few out of every odd topic has a region for WordPress Widgets in the header. If you have any desire to add a WordPress Widget to your site header, remain with us here as we investigate how to make it happen.

For What Reason Would It Be a Good Idea for You to Add a Widget Region to Your WordPress Site Header?

The site header is one of the main things guests see subsequent to opening your site. By adding a WordPress Widget to the site header, you can enhance this part to stand out for the peruser. In the header of most sites, there is a logo and a route menu to assist guests with getting to different pieces of the site.

You can likewise add a WordPress Widget at the top or lower part of this segment to show suggestions to take action, flag promotions, exceptional offers, and one-line structures, and that’s just the beginning. In this picture, a source of inspiration is set in the header, beneath the route menu

Most WordPress subjects have areas prepared to put Widgets in the sidebar and footer of the site, yet few out of every odd layout have segments prepared to use Widgets in the header. Most importantly, we should take a gander at how to add a WordPress Widget to a site header in a current format.

Method 1. Add the WordPress Widget to the header of your site in the WordPress subject settings

Great WordPress subjects normally have an implicit Widget segment in the header that you can modify any way you need.

  1. To start with, check if your ongoing WordPress subject backings a WordPress Widget region in the header. You can go to the WordPress subject customizer or Widgets segment in the WordPress administrator board to actually look at this. To do this, go to Appearance » Customize and check whether there is a choice to alter the header.
  2. In this model, the free Astra subject has a choice called Header Builder. In the accompanying, we will show you how to use this element in this layout, yet recollect that relying upon the format you are using, this component will be different and will have different choices for every individual.
  3. If you click on the Header Builder choice, it will take you to a page where you can alter your header and add Widgets. At the lower part of the page, there are choices with which you can completely tweak the header alongside the segments above and underneath the headers. Simply go to one of the vacant fields and click on the ” + ” image that appears.
  4. This will raise a menu where you can choose ” Widget”
  5. To add a Widget region to the header, click on ” Widget 1 ” to confine the header customization segment. This will raise a choice to add a Widget.
  6. Then, click on the Add Block ” + ” symbol in the left menu. This will raise a window where you can choose a Widget to add to the header.
  7. You can add however many Widgets as you need to the header. At the point when you’re finished, ensure you click the “Distribute” button to save the changes.
  8. You can now see the header region with the Widget or Widgets you added.
  9. One more method for checking if the WordPress subject you are using has a WordPress header Widget is to go to Appearance » Widgets in the WordPress administrator board. Then, check if there is a segment named ” Header ” or something almost identical.
  10. If there is, click on the “+” symbol to raise the Widgets menu. Then you can add any Widget you like by clicking on it.

Method 2. Add the WordPress Widget to the site header by adding the code

If your WordPress subject doesn’t have a WordPress Widget region in the header, you should add it physically by adding code to WordPress.

  1. Then, you ought to add the accompanying code piece to the functions.php file, in a site-specific module.
  2. This code makes another sidebar or WordPress Widget region in the header for your WordPress subject. If you go to Appearance » Widgets, you will see another Widget region called ” Custom Header Widget Area.
  3. Now, you can add new Widgets to this new segment. Nonetheless, the header Widget isn’t yet shown live on the site.

Show Custom Header Widget in WordPress

Now that you’ve made a WordPress Widget region in the header, you want to let WordPress know where to show it on your site. To do this, you want to alter the layout’s header.php file. Then, you want to add the accompanying code where you believe the Widget should appear.


if ( is_active_sidebar( ‘custom-header-Widget’ ) ) : ?>

    <div id=”header-Widget region” class=”chw-Widget region Widget region” role=”complementary”>

    <?php dynamic_sidebar( ‘custom-header-Widget’ ); ?>


<?php endif; ?>

This code will add the Widget region you made before to the header of your site. Now, you can visit your site to see the header Widget live.

Style the WordPress Header Widget Region Using CSS

Contingent upon your subject, you might have to add some CSS code to WordPress to control how the header Widget is shown. If you don’t know CSS, you can use modules like CSS Hero all things considered.

  1. Then go to Appearance » Customize in your WordPress administrator board. This will raise the WordPress subject customizer board. You ought to click on the ” Additional CSS ” tab.
  2. This part permits you to add extra CSS straightforwardly to the layout and see the progressions live. Here are a few instances of CSS code to help you.
  3. Simply add the CSS code to the “Extra CSS” box.
  4. At the point when you’re finished adding CSS, click the “Distribute” button to save the changes.

You may also like...

Leave a Reply

Your email address will not be published.