HowTo: Add header widget areas to WP

Widgets are certainly one of the best features in wordpress. It is all customizable and it is so easy to use. It all started with vertical sidebars but i believe all-widget themes will be so popular with the release of wordpress 3.0 which brings user navigation menus to the wordpress widgets.

Here i will show you how to add a horizontal widget area to your theme header so that you can easily put your navigation menu, ad banners and all kind of text/html/javascripts. Before starting i advice you to get a copy of notepad++ since it makes codes more understandable with coloring.

How to add a Header Widget Area

Here is a list of things to do:

1. Define widget area
2. Put the widget area code in your header
3. Styling the widget area
4. Adding widgets to your header

1. Defining the widget area:

1. Open functions.php file in your theme folder. And make a search for “register_sidebar” in your file. This is generally where we register our widget areas to wordpress.
2. Copy & Paste the following code to the appropriate blank space ( For example after: register_sidebar(array( ….  )); )

   register_sidebar(array(
   	'id' => 'header-widgets',
   	'name' => 'Header widgets',
   	'description' => 'Widget area below the header',
   	'before_widget'	=> '<div id="%1$s">',
   	'after_widget' => '</div>',
   	'before_title' => '<h4>',
   	'after_title' => '</h4>'
   ));

   Note that id value for widget area must be unique.

3. And now our widget is registered, save the file and close it.

2. Put the widget area code in your header:

1. Open header.php in your theme folder.
2. Copy & Paste the following code where you want your widget area to appear.

   <div id="header-widgets">
   	<?php dynamic_sidebar('header-widgets'); ?>
   </div>
   

   It will be generally after site description. Be sure your code is inside <div id=”header”>…</div> tags.

3. Save the file and close it.

3. Styling the widget area:

1. Open your styles.css file. A blank styling template should be like that:

   .sidebar{/* styles that apply to all sidebar class elements*/ }
   #header-widgets {/* styles that apply to header-widgets layer */ }
   #header-widgets .widget{/*styles that apply to all widgets under this widget area*/}
   #header-widgets .widgettitle{/*widget headings*/} 

   If you are fond of css you can fill in this template and append it to the end of file.

2. First thing we do is hiding widget headings. We won’t use widget headings in this widget area:

   #header-widgets .widgettitle{ display:none !important;  } 

3. We should also remove margin and padding for widget container so that widgets will fit better:

   #header-widgets {padding:0px; margin:0px; }

4. Let’s say you want a little margin between widgets:

   #header-widgets .widget{ margin-bottom:10px; }

5. This will be enough styling for a simple widget area. If you want widget specific styling, you can enter it below your styling file like this:

   #header-widgets .widget_text{ text-align:center; } 

6. Here is the final code:

   #header-widgets {padding:0px; margin:0px; }
   #header-widgets .widget{ margin-bottom:10px; }
   #header-widgets .widgettitle{ display:none !important;  }
   #header-widgets .widget_text{ text-align:center; }

4. Adding widgets to your header:

1. First save and upload your files to your theme directory. Remember to overwrite your old files for your changes to appear.
2. Now if you visit Appearance -> Widgets panel you will see our new widget area called “Header Widgets”.
3. You can add as many widgets as you like they will all appear in your header.
4. Check your site about the appearance and go on playing with css codes until you are happy with it.

And we are all done. I have some pre-made all widget wordpress themes. You can use them as you like:

If you are looking for widgets to use in your widget area here are some of my widgets & plugins:

I hope you find this tutorial useful.

If you are looking for a wordpress expert I am currently available for freelance projects.

Contact me for a quote, it is always free!

Related posts

1. How to add text to every post in your feed
2. SEO Tip: Highlight nofollow links for authors in WordPress
3. Display correct thumbnail on facebook share
4. Adding jquery tooltips to your wordpress theme

Author: Metin Saylan

Hello, I am a Naval Architect by day, Wordpress Ninja by night. I developed various wordpress plugins and themes. I publish many tips and tricks about wordpress on here shailan.com. Metin has wrote 135 awesome articles for us.