Home / Widgets / My Insert widget in header
Duplicate Snippet

Embed Snippet on Your Site

My Insert widget in header

My own way of Inserting widget in header

Code Preview
php
<?php
/* Add a WordPress Widget to Your Website Header by Adding Code to WordPress */
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' );
<?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; ?>
/* Style Your WordPress Header Widget Area Using CSS */
	
div#header-widget-area {
    width: 100%;
    background-color: #FFFFFF;
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: #FFFFFF;
    width: 130px;
    padding: 5px;
    }

Comments

Add a Comment