HostOnNet Blog

How to create custom header widget in WordPress home page without a plugin

As you know we can easily custamize site layout through widgets in WordPress. Today I have created a custom header widget for home page in my wordpress portifoio website.
I hope this post will help you to learn how to add custom header widget to WordPress themes

STEP 1 : Go to your theme’s function.php file and paste below code

function header_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Hostonnet Header Widget Area',
        'id'            => 'hostonnet-header-widget',
        'before_widget' => '<div class="hon-header-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h1 class="hon-header-title">',
        'after_title'   => '</h1>',
    ) ); 
}
add_action( 'widgets_init', 'header_widgets_init' );

STEP 2 : Edit index.php file add the below code


<?php
 
if ( is_active_sidebar( 'hostonnet-header-widget' ) ) : ?>
    <div id="hostonnet-header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'hostonnet-header-widget' ); ?>
    </div>
     
<?php endif; ?>

STEP 3 : Open style.css file of your WordPress theme and put below code for better styling.

#hostonnet-header-widget-area{
padding: 40px 0px;
margin-bottom: 20px;
border-bottom: 1px solid #e7e7e7;
text-align: center
}

STEP 4 : Login to admin area > Appearence > Widgets. You can see the Custom Header Widget area

wordpress custom widget

I have already added Bootstrap framework to WordPress. So to make the paragraph stands out, I added class .lead

bootstrap lead class

If your are using any CACHE plugins, don’t forget to clear your site cache. Here is the screenshot of my home page.

custom wp widget

If you have any question regarding WordPress themes, plugins or widget please send an email to install@hostonnet.com. I will be happy to answer all of them.


About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Wordpress