Note that you can “widgetize” almost any of your template files, but for the sake of this article, we will take a look at just the more common, single sidebar.

First of all – What are Widgets?

According to Automattic (the company behind WordPress), “they’re just things you can use to personalize your WordPress site without knowing HTML”. To elaborate further, widgets are like a fast way to plug in bits of code into your sidebar. Widgets are accessed via the admin panel, under “Appearance” > “Widgets”. Common widgets are Calendar, Meta, Recent Posts, the Tag Cloud and Text. Widgets are not to be confused with “plugins”. Although there are some plugins that become available as “Widgets” once you install them.

Why use Widgets?

For theme developers – it is almost a necessity for your theme to be widgetized. This means that you have to tailor your theme to non-savvy users to be able to customize your theme to use these small snippets of code without writing a bit of HMTL. It is a way to cater to their needs as well as expand and utilize the full capability of WordPress. Check out the screenshot below of the Widgets section from the admin panel:

Now consider the user of your theme doesn’t know any web development – doesn’t this functionality come in very handy? This is why widgetizing your themes is always a good idea.

Styling Your Widgetized Sidebar

The Container Approach:

I’m sure you’ve seen this kind of sidebar. It’s one where widgets are compartmentalized or “boxed”. May it be sharp squares, faded edges or even rounded corners – the container approach is definitely one of the more popular sidebar styles around. Take a look at a typical container for a widget:

As you can see, the entire container can be drawn up by just one DIV. This is what the “before_widget” and “after_widget” name-value pairs are for in your functions.php:

Note that declaring a “sidebar-column” div for the widget container – you are now able to style unordered list items, as well as their child elements. As with my example, I’ve designated bigger icons for the parent list-style property, and a smaller arrow button for the children.

Below are a couple of good example websites that use the container approach for their sidebars:

http://www.gomediazine.com

http://www.blurbia.com/blog

The Continuous Column Approach:

This approach preserves the notion of a sidebar being – just a real bar. May it be in the right side or the left, the continuous column sidebar remains classic, simple and if done right – timeless.

Take a look at the simplicity of this style:

In this case, all I really styled is the headings of each widget. This is what the function.php’s “before_title” and “after_title” comes in handy. I used a regular H3 tag, assigning just the right font style, sufficient padding and a tiny bottom-border image – and it’s ready to go.

As mentioned, the continuous column approach gives your sidebar that “clean” look. It is used by many news and magazine style blogs in the conservative end. Two popular websites that employ the continuous column approach are:

http://www.woothemes.com/blog/

http://daily.creattica.com/

Anything Goes:

Anything goes is exactly what it implies. It is very random, no compartments, borders or even visible patterns. Although it is still a column, there is no definite distinction where widgets start or end. Note that this can only be achieved by combining the “fewest similar” widgets, along with static elements. By “fewest similar” I mean widgets that are visually different from one another. For example: “Recent Posts”, “Archives” and “Categories” widgets are all rendered as lists.

Remember – you can play with static elements and combine them with the more dynamic widgets, to give your sidebar a more arbitrary look:

Take a look at these websites that have an “anything goes” style sidebar:

http://www.webdesignerwall.com/

http://www.dawghousedesignstudio.com/

What about you? What’s your take on styling sidebars and widgets?

Part 1 – Creating the Image

In Photoshop, create a new image 432 pixels by 78 pixels. Add a title for your bar, and four icons of your subscription options. In our case, we’re using an RSS feed icon, Twitter, Email and Facebook. *Icons are from WeFunction Collection. Line them up and space them evenly.

Add guides that divide each button. Also be sure to add a guide right on the top of the document. Lock the guides in place – you will need these dimensions when creating the CSS.

Multiply the canvas height by two. Make sure you click the button that keeps the canvas flushed to the bottom

Select all existing layers and create a duplicate set. Merge all the layers in that set to create a single layer which we’ll use for the hover effect of the links.

Nudge the new layer upwards – make sure it’s lined up exactly as the bottom layers. To create a hover effect – I desaturate the layer all the way to the max – making it a grayscale layer.

Make sure you hide the background layer and save the image as a .png.

Part 2 – The HTML

We’re going to need a single div and an unordered list of links to render the sprites. Make sure to add an id for each anchor tag. This is how we’ll match the image through our stylesheet.

1
2
3
4
5
6
7
8
9

<div id="subscribe-div">
<ul id="subsc">
<li class="title">Keep Updated</li>
<li><a id="rss" href="#" title="Subscribe to RSS">RSS</a></li>
<li><a id="twit" href="#" title="Follow Us in Twitter">Twitter</a></li>
<li><a id="mailrss" href="#" title="Get Feeds through Mail">Subscribe By Email</a></li>
<li><a id="facebook" href="#" title="Find us in Facebook">Facebook</a></li>
</ul> 
</div><!--subscribe-div-->

Of course you have to replace the # with your links. Note that the first list item is not a link. This is just a placeholder for the title “Keep Updated” title.

Part 3 – The CSS

1
2
3

#subscribe-div {margin:0 auto;}
#subscribe-div ul#subsc li {display:inline; float:left; }
#subscribe-div ul#subsc li a { background:url(images/social-sprites.png);  display:block; float:left; height:78px;}

The first selector (#subscribe-div) can contain general properties of your bar. This includes overall padding, margins or positioning. The second selector (#subscribe-div ul#subsc li) – lets the browser know to display list items horizontally. The third (#subscribe-div ul#subsc li a) – calls our .png image.

#subscribe-div ul#subsc li.bar-title {background:url(images/social-sprites.png); background-position:0 0; width:156px; height:78px; text-indent:-9999px;}

This styles our list item bar-title with the “Keep Updated” leftmost section of our .png image – hence the position of 0 0 (means coordinates of 0 and 0). Next is styling the normal state of the links:

1
2
3
4

#subscribe-div ul#subsc li a#rss {background-position:-156px 0; width:68px; }
#subscribe-div ul#subsc li a#twit {background-position:-224px 0; width:65px; }
#subscribe-div ul#subsc li a#mailrss {background-position:-289px 0; width:65px; }
#subscribe-div ul#subsc li a#facebook {background-position:-354px 0; width:78px; }

The above code reflects the normal state of the buttons in our list. The only properties applied are width and background position. To get the width of each button, you have to go back to your .psd (remember applying the guides in the beginning of the tutorial). Note that not all the buttons are identical in size, thus varying in widths. To get the background position, always remember: the first value is the left coordinate and the next value is top. Since we already know that our title is 156 pixels, we know our first button (rss) is going to have a background position of -156px.

Next is the hover state.

1
2
3
4

#subscribe-div ul#subsc li a:hover#rss {background-position:-156px 78px; width:68px;}
#subscribe-div ul#subsc li a:hover#twit {background-position:-224px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#mailrss {background-position:-289px 78px; width:65px; }
#subscribe-div ul#subsc li a:hover#facebook {background-position:-354px 78px; width:78px; }

Notice I just copied the code for the normal state and re-pasted it. The only difference is the use of anchor pseudo class :hover is appended to the “a” selector, and the top value of background position is now 78 pixels. This is because we want the .png image to shift 78 pixels downward, once the mouse is hovered over each link.

The only thing left to do is to indent the text of the links. This is done in the #subscribe-div ul#subsc li a selector (text-indent:-9999px;).

And that’s it. We have finished creating a subscribe bar from an image in Photoshop, HTML and finally adding some styles with CSS. You can view the demo from this link, or download the source code from here. All I ask is for you leave a comment, subscribe or follow me in Twitter.