AWPGuide

Beginner's Guide For WordPress

  • Blog
    • Monetization
    • Reviews
    • Showcase
    • WordPress Guides
    • ScanWP
  • Start Here
  • Deals
  • Blueprint

Last Updated On October 17, 2018 By Christina

AWPGuide » WordPress Guides » How To Add Custom Header Widget In WordPress

How To Add Custom Header Widget In WordPress

How To Add Custom Header Widget In WordPress

Do you want to add custom header widget in WordPress? Last day, one of our users asked how we added a header widget on our blog and styled it. In this post, we are going to show you how can you add custom header widget in WordPress without using additional plugins.

How To Add Custom Header Widget In WordPress

First of all, we need to register a widget on the website. Go to the theme editor and choose the functions.php file. Copy the below code and paste it on the file. Always use a child theme for modifying WordPress.

function awpg_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', 'awpg_widgets_init' );

Add Custom Header Widget In WordPress

Simply update the file after adding the code. On your widgets section, you can see a new widget named ‘Custom Header Widget Area’.

new wordpress header widget registered

We have successfully registered the widget but didn’t point out where we need to show it.

For adding the widget to the header, we need to edit the header.php file. Simply add the below code on your header file where you need to display the widget.

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

showgin custom header widget in header

I have added a text in the widget.

adding text in header widget

You can add an image or text for testing the position. You can see that the widget is not showing in the center. Copy the below CSS and paste it on the additional CSS or add it to the style.css file.

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

updating header widget styling

Now check the widget from the front end.

new custom header widget

Edit the background color and related stuff according to your needs and website styling. You can add anything to the widget area like AdSense ads, affiliate banners, own promotions and whatever you would like.

We hope you found this tutorial helpful and enjoyed the read. If you did, please consider sharing this post with your friends and fellow bloggers on social media. From our blog section, you can get more related posts.

Christina

About Christina

Christina is the lead editor in AWPGuide.
She will mainly write about WordPress tutorials, product reviews, monetization tricks, and related stuff.
Christina is led by Sreehari.

6 COMMENTS
  1. Inky says

    November 22, 2018 at 10:43 PM

    You really saved me.
    I have added one custom widget and an AdSense ad.
    Thank you so much.

    Reply
    • ChristinaChristina says

      November 23, 2018 at 4:10 PM

      Hi Inky,
      Thanks for leaving comments.

      Reply
  2. Ricky says

    November 30, 2018 at 4:09 AM

    It took only 3 minutes.
    Thank you so much, Christina.

    Reply
    • ChristinaChristina says

      November 30, 2018 at 2:52 PM

      Hi Ricky,
      Happy blogging!

      Reply
  3. Asia says

    December 5, 2018 at 9:58 AM

    I can’t see a header.php file in my WordPress child theme. What should I do?
    Please help me.

    Reply
    • ChristinaChristina says

      December 5, 2018 at 2:55 PM

      Hi Asia,
      In that case, download the header.php from the parent theme, upload it to the child theme folder.
      Now, you have a header.php file in the child theme folder.
      Simply add the code there.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let us have a personal and meaningful conversation.

Learn WordPress Now!

Never miss our updates! We are adding fresh contents daily!
Join our newsletter and learn WordPress now!

The Best of AWPGuide

We have the best guides here! Some of them are below!

Beginner's Guides

  • 1
    Media.net Review (and RPM Optimization Guide)
  • 2
    Grammarly Review: Free Proofreading Tool
  • 3
    Why You Need To Build an Email List?
  • 4
    How To Start a Free Blog on CloudAccess.net
  • 5
    Aspire pro Documentation and Setup
  • 6
    WP Engine Affiliate Program Review
  • 7
    How To Add Coupon Section In WordPress

Theme Reviews

  • 1
    Jupiter X WordPress Theme Review
  • 2
    Newsmag WordPress Theme Review
30% DISCOUNT
AWPGuide
WP Rocket Black Friday Coupon

WP Rocket Black Friday Coupon

WP Rocket is the best WordPress caching plugin that we used! If you are planning to buy the WP Rocket in this Black Friday, we have got 30% discount for you!
Get This Deal

ABOUT AWPGUIDE

Finally we have launched AWPGuide blog! At this time of writing, we know, there are so many blogs are providing blogging and money making tips and tricks.

We are not like them! In AWPGuide, we will cover WordPress, blogging, SEO, make money online guides and will teach you how to start, maintain and monetize a WordPress blog.

All these guides will be 100% free and always it will be. We are not running a typical membership website for making money. Also, AWPGuide is free from display advertising, pop-up ads and URL shortner!

For more, feel free to check out our about page.

SITE LINKS

About Us

Advertise Here!

Contact Us

Free Blog Setup

Terms of Service

Write For Us!

Privacy Policy

Deals

OptinMonster Coupon

MyThemeShop Coupon

WPForms Coupon

Bluehost Coupon

CSS Hero Coupon

Social Warfare Coupon

REVIEWS

Genesis Framework

WP Coupons

WP Review Pro

Slider Revolution

Newsmag

Jupiter X

MonsterInsights

© 2019 · AWPGuide LLC