Customizing widget areas to display different page and post sidebars

Don’t you just hate it when you launch a site, hand it off, get paid and a few weeks later the client says, you know… I think I want to change the templates now. This is not working for me.

My first reaction when I hear this is, “crap, I didn’t do my job properly, how can I fix it“. And the reality is, that without user interaction, it’s often difficult to anticipate what they and the client will want and so this type of feedback should be expected and in fact welcomed.

My last project with Tod Maffin allowed me to learn a great deal from such a request for change.


Tod is a talented public speaker and he’s also very computer savvy. He understands HTML and CSS and he’s not afraid to go in the templates and start mucking around.

His website was set up with 3 non-widget enabled, sidebars. The blog posts displayed 2 side-by-side sidebars, while the pages displayed the third one. Just a few months after the launch, Tod requested that I modify the templates so that he could have widget-enabled sidebars on his posts and his pages, and that these would be different. He also wanted the sidebar to have a larger area, that spanned the top area and would sit on top of two narrower columns. The diagram to the right represents the requested layout of the sidebars.

I read his request, thought about it for a while and scratched my head. I knew how to create 2 side-by-side widget enabled sidebars, but how do you add a third one and make it double the size of the bottom ones? Tzaddi, always calm and level headed, had the answer. Just make the top one another widget area. Of course. Made perfect sense.

Adding widget enabled sidebars is quite simple.

First you need to edit your function.php file as so:



<?php
if (function_exists('register_sidebar'))
{
 register_sidebar(
 array(
 'name'          => 'Top Blog Sidebar',
 )
 );
 register_sidebar(
 array(
 'name'          => 'Left Blog Sidebar',
 )
 );
 register_sidebar(
 array(
 'name'          => 'Right Blog Sidebar',
 )
 );
register_sidebar(
 array(
 'name'          => 'Top Page Sidebar',
 )
);
register_sidebar(
 array(
 'name'          => 'Left Page Sidebar',
 )
);
register_sidebar(
 array(
 'name'          => 'Right Page Sidebar',
 )
);
}
?>

This code tells your theme that it needs to create 6 dynamic widget areas.

Next you need alter the code in your sidebar.php to display the various widget areas, like so:

<div id="sidebar">
<?php if (!is_page()) { ?>
<div id="top_blog_sidebar">
<ul>
<?php if( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

<?php endif; ?>
</ul>
</div>
<div id="top_left_blog_sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif;?>
</ul>
</div>
<div id="top_right_blog_sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>

<?php endif;?>
</ul>
</div>

<?php }else { ?>

<div id="top_page_sidebar">
<ul>
<?php if( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>

<?php endif; ?>
</ul>
</div>
<div id="top_left_page_sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) ) : ?>

<?php endif;?>
</ul>
</div>
<div id="top_right_page_sidebar">
<ul>
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) ) : ?>

<?php endif;?>
</ul>
</div>
<?php }?>
</div>

You now have 3 different sidebar areas displaying on your posts and 3 different ones displaying on your pages. To make them look pretty, you’ll also need to fix the CSS of course, but that’s the easy part.

3 comments:

  1. > Tod is a talented public speaker and he’s
    > also very computer savvy. He understands HTML
    > and CSS and he’s not afraid to go in the
    > templates and start mucking around.

    Translation: I give Tod a perfectly functional set of pages and he goes into them, tinkers with them, then asks me to fix them. ;-) {grin}

Comments are Closed.