How To Style Individual Widgets in WordPress

I am writing this post because I came across this problem in a recent custom wordpress theme job. My problem was that I wanted to add an additional list style to a widget (a drop down CSS rollover to be exact), but I have also experienced the same problem when trying to use padding to make the tag cloud widget look nicer. If all you need to do is add styling to the contents of a widget, then you can, in WordPress 2.6.x, (and maybe older versions from 2.5 up too) specify a class in the style sheet, which will allow you to style an individual widget. This can be achieved by ‘viewing the source’ of your wordpress page and looking at the <li id=”widget-name-would-be-here”> which appears just above the contents of the widget. By specifying a style ID for the “widget-name-would-be-here” in your style sheet, you are able to style the contents of the widget BUT, and here is where I experienced my problem with the tag cloud, this will also style the <h2>Widget Name</h2><a><li> and any other child tags too too.

Example 1: Styling the ID for the individual Tag Cloud Widget:

Here is a code example of what I am talking about on a default WP tag cloud widget:

<li id=“tag_cloud” class=“widget widget_tag_cloud”><h2 class=“widgettitle”>Tag Cloud</h2><a href=“http://www.underfloortileheating.co.uk/tag/5/” class=“tag-link-8″ title=“1 topic” rel=“tag” style=“font-size: 8pt;”>5</a></li>

In this example, ‘tag_cloud’ is the ID that has been automatically been generated for this widget. However, as you can see, there are other tags within the <li> element, namely <h2> and <a>. Now if I was to try and set a global style for ID=”tag_cloud”, for example, padding:10px; you would find that both my <h2>and<a> tags would get padded out by 10px. This caused a problem for me because I wanted to use a bg image for my <h2> tag which needed to be flush to the edge of the widget, not padded by 10px…in this case, I was able to set the id “tag_cloud h2″ to marging-left:-10px; to fix the problem, but because of the global nature of the widget ID, I had to come up with the workaround. OK, so it was a small one and perhaps doesn’t illustrate how difficult styling widgets can be, but hopefully this next example certainly will.

Example 2: Styling an Individual Widget for WordPress More Complicated Example

This one was a lot more complicated to fix and although it applies to <ul><li> within the widget, you could use the same fix to style any other individual widget too. Ok, so I was using a widget that contained an unordered list. I wanted to create a CSS drop down menu for the list, rather than hog up all of my right sidebar (that’s precious advertising space, y’all!). Widgets, by default, display as <li> items in of themselves and any lists within them are nested lists. The nature of my CSS drop down list required my widget to actually be an unordered list (<ul>) of its own accord, and not just a <li> item of a global <ul>. Ok, so perhaps a code example would help illustrate this point. By default, my widget looked liked this:

<li id=“pages” class=“widget widget_pages”><a href=“http://www.site-name-here.com”> </a><h2 class=“widgettitle”><a href=“http://www.site-name-here.com”>Pages</a></h2>
<a href=“http://www.site-name-here.com”> </a><ul><a href=“http://www.site-name-here.com”> </a><li class=“page_item page-item-2″><a href=“http://www.site-name-here.com/about/” title=“About Us”>About Us</a></li><li class=“page_item page-item-228″><a href=“http://www.site-name-here.com/books/” title=“Books”>Books</a></li><li class=“page_item page-item-236″><a href=“http://www.site-name-here.com/events/” title=“Events”>Events</a></li><li class=“page_item page-item-3″><a href=“http://www.site-name-here.com/links/” title=“Links &amp; Resources”>Links &amp; Resources</a></li><li class=“page_item page-item-240″><a href=“http://www.site-name-here.com/media/” title=“Media”>Media</a></li><li class=“page_item page-item-4″><a href=“http://www.site-name-here.com/subscribe/” title=“Subscribe”>Subscribe</a></li> </ul> </li>

Now for the CSS Drop down to work correctly, I needed to use a <ul> wrapper to achieve it but I could not use the global <ul> to do this as this would apply the same drop down to all my widgets, and I only wanted it to work for one. This required me to add a <ul id=”css-drop-down-wrapper”> just above the widget <li id=”pages”> tag and a </ul> after the final </li> item of the widget.

There is a built in way (via the WP Theme Editor) where you can add tags before widget code and you will find it in the functions.php file (of WordPress 2.6.x - in earlier version it may be in widgets.php) of your wordpress theme. Once opened, you need to look for this code (it will be at the top):

<?php
if ( function_exists(’register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
));

And you can see here that you have the option to specifiy what should appear ‘before a widget’ in the before_widget function. For example, in my CSS Drop Down problem, I considered adding the neccessary <ul id=”drop-down-wrapper”> to the before_widget function (which would have made it look like this: ‘before_widget’ => ‘<ul id=”drop-down-wrapper”><li id=”%1$s” class=”widget %2$s”>’, but the problem with that would have been that the ID would have then been applied to ALL of my widgets in WordPress and I only wanted to do it for one. So, alas! I needed a different kind of fix and this, my widget-wielding friends, is how I did it.

I was using a plugin to generate the contents of my widget, and I am not 100% sure if all widgets will have the same kind of thing inside them. In the plugin I was using, an ‘authors’ plugin to be exact, I was able to manually add the <ul id=”css-drop-wrapper”> to the actual authors.php plugin file, which I was able to do with WordPress 2.6.2 via the Plugins -> Plugin Editor -> Plugin Name -> Edit feature.

In the authors.php plugin file, I scanned through it and came across this piece of code:

// These lines generate our output. Widgets can be very complex
// but as you can see here, they can also be very, very simple.
echo $before_widget . $before_title . $options['Title'] . $after_title;

This allowed me to add my own tags to the individual widget, which ultimately allowed me to achieve my goal of styling this particular widget:

// These lines generate our output. Widgets can be very complex
// but as you can see here, they can also be very, very simple.
echo $before_widget = ‘<ul id=”css-drop-authors”><li>’ . $before_title . $options['Title'] .$after_title;

And taken from the source of the final outputted html:

<ul id=”css-drop-authors”><li id=“pages” class=“widget widget_pages”><a href=“http://www.site-name-here.com”> </a><h2 class=“widgettitle”><a href=“http://www.site-name-here.com”>Pages</a></h2>
<a href=“http://www.site-name-here.com”> </a><ul><a href=“http://www.site-name-here.com”> </a><li class=“page_item page-item-2″><a href=“http://www.site-name-here.com/about/” title=“About Us”>About Us</a></li><li class=“page_item page-item-228″><a href=“http://www.site-name-here.com/books/” title=“Books”>Books</a></li><li class=“page_item page-item-236″><a href=“http://www.site-name-here.com/events/” title=“Events”>Events</a></li><li class=“page_item page-item-3″><a href=“http://www.site-name-here.com/links/” title=“Links &amp; Resources”>Links &amp; Resources</a></li><li class=“page_item page-item-240″><a href=“http://www.site-name-here.com/media/” title=“Media”>Media</a></li><li class=“page_item page-item-4″><a href=“http://www.site-name-here.com/subscribe/” title=“Subscribe”>Subscribe</a></li> </ul> </li>

I then added a closing </ul> into the $after_widget function to keep the html correct.

Conclusion

So from this I have deduced that when the need to customize an individual widget is present, first try and style within your style sheet using its unique ID that is automatically generated via WordPress and if that does not solve your problem (if you don’t mind your style being applied to all widgets) try adding the relevant code in the global functions.php page of your Theme Editor (may be widgets.php for older than WordPress 2.6.x versions) editing $before_widget, $before_title etc. as neccessary and, failing both of those methods, go into the actual plugin file that is generating the widget and look for the $before_widget, $after_widget etc. functions and manually set them to do what you require.

Remember, always backup your code and any files before playing with them!