and I design games.




Add Widget-Capable Sidebars To Your WordPress Theme

Category : Tutorials · by Jan 9th, 2009

Widgets!  Widgets everywhere!

One of the many awesome things about WordPress is its ability to support widgetized sections. The lingo in the WP admin terms these “sidebars” but they can be used in any number of other layout orientations; basically, anywhere you would like an easy-to-administer set of widgets.

However, if you’re like me and aren’t primarily (or even secondarily) a developer, adding something like a widget-capable section to your WordPress theme is a bit daunting, especially since the documentation from WordPress is a bit sketchy.  Fear not! Listed below are some simple steps and code snippets to allow you to add multiple widget-compatible sections to a WordPress theme:

Step 1: Register Your Sidebar(s)

The first thing you need to do is create a “registration” for each widget-capable section you wish to include in your theme.  To do this, add the following bits of code to your functions.php file in your theme directory:

  1. <?php
  2. /* Register sidebar attributes */
  3. if (function_exists('register_sidebar')) {
  4. register_sidebar(
  5. array(
  6. 'name' => 'Primary Sidebar',
  7. 'before_widget' => '<li id="%1$s" class="widget %2$s">',
  8. 'after_widget' => '</li>',
  9. 'before_title' => '<h2 class="widgettitle">',
  10. 'after_title' => '</h2>',
  11. )
  12. );
  13. }
  14. ?>

Or, if you want multiple sections:

  1. <?php
  2. /* Register sidebar attributes */
  3. if (function_exists('register_sidebar')) {
  4. register_sidebar(
  5. array(
  6. 'name' => 'Primary Sidebar',
  7. 'before_widget' => '<li id="%1$s" class="widget %2$s">',
  8. 'after_widget' => '</li>',
  9. 'before_title' => '<h2 class="widgettitle">',
  10. 'after_title' => '</h2>',
  11. )
  12. );
  13. register_sidebar(
  14. array(
  15. 'name' => 'Secondary Sidebar',
  16. 'before_widget' => '<div id="%1$s" class="module %2$s">',
  17. 'after_widget' => '</div>',
  18. 'before_title' => '<h2 class="title">',
  19. 'after_title' => '</h2>'
  20. )
  21. );
  22. register_sidebar(
  23. array(
  24. 'name' => 'Tertiary Sidebar',
  25. 'before_widget' => '<div id="%1$s" class="module %2$s">',
  26. 'after_widget' => '</div>',
  27. 'before_title' => '<h2 class="title">',
  28. 'after_title' => '</h2>'
  29. )
  30. );
  31. }
  32. ?>

In short, this creates a new sidebar listing in your Widgets section of the WordPress admin for each register_sidebar function you call, allowing you to assign widgets to the selected area.  The data in the array following each register_sidebar call assigns a name to the widget-capable section, sets what (if any) HTML is written before and after the widget data is printed out, and set what (if any) HTML is printed before and after the title of the widget, respectively.  The name value is particularly important and must be unique for each registered section, as this is what we will use to tell WordPress where in the theme the specific widget-capable section is supposed to display.

Step 2: Output Your Sidebar(s)

After registration in functions.php, it’s a simple matter of including a bit of code in any file in your theme that you wish to display one, or more, of your new widget-capable sections. The code required for this is very simple:

  1. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Name You Gave Your Sidebar Goes Here') ) { ?>
  2. <?php } ?>

Just replace the “Name You Gave Your Sidebar Goes Here” bit with the name you assigned the particular section in the register_sidebar function in functions.php. For instance, on this site, I’ve widgetized the footer area, and added code in it like this:

  1. <div id="col1" class="column">
  2. <div id="pandora">
  3. <div id="pandora_top">
  4. <div id="pandora_top2"></div>
  5. <ul id="pandora_body">
  6. <?php pandorafeeds_display_bookmarked_songs(5, true);?>
  7. </ul>
  8. <div id="pandora_btm"></div>
  9. </div>
  10. </div>
  11. </div>
  12. <div id="col2" class="column">
  13. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Tertiary Sidebar') ) { ?>
  14. <?php } ?>
  15. </div>
  16. <div id="col3" class="column">
  17. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Quadrary Sidebar') ) { ?>
  18. <?php } ?>
  19. </div>

The first column contains my custom Pandora feed output, but the orange highlighted snippets in col2 and col3 tell the theme that any widgets that are assigned to the Tertiary or Quadrary Sidebars are to be placed between the brackets in the IF statements listed there.

Step 3: Add Some Widgets!

The last, and easiest part of it all.  Head to the Widgets section of your WordPress admin, and you’ll find that your new widget-capable sections have been added to the list you can select from:

Selecting your widget section

Simply select your section, hit “Show”, and add widgets until your heart is content.

I encourage anyone adding extra sections to experiment with their placement.  They can be useful in any number of locations around your page, and possibly even on specific pages or post templates as well.  Plus you’ll be the envy of the WP theme development crowd :)

Update:  I found a post very similar to this one that might be of further help.  View it here.

SHARE :

(14) comments

Matthew
6 years ago ·

Great article! Very well laid out and written, and a lot of help. If I ever decide to really restructure and add things to the footer, this will make it a lot easier!

Jos
6 years ago ·

Thank you VERY VERY VERY much! This REALLY helped me out! :) I first struggled with plugins like widget logic to display certain widgets on different pages but this was far nicer since I can easily control which widgets go where!

Perfect!

Ryan Burrell
6 years ago ·

You are quite welcome. I wrote this article for that very reason; I couldn’t find anything that was helpful and written in plain English.

Mushi
5 years ago ·

great article..! i hv added a new side bar bt when i add a new widget and then click on edit the widget is disappeared from the new sidebar list..! wat to do and if i try to save changes with our editing following error is displayed

“sss
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\deerpark\functions.php:25) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 850

m at scratch level dont knw abt php…can jst handle html..! ;(

Mushi
5 years ago ·

ok..i hv got that myself..widgets are selected, edited and then saved..BUT NOT VISIBLE ON MY BLOG..!

Ryan Burrell
5 years ago ·

Make sure that you’ve pasted this bit of code in your theme where you want your widget area to appear:


(Where “Your Sidebar Name” is the name you gave it in the register call in your functions.php theme file)

You can add the register code in your functions.php file, but if you don’t place the above code in your theme, WordPress doesn’t know where to place it on the page.

Mushi
5 years ago ·

Thanx Ryan i hv done this as u said and its working..! bt 1 prob m hving is when i insert a widget and click on edit it disappears and if i jst add a wiget and click on save changes the following error occures

“Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-content\themes\deerpark\functions.php:12) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 850″

i will keep asking (disturbing) u coz m totally new and learning it by my self..! will need ur guidence..thanx again..!

Ryan Burrell
5 years ago ·

It looks like the error is coming when the functions.php file tries to register the widget area, and calls pluggable.php. My guess is that you either have a typo in your code in functions.php, or your pluggable.php file in WordPress is corrupt somehow. If you want to email me the code in your functions.php, you can send it to ryan [at] ryanburrell [dot] com. Otherwise, upgrading WordPress or copying over a new pluggable.php file may fix the problem. My guess is that it’s the former, not the latter.

Antonio Mecca
4 years ago ·

Very great and useful post! It works fine, but how can i set the property of any widget such as width, height, position and other? It’s possible to modify all that?
Thanks for sharing, i save this post to delicious

Ryan Burrell
4 years ago ·

Thanks! As far as I’m aware, all ordering is done via the drag-and-drop interface in the widgets area of the WordPress admin. Width and Height settings on a per-widget basis are in the realm of CSS styling, unless you need specific classes or IDs, in which case you should probably look at more in-depth code changes for widget output.

Joseph
4 years ago ·

Well written and helpful post! I had tried multiple different tutorials and only this one worked correctly. Best widget area tutorial on the web. thanks!

rahul
3 years ago ·

I have one question .
In my wordpress theme show only one widget sidebar option so if any one knows how I add multiple widget option like Left side bar, Right side bar, Top side bar.

So please tell me.
Thanks

Daniel
3 years ago ·

Really great post. This helpful for me when i tried to add more widgets on sidebars of my WordPress theme.
Thanks.

Adam
3 years ago ·

Yes! Was looking for this all morning! You’re a freaking rockstar!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>