Since the time Wordpress has introduced wigetized sidebars customizing WordPress powered blogs became much easier task. With huge amount of plugins and widgets available for free download webmasters can pick and choose what kind of info display on their’s blogs, where to place it on the pages and all that can be done without ever changing the source code or template files. All updates can be done directly from the blog admin panel after you’ve done small modification to your theme.

In the default (Kubrick) theme there is only one widgetized sidebar created and you can see it if you go to “widgets” option in the “Design” section of your WordPress admin panel. You can place unlimited amount of widgets there but the problem is - you have very little flexibility how these blocks will look on the front end. Appearance of all elements are controlled by the same styling options assigned to the ID=”sidebar”.

Here is a simple tutorial how you can create new widgetized zones (I call them “zones” since they do not have to be placed in the sidebar), place them anywhere on the page and have full control over the style of each widgetized zone.

Before proceeding with this modifications I assume that you have at least basic knowledge of HTML, PHP and CSS… Just a reminder - always create a back-up copy of every file you are modifying just in case something goes wrong. The easiest way is creating a duplicate file like “functions0.php” - this way you know it was the original.

First step would be - identifying how many widgetized zones you would like to have on the page.
Lets say: one - for the banner in the header of the page, second - for the sidebar, third - for the footer. You can have unlimited amount of widgetized zones even inside sidebar (for example one wide zone on top and two narrow zones in the bottom) but let’s understand how the process works.

Step One - Declaring Widgetized Zones

This first modification has to be done to the functions.php file in your current theme folder. I will explain it on the example of the same default theme. The only part of the code that interest us it’s the first section near the top:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

Since there is only one sidebar was registered there was no need to give it a unique name.
Getting back to our exercise - we will register 3 sidebars (or widgetized zones) and give every one of them unique name so in the future we have complete control over styles of each of them:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Top_Widget_Bar',
'before_widget' => '<div class="Top_Widgets">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Right_Sidebar',
'before_widget' => '<div class="Right_Bar">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Bottom_Widget_Bar',
'before_widget' => '<div class="Bottom_Widgets">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

As you can see we have given unique name to each of our new widgetized sidebars and assigned different classes for styling options.

To check if this step was done correctly login to the admin panel > Design > Widgets and check if you see all 3 of new sidebars in the drop-down box under “Current Widgets”.

Step Two - Inserting Widgetized Zones into Templates

Since we already decided how to use new widgetized zones this process should be quick. Sidebar zone probably will remain in the same place as it is and we should just slightly update “sidebar.php” template file. Near the beginning of the file we are looking for the code:

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() )

As you remember we gave this sidebar unique name “Right_Sidebar” and now need to update the code to identify this sidebar:

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right_Sidebar') )

In similar fashion we will need to insert code for top and bottom widgetized bars into header.php and footer.php files accordingly (don’t forget to back-up both original files).

Step Three - Inserting and Styling Widgets

Now is the fun part! From the admin panel > Design > Widgets select one of the widgetized zones we just created and insert widgets you were intending to use there. For the top bar most likely it’s going to be a “Text” widget with empty title bar. What you need to remember that Wordpress is inserting widgets as an “Unordered List” (<ul></ul>). For each of new widgetized zones you will probably need to add following styles:

div.Top_Widgets {}
div.Top_Widgets h2 {}
div.Top_Widgets ul {}
div.Top_Widgets ul li {}
div.Top_Widgets ul li a {}


Similar for the “Right_Bar” and “Bottom_Widgets” section. You can play with floats, margins, paddings, colors, background colors and images - every section can have it’s unique look.

That’s it! Now you don’t have to dig into the code every time you need to update advertisement banner or change some links - everything is just a few clicks away in the admin panel.

I would also highly recommend to install SuperLinks plugin which replaces original WordPress Links widget. This plugin can be used many times (not like original - only once) in any sidebars and gives you ability to display any selected link categories separately from the rest.

I hope you will find this little tutorial useful and feel free to submit your feedback. Remember - top commentators are getting free site-wide do-follow link in the sidebar!

Tags: Webdesign, Website Development, Wordpress, Wordpress Themes, Wordpress Tweaks, Wordpress Widgets

Posted July 28th, 2008 at 4:15 pm in category Blogging, CSS and Web Design, Website Development, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.