metinsaylan // rogue developer

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.

This simple tutorial assumes that you have basic HTML and PHP markup knowledge. If you don’t, working with PHP files can damage your theme. Please backup your theme files before editing.

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.</li>
  2. Copy & Paste the following code to the appropriate blank space ( For example after: 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.

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

You can install a new theme using zip files without messing with FTP. Simply save your files and when you are finished editing you can zip them and upload it through wordpress admin panel (Appearance > Add New Themes > Upload). Remember to delete old theme before uploading the new one.

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. ```php
 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.

  1. First thing we do is hiding widget headings. We won’t use widget headings in this widget area:
      #header-widgets .widgettitle{ display:none !important;  }
  2. We should also remove margin and padding for widget container so that widgets will fit better:
      #header-widgets {padding:0px; margin:0px; }
  3. Let’s say you want a little margin between widgets:
      #header-widgets .widget{ margin-bottom:10px; }
  4. 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; }
  5. 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 hope you find this tutorial useful. See you next time!

Search HowTo: Add header widget areas to WP on Google