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">
<!-- likely awesome stuff -->
</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. Continue reading “Collapsing WordPress Widget-Ready Areas & Sidebars”