Styling Those Widgets

I really love WordPress. I’m not afraid to admit it. I make my living off it, I work with it every day, and I’m always learning new things about it. So, with the recent announcement that WordPress 2.2 will now have widget functionality built in, I thought it would be appropriate to share with you just how to style those nifty widgetized sidebars everybody now has at their disposal. (for those who don’t know, widgets used to be a plugin, not an automatic feature).

And no, I’m not talking about the oh so common tutorial on how to make your sidebars “widget ready” … there are plenty of those, and there’s no reason to reinvent the wheel.

What I want to talk about is a problem that comes when you simply “widgetize” your sidebars, and don’t consider the styling implications that come with it.

You see, for whatever reason, widgets use nested lists to display the content of the widgets by default. Here’s what the output source of your sidebar looks like with widgets in them:

<div id=”sidebar”>
<ul>
<li>
<h2>Widget Header (assuming the widget includes a header)</h2>
*there may be another nested list here,
or an image, or a form, etc. it’s your
job to prepare for them all*
</li>
<li>
<h2>Another Widget Header</h2>
*more stuff here, see above
</li>
</ul>
</div>

*As you may have been able to tell, you have to be a bit of a fortune teller to predict the kinds of widgets people will put in their sidebar. But regardless, you have to prepare for them all. Also, you may notice that your sidebar outputs different code than this one. It all just depends on how you structure your code before and after you call the widgets. Because there can be so many, you’ll definitely want to view the html source of your blog and check the structure that the widgets output, then style based on that. But for now, we’ll go off the code above.

First of all, you should already have your sidebar styled. What we’re going to do is take advantage of the hierarchical structure of CSS.

The second element is the unordered list, <ul>. Here’s how to style it (yes, this involves editing your CSS file):

#sidebar ul {
attributes;
}

Next, we handle the list items, <li>

#sidebar ul li {
list-style-type: none;
other attributes;
}

Notice that I changed the list-style-type to “none”. Unless you want a little bullet next to each one of your widgets, be sure to put that in there.

See Also

Inspiring Motivational Quotes

Next, we handle the header, <h2>

#sidebar ul li h2 {
attributes;
}

Finally, make sure to style the various elements that may show up in your sidebar widget,

#sidebar ul li img
#sidebar ul li form
#sidebar ul li p
#sidebar ul li a (if you want your sidebar links to look different than normal)
#sidebar ul li ul
#sidebar ul li ul li
#sidebar ul li ul li ul
#sidebar ul li ul li ul li

Those last 2 may seem unnecessary, but when you think about how sub-categories and sub-pages are listed in WordPress, you can end up with several nested lists … which means YOU need to have a style to cover them. And that’s the point … you have to think ahead. I can’t tell you how many themes out there are not prepared for all the different possibilities … I’m embarassed to say even some of mine aren’t. But with just a little planning, you can make sure that your theme actually IS ready for those widgets. So get busy! Go fix your themes!

Oh, and if you don’t have any idea what I was talking about in this post, don’t worry. This was meant for blog designers, or people who feel comfortable working with WordPress themes :-) For more information on creating and working with WordPress themes, visit the tutorial series over at wpdesigner.com or check out the tutorial from Brian Gardner (part 1 – part 2). For more information on widgets, visit this page over at Automattic.

Nathan Rice is a blogger and freelance web designer. He co-operates RockinThemes.com, and is a contributer at Performancing and WordPressThemes.com