Many default wordpress themes do not support widgets for headers, making customization like inserting advertising images difficult, in this article I will show you how to create widgets for wordpress headers quickly through 3 simple steps.
Table of Contents
When should you create a widget for your wordpress header?
Creating a widget for the header when designing a website with wordpress helps us to be flexible in the interface layout, this utility is often used in the header area such as the right hand side of the logo or below the menu bar. Many news sites are now using this form of ad insertion.
Usually, the theme’s built-in widgets are only supported in the footer and sidebar but not in the header area above the article or right below the menu so that’s why I will show you how to create widgets for your website. header wordpress for you to easily manipulate.
Steps to create widget for wordpress header
Step 1: Create a widget area
Also called creating a widget in the interface at Appearance => Widget. In the admin admin page.
By adding the following code to the file functions.php of the theme you are using.
|
|
function wpb_widgets_init() { register_sidebar( array( ‘name’ => ‘Custom Header Widget Area’, ‘id’ => ‘custom-header-widget’, ‘before_widget’ => ‘ ‘, ‘before_title’ => ‘ ‘, ‘after_title’ => ‘
‘ ) ); } add_action( ‘widgets_init’, ‘wpb_widgets_init’ ); |
Here is the code to create a new sidebar or widget for your theme.
After adding, you can go to Appearance => Widget to see if there is a new widget. As in the above code, the widget name I added is ‘Custom Header Widget Area‘.
Please add a widget to this widget, for example here I add an ad widget.
Step 2: Put the newly created widget on the website
After creating, you can’t see the widget content on the web page, we need to call the widget with the code below.
Open file header.php in your theme, and paste the code below where you want it to be displayed. Then save.
|
|
<?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; ?> |
You can now re-f5 the site and will see the widget content you just created appear outside of your site.
Step 3: Add CSS for more beautiful widget widget.
Here I add the content of the widget as an ad image, so I will CSS for this image neatly and centered it with the following CSS snippet.
|
|
div#header-widget-area { width: 100%; background–color: #f7f7f7; 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; } |
Add the above CSS code to the file style.css or custom CSS of the theme in Appearance » Customize => Select Tab Additional CSS and paste the above CSS in.
After adding the CSS, you go out of the f5 website and you will see the header widget image has been aligned more beautifully.
You can customize the CSS according to the content you include, customize it to your liking.
Come here hope you have done it create widget for wordpress header of your website.
Good luck!
