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.

Please note; this simple tutorial assumes that you have basic HTML and PHP knowledge. Otherwise, working with PHP files can damage your theme. Please backup your theme files before editing.

In this tutorial, 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 to that widget area easily. Before starting, I advise 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 the id value for the widget area must be unique.

  3. And now our widget is registered, save the file and close it.
Tip; You can install your 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. 
    <div id="header-widgets">
  <?php dynamic_sidebar('header-widgets'); ?>
</div>

    It will be generally after the 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 style.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 the file.

  2. The first thing we will do is hide the 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 the 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 done! I hope you found this tutorial useful.
If you liked this post, please share it with your friends 😉

Good luck!

(Image by Esi Grünhagen from Pixabay)