widgetize-your-wp-theme

HowTo: Add header widget areas to WP

on April 30, 2010 | 18,089 views

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.
  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.
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.
    <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!

ADVERTISEMENT
ADVERTISEMENT

About Shailan.com Staff

Shailan.com is a design blog about WordPress and web design. We regularly write about wordpress, plugins, themes, web design resources, php, css, jquery, adsense and more.. If you want to get notified about our posts, be sure to subscribe to our feed or follow us on facebook.

Share Your Thoughts

Your email address will not be published.

12 thoughts on “HowTo: Add header widget areas to WP”

  1. Phil says:

    Super, thank you. Clear and concise. Took only 5 minutes to implement.

  2. Randy says:

    Very good and clear tutorial. I had no problems implementing it.
    However, I would like to have my widgets appear horizontally under the header, not vertically. Is there a simple way to do this?

  3. umair khan says:

    very very good tutorial, thanks.

  4. Mariel says:

    Tank you very much /sweden girl

  5. Lil' John says:

    Thanks a lot shailan. you rock!

  6. Thank you so much for this. I can’t believe how easily it worked. I will remark for newbies like me. that I didn’t already have a line in it that said “register_sidebar” in my child-theme functions file so I just pasted it at the end and it works just fine. *cartwheels*

  7. Jason Ingram says:

    Very nice. Thanks!

  8. iMapache says:

    Thanks a lot I was looking for this. Very well explained and easy ti implement

  9. Jonathan says:

    I figured it out, thanks. I’m still curious what “%1$s” refers to. Do you have a reference for it?

    1. shailan says:

      Check out the WordPress Codex documentation on register_sidebar.

  10. Jonathan says:

    I’m still learning this. But it would be helpful if you explain where the h4 comes into play in before_title.

    The construction that I have stumbled upon is

    As I understand this would be good to include if the sidebar isn’t active.