logo

Sue Feng Design

‹ Back to blog

Creating Multiple Widget Sidebars for WordPress

If you have multiple sidebars, or multiple themes with multiple sidebars, it’s a good idea to use dynamic sidebars. WordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as “widgets”) without having to change any code. What’s nice about using widgets is they’re easy to use and you have the contents of all your sidebars on one page so they’re easier to edit. When using different layouts with the same sidebar contents, all you need to do is call the sidebar functions to get the contents. If you want to insert php in your sidebar, there’s a plugin called PHP Exec. Click on that link and scroll down to where it says execphp.zip, and download it.

In order to use widgets, you need to place this bit of code in your sidebar.php or whatever your sidebar page is:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('graphics') )  : ?>
<?php endif; ?>

Where it says “graphics”, replace it with whatever your sidebar name is mentioned in functions.php below.

You’ll need to make sure you have a functions.php in your theme folder. Inside functions.php, put this:

<?php
if ( function_exists('register_sidebar') )
   register_sidebar(array('name'=>'journal',
    'before_widget' => '<div id="sidebar">', // Removes <li>
   'after_widget' => '</div>', // Removes </li>
 'before_title' => '<p class="navi">', // Replaces <h2>
 'after_title' => '</p>', // Replaces </h2>
));
register_sidebar(array('name'=>'about',
  'before_widget' => '<div id="sidebar">', // Removes <li>
   'after_widget' => '</div>', // Removes </li>
 'before_title' => '<p class="navi">', // Replaces <h2>
 'after_title' => '</p>', // Replaces </h2>
));
register_sidebar(array('name'=>'archive',
    'before_widget' => '<div id="sidebar">', // Removes <li>
   'after_widget' => '</div>', // Removes </li>
 'before_title' => '<p class="navi">', // Replaces <h2>
 'after_title' => '</p>', // Replaces </h2>
));
register_sidebar(array('name'=>'gallery',
    'before_widget' => '<div id="sidebar">', // Removes <li>
   'after_widget' => '</div>', // Removes </li>
 'before_title' => '<p class="navi">', // Replaces <h2>
 'after_title' => '</p>', // Replaces </h2>
));
register_sidebar(array('name'=>'graphics',
   'before_widget' => '<div id="sidebar">', // Removes <li>
   'after_widget' => '</div>', // Removes </li>
 'before_title' => '<p class="navi">', // Replaces <h2>
 'after_title' => '</p>', // Replaces </h2>
));?>

Make modifications where it says “journal”, “about”, etc. Also you can chose different tags before where it shows comments such as //Replaces…The number of calls to register_sidebar depends on the number of sidebars you have.

Now when you go to wp-admin, under “Presentation”, there should be a link to “Widgets”. From there you can drag boxes under “Available Widgets” onto a sidebar box. Some widgets allow you to edit the contents or settings. Click on the icon on the right of the widget box in a sidebar to see what you can edit. Click on the “X” when you’re done editing. Don’t forget to “Save Changes”. To view changes, refresh your browser, or delete your cache and refresh again if you don’t see the changes.

Posted on: March 19, 2008Categories: Tutorials
‹ Back to blog