2 Ways To Add a WordPress Widget to Your Website Header

Do you want to enhance your WordPress website’s header with additional content using widgets? Widgets allow you to easily add blocks of content to specific areas of your theme, such as headers, but not every theme includes a widget-ready header area.

Why Add a Header Widget to Your WordPress Site?

Your website’s header is one of the first things visitors see, making it prime real estate for capturing attention. By adding a WordPress widget to your header, you can prominently display important information, promotions, or calls to action.

Most headers typically include a logo and navigation menu, making them perfect for showcasing additional content like banners, forms, or announcements.

Method 1: Add a WordPress Widget to Your Website Header in WordPress Theme Settings

Many top WordPress themes come with built-in options to add widgets directly to the header. Here’s how to do it:

1. Check Theme Support: Navigate to Appearance > Customize in your WordPress admin panel and look for an option to customize the header. Some themes, like Astra, offer a “Header Builder” feature that allows easy widget integration.
2. Using Astra Theme Example: In the Astra theme, access the Header Builder under Appearance > Customize. Click the “Plus” icon in an empty area to add a widget block like “Widget 1” to your header.
3. Add Widgets: Select a widget from the popup menu to insert into your header section. Customize the content as desired and click “Publish” to make your changes live.
4. Alternative Method: If your theme lacks built-in header widget support, navigate to Appearance > Widgets in the WordPress admin. Look for a “Header” widget section where you can add widgets by clicking the “Plus” icon and configuring options.

Method 2: Add a WordPress Widget to Your Website Header by Adding Code to WordPress

If your theme doesn’t include a header widget area, you can manually create one using code:

1. Register a Widget Area: Add the following code snippet to your theme’s functions.php file or use a code snippets plugin like WPCode:
   php

   function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );


   This code creates a new widget-ready area labeled ‘Custom Header Widget Area’.

2. Display the Widget: Edit your theme’s header.php file and add the following code snippet where you want the widget to appear:
   php

   <?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 snippet checks if the ‘Custom Header Widget Area’ is active and displays its content accordingly.

3. Styling Your Header Widget: Customize the appearance of your header widget area using CSS. You can do this via the WordPress Customizer (Appearance > Customize > Additional CSS) or using a plugin like WPCode:
   css

   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;
}


   This CSS example styles the header widget area and titles to match your site’s design.

By following these methods, you can effectively integrate and customize a WordPress widget into your website’s header, enhancing its functionality and visual appeal.