Header Widgets

Functions File

Add this code right before the footer widget code

(if that’s not there, see below)

Look for register_sidebar in the functions file. Add this right at the end of that section. After the ); and before the }

(It’s right before the add_action line)

register_sidebar( array(
'name' => 'Header Sidebar 1',
'id' => 'header-sidebar-1',
'description' => 'Appears in the header area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Header Sidebar 2',
'id' => 'header-sidebar-2',
'description' => 'Appears in the header area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Header Sidebar 3',
'id' => 'header-sidebar-3',
'description' => 'Appears in the header area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

Header File

<div id="header-sidebar" class="secondary">
<div id="header-sidebar1">
<?php
if(is_active_sidebar('header-sidebar-1')){
dynamic_sidebar('header-sidebar-1');
}
?>
</div>
<div id="header-sidebar2">
<?php
if(is_active_sidebar('header-sidebar-2')){
dynamic_sidebar('header-sidebar-2');
}
?>
</div>
<div id="header-sidebar3">
<?php
if(is_active_sidebar('header-sidebar-3')){
dynamic_sidebar('header-sidebar-3');
}
?>
</div>
</div>

Stylesheet

#header-sidebar{display:block;height:250px;}

#header-sidebar1{float:left;width:340px;margin-left:5px;margin-right:5px;}

#header-sidebar2{float:left;width:340px;margin-right:5px;}
 
#header-sidebar3{float:left;width:340px;}