Problem: Theme users need as many widget-ready areas as possible. They’re easy to use and they help keep theme template files clean. But! unused, empty, widget-ready areas, areas waiting for you to add a widget of your choice, hang around waiting to spoil your designs by limiting your styling options. Just as bad, empty widget areas can invalidate your markup. But don’t worry, we can do something about it. Only first, we need to take a closer look at the problem.
Here’s how a typical widget-ready sidebar looks. I’ve taken the code from Automattic’s guide to widgetizing WordPress themes.
-
<ul id="sidebar">
-
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
-
<!– likely awesome stuff –>
-
<?php endif; ?>
-
</ul>
We’ve got an unordered list and inside of it a statement that looks for the dynamic_sidebar() function. If we’ve registered one, it’ll spit out our awesome stuff: WordPress widgets marked up as list items.
All very good. But what if we start out with no awesome stuff in there? No default widgets? Well, that means our containing ul element will be hanging out there in our site with no li elements in it. A list without list items. Totally invalid and totally unsemantic. Worse yet: what if you were styling that ul with a margin, border, or just positioning it? That styling would stick—even if the widget area was empty. Totally unacceptable.
Thankfully, there’s a fix.
-
// Check for widgets in widget-ready areas http://wordpress.org/support/topic/190184?replies=7#post-808787
-
// Thanks to Chaos Kaizer http://blog.kaizeku.com/
-
function is_sidebar_active( $index = 1){
-
$sidebars = wp_get_sidebars_widgets();
-
$key = (string) 'sidebar-'.$index;
-
-
return (isset($sidebars[$key]));
-
}
Blogger Avice (Chaoskaizer) De’véreux came up with the nifty little function above, is_sidebar_active(), in response to a question in the WordPress support forums. It’s a beaut. With it you can check to see if there are widgets in a sidebar and if not, well, you can do something else. Like nothing for an example. Nothing, in this case, is really something.
Here’s an example of the code from the beginning of this post, modified to produce no widget-ready area by default and load one only if there is a widget added to it.
-
<?php if ( function_exists('dynamic_sidebar') && is_sidebar_active() ) { // there are active widgets for this sidebar
-
echo '<ul id="sidebar">'. "\n";
-
dynamic_sidebar();
-
echo '</ul>' . "\n";
-
} ?>
Now, where would this be useful? Well, Thematic is going to start making use of it. With 13 widget-ready areas and only two containing widgets by default, it was in desperate need of this technique. Here’s how Thematic is using is_sidebar_active() in it’s footer to only create a containing div for a group of 3 widget-ready areas if a widget is loaded into any one of them.
-
<?php if ( function_exists('dynamic_sidebar') ) { ?>
-
<?php if ( is_sidebar_active(3) || is_sidebar_active(4) || is_sidebar_active(5) ) { // one of the subsidiary asides has a widget ?>
-
<div id="subsidiary">
-
-
<?php if ( function_exists('dynamic_sidebar') && is_sidebar_active(3) ) { // there are active widgets for this aside
-
echo '<div id="first" class="aside sub-aside">'. "\n" . '<ul class="xoxo">' . "\n";
-
dynamic_sidebar(3);
-
echo '</ul>' . "\n" . '</div><!– #first .aside –>'. "\n";
-
} ?>
-
-
<?php if ( function_exists('dynamic_sidebar') && is_sidebar_active(4) ) { // there are active widgets for this aside
-
echo '<div id="second" class="aside sub-aside">'. "\n" . '<ul class="xoxo">' . "\n";
-
dynamic_sidebar(4);
-
echo '</ul>' . "\n" . '</div><!– #second .aside –>'. "\n";
-
} ?>
-
-
<?php if ( function_exists('dynamic_sidebar') && is_sidebar_active(5) ) { // there are active widgets for this aside
-
echo '<div id="third" class="aside sub-aside">'. "\n" . '<ul class="xoxo">' . "\n";
-
dynamic_sidebar(5);
-
echo '</ul>' . "\n" . '</div><!– #third .aside –>'. "\n";
-
} ?>
-
-
</div><!– #subsidiary –>
-
<?php } ?>
-
<?php } ?>
I’m a big fan of widget-ready areas. WordPress themes should be using them more creatively and empowering users to take control of their templates. This technique only makes things even easier. Try adapting it in your next WordPress theme and make something beautiful—and usable too.
5 Comments
Ian, this is great. I’m using it for a new theme I’m creating, and it works wonderfully. Thanks for seeking it out!
Thanks for this trick… But it doesn’t work when a widget is deleted from an area : area become empty, but ul element is displaying.
Hi,
Thanks for this tip, but as Vincent says in previous comment, it doesn’t work when a widget is deleted from an area : area become empty, but ul element is displaying.
Any idea ?
Thanks
Thanks for this hint. This helps me!!
Has this been made part of the 9.0 code? Thanks!
4 Trackbacks
[...] Hiding the Sidebar Widget HTML when There’s no Widgets→ With it you can check to see if there are widgets in a sidebar and if not, well, you can do something else. Like nothing for an example. Nothing, in this case, is really something. [...]
[...] take a look at Building with WordPress: From sketch to prototype to company website in 5 hours and Collapsing WordPress Widget-Ready Areas & Sidebars and Show latest comment(s) for each post on main page. Wordpress [...]
[...] Collapsing WordPress Widget-Ready Areas & Sidebars This post covers how to create more versitile widget areas. These types of widget areas will help keep your markup valid when they are being used and when they aren’t. [...]
[...] page after I somehow deleted it and one for thesis notes and thoughts. Both must be developed. http://themeshaper.com/collapsing-wordpress-widget-ready-areas-sidebars/ Some things I want to change: Type and arrangement. How future proof is the organization and [...]