Simple way to add widgets in the header section of your WordPress Website


Whenever you want to add a new feature to your WordPress website, you really don’t need to learn how to code. As a backend developer, I find it amazing, as you require very less amount of efforts & time to do changes or modification in the website. After all, visiting your website should be considered as a great experience to remember.

A WordPress Widget is a small block that performs specific functions. Widgets were originally created to provide a simple user experience by giving the design of the WordPress theme. Widgets can be easily dragged and dropped into a specific widget area. The best thing about WordPress widgets is that they require no code experience or expertise. They can be simply rearrange, added and removed. The actual location of widgets on our site depends on our WordPress theme. Most WordPress themes offer several different page templates that decide where widget locations are in the page design.

We also need header widgets for the purpose of display ads, recent article, news or recent activity on the site. Widgets were created to have control on the structure of WordPress theme to the user. They let we add menus, lists feed, text and much more to widget areas which do not need to be limited to the sidebar. Customization is offered at its best level in WordPress & you can actually do whatever you are looking for on your website. Let us see how to add custom widgets in the header section of WordPress website:

Step 1. Creating a Header Widget

Firstly we need to create a custom widget.

  • We have to add code to your child theme’s in functions.php file.

[Code for admin site]

<?php

function wpb_widgets_init()

{

    register_sidebar( array(

           ‘name’ => ‘Custom Header Widget ‘,

            ‘id’    => ‘custom-header-widget’,

            ‘before_widget’ => ‘

‘,

            ‘after_widget’  => ‘

‘,

           ‘before_title’  => ‘<h2 class=” custom-widget -title”>’,

            ‘after_title’   => ‘</h2>’,

    ));

}

add_action( ‘widgets_init’, ‘wpb_widgets_init’ );

?>

  • After adding the above code developer can easily identify the same and this code is registered into widgets.

For displaying the custom header widgets in backend:

  • Go to Appearance->widgets page and see widgets labeled ‘custom header widget’.

•    In newly created, registered widget now add a text or anything you want to add and save it.

Step 2: Display Custom Header Widget.

For displaying custom header widget, we need to edit the header.php file in a child theme and we have to add the below code where you want to display. This code is used for front-end viewers.

[Front end code]

<?php

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

<?php endif; ?>

Step 3: Style Using CSS

If we want to style the header widget using css, we need to add style.css file in child theme depending on theme of website.

div#header-widget

{

width: 100%;

background-color: #f7f7f7;

border-bottom:1px solid #eeeeee;

text-align: center;

}

h2. custom-widget -title

{ margin-top: 0px;

    text-align: left;

    text-transform: uppercase;

    font-size: small;

    background-color: #feffce;

    width: 130px;

    padding: 5px;}

This is how you can add the header widget in your WordPress website by your own. You won’t need to be a professional back-end developer for that, you can do it on your own. Keep doing innovative changes in your website, attract visitors & gain more outcomes. If you want to know more about the widgets or have any query related to it, fell free to get in touch with our web development experts

Share this: