Mixed Sidebars: Widget & Static Content
Thursday September 4, 2008
When I first started using widgetised content in sidebars on my various blogs and designs I used it as is. That is to say, I thought you had a choice of one or the other: the hand-coded sidebar of your own specific design, or the widgets in the administration panel, following the bits of code you put into functions.php as their layout.
There’s more to widgets though. And they’re quite powerful as you may know, but you can also play with them in your designs.
First off, I want to point you at the basic (great) guide on widgets - some time has been spent on this to help us all and you should definately take a look and use this advice:
Sidebar Content
So to begin with when you read the guides many of them are clear that you can have static content (that you write into the theme sidebar) or dynamic (widget) content. But that’s not true, you can have both, and in fact can mix and match throughout the sidebar.
Assume you have one sidebar and your blog displays 20 posts on the index page, meaning your sidebar can be quite long. There’s a lot of content to fill up there, and you may want a specific order for that content. Also - some of the content may not be widgetised, and so you have to put it in manually.
Functions.php
So here’s the basic functions.php file:
<?php
if (function_exists(’register_sidebar’))
register_sidebar(array(
’name’ => ‘sidebar_one‘,
’before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
’after_widget’ => ‘</li>’,
’before_title’ => ‘<h2 class=”widgettitle”>’,
’after_title’ => ‘</h2>’,
));
?>
Sidebar.php
Notice that we gave it a name, sidebar_one (coloured yellow). This is then used in the sidebar.php like so:
<ul id=’sidebar’>
<?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar_one‘)) : ?>
<li>
….
</li>
endif; ?>
</ul>
So that’s the simple construction of a sidebar, widgetised and ready to go.
The problem with it though is that if you put items into the widgetised sidebar in the admin panel, that’s all that displays. At least, that’s what you first assume. Here’s a more advanced version of the sidebar.php though:
<ul id=’sidebar’>
<li>
<h2 class=”widgettitle”>Test Block</h2>
<ul>
<li>Some item</li>
<li><a href=”#”>Some link</a></li>
</ul>
</li><?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar_one‘)) : ?>
<li>
….
</li>
endif; ?>
</ul>
Now, above the widgetised section there is a hard-coded section (test block). This will display even if there are no widget items set, and even if there are. So now you have sidebar content that is permanent even if you have widgets.
So extend this a little further, adding another sidebar section. First we add a bit more to the functions.php file:
<?php
if (function_exists(’register_sidebar’))
register_sidebar(array(
‘name’ => ‘sidebar_one‘,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(
‘name’ => ‘sidebar_two‘,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
So what we’ve done is create a second sidebar definition for sidebar_two. This is the same structure as sidebar_one but it is a separate entity now - it can be addressed separately in the admin panel (you’ll notice there is a drop-down menu now under ‘current widgets’ as you see on the right).
Now to extend the sidebar to allow for the second content section.
Say you wanted to have a first section that allows for widget content, you might want to change it every week. Then you’d want (indefinitely) an advertising block, then another widget area. This is where you can use sidebar_one and sidebar_two together, like this:
<ul id=’sidebar’>
<li>
<h2 class=”widgettitle”>Test Block</h2>
<ul>
<li>Some item</li>
<li><a href=”#”>Some link</a></li>
</ul>
</li><?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar_one‘)) : ?>
<li>
….
</li>
endif; ?><li>
<h2 class=”widgettitle”>Advertising</h2>
<ul>
<li>Some advertising code here</li>
</ul>
</li><?php if (!function_exists(’dynamic_sidebar’) || !dynamic_sidebar(’sidebar_two‘)) : ?>
<li>
….
</li>
endif; ?>
</ul>
So there you have it, a single sidebar with two widget sections. You could make two sidebars and put one section (for say, sidebar_one) in that and the other section (sidebar_two) in that. Or even more, three or four and so on. There are so many ways that these can be used, checking for certain categories, or archives, or dates, I mean the list is endless on how you could deploy them.











This blog requires you to login before replying. If you do not have an account you can create one (for free!).