http://northbeachnet.comA Wordpress, PHP/MySQL Web Developer's Blog

Registering and Widgetizing the Sidebars

Sunday, October 4th, 2009 by MikeLT

Now that the layout of the theme is sufficiently bouncy, I will look to the sidebars.

Since I want to keep my sidebars separate for future experimentation, I will create two separate template files, sidebar1.php and sidebar2.php, and fill them with some stuff basically just to create a place holder.

I envision the possible need for an expansive navigation system for the users of this theme, so I created sidebar1 with with that in mind. For now I will use the Suckerfish verticle multilevel css menu as the place holder to remind me what this space is for, with plans to tweak it in the future.

I have no idea what I will do with sidebar2, but I’m sure I’ll think of something.

In the meantime, the immediate task is to widgetize both sidebar1 and 2, so as not to reinvent the wheel, which brings us to the introduction of the mysterious functions.php file.

Functions.php resides at the theme root, and is basicaly filled with plugins, or widgets, that are relevant and/or exclusive to the theme in use. I am very much looking forward to delving deep inside this very powerfull piece of PHP.

First, we need to tell wordpress that we have sidebars, and we do that by resistering them in functions.php.

Check out the code:

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>

Since we have two sidebars, we have to register them both with their distinct names. What follows the actual registration is some styling that is needed if the sidebar is not an unordered list.

And here is the code added to sidebar1.php:

<div class=’sidebar1′>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(’sidebar1′) ) : ?>
<li>
<?php wp_list_categories(‘&title_li=<h3>Categories</h3>’); ?>
</li>
<h3><?php _e(‘Archive’);?></h3>
<select name=”archive-dropdown” onChange=’document.location.href=this.options[this.selectedIndex].value;’>
<option value=”"><?php echo attribute_escape(__(‘Select Month’)); ?></option>
<?php wp_get_archives(‘type=monthly&format=option&show_post_count=1′); ?> </select>

<h3>Browse our Store</h3>
<ul>
<li><a href=”#”>Percoidei</a>
<ul>
<li><a href=”#”>Remoras</a></li>
<li><a href=”#”>Tilefishes</a></li>
<li><a href=”#”>Bluefishes</a></li>
<li><a href=”#”>Tigerfishes</a></li>
</ul>
</li>

<!– etc. –>
</ul>

<?php endif; ?>
</ul>

</div>

Once the sidebar 1 and 2 php templates are uploaded to the server, you will find that a multitude of these handy widgets magically appear in the Widgets admin panel from which to choose from. Once you drag a widget to a sidebar, what was previously there is gone from view, but handily still exists on the page itself.

At this point, I’m thinking its time to do some house cleaning. I will get rid of the borders on the test site, and add a little more padding to the content div.

By further tweaking the CSS classes sidebar1 and sidebar2, I can controll the look and feel of the sidebars and tighten things up a bit.

This pretty much brings us up to date on what has already been done, so now we can get down to the nitty gritty!

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.