Month: March 2008

This tutorial will walk you through creating a single widgetized sidebar container filled with individually styled widgets that can span a wide sidebar or float to either side to create the appearance of columns.

An alternative strategy was covered in Part I.

There are two general approaches to styling a wide, widgetized sidebar: fill one dynamic_sidebar with individually styled widgets, or fill a sidebar container with several instances of dynamic_sidebar. Though perfectionists and geeky control freaks will appreciate the control of individually styled widgets, for pure speed and simplicity the multiple dynamic_sidebar path is hard to beat.

Styling Wide Widgetized Sidebars, Part I

1. Step One: Choose a width
2. Step Two: Add widget styling to functions.php
3. Step Three: Define style declarations
4. Step Four: Find and add widget style names

Step One: Choose a width

I recently scouted around for common wide sidebar widths and what fits into them and came up with a target of about 400 pixels wide. To my eye, 350 to 400px is a good width for a recent comments plugin that would get into a lot of little rows of text in a narrower column – see my sidebar for an example. Three of the popular 125px square ads and some padding will fit nicely into a 400px wide text widget. Or, a 400px wide sidebar could hold two 200px wide columns. Some popular widgets such as My Top Spots are 200px wide.

I’m assuming that you already have a wide sidebar to style. If not, the tutorial Wide Sidebar and Header for WordPress Default Theme should be helpful.

Step Two: Add widget styling to functions.php

This code in functions.php will allow for one instance of dynamic_sidebar. Where you see li id="%1$s" and class="widget %2$s", WordPress will automatically insert IDs and classes named after whatever widget is displayed. h2 class="widgettitle" inserts a single class, “widgettitle,” for the sidebar H2s used by WordPress’s Default theme. If your theme uses H3s or H4s or some other tag, you’ll need to replace the H2 in functions.php with what is true for your theme. To make use of those IDs and classes you’ll need to edit your stylesheet.

More background information about this code can be found in other tutorials listed at the end of this entry.

 
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>

 
',
  ));
 

Step Three: Define style declarations

Decide what shape you’d like for your sidebar parts, create some CSS declarations to match, and add them to your theme’s style sheet. A declaration is the width: 100% part of a CSS rule. You’ll add the selectors (IDs and classes) in Step Four. Here are some examples to help you get started. I’ve left off margins and padding because they will vary according to what else you have going on.

 
/* full width */

 {width: 100%;
   clear: both;}
 
/* left column */
 {width: 49%;
   float: left;
   clear: left;}

 
/* right column */
 {width: 49%;
   float: right;
   clear: right;}

 

Step Four: Find and add widget style names

Go to Presentation > Widgets in your WordPress dashboard and drag the widgets you want into your sidebar, in the order in which you want them to appear. Depending on how floats and clears line up, for the most part the order will be from left to right, from top to bottom.

Next, take a look at the source code of the generated page and make note of the IDs and classes created around your widgets. Try using FireFox with the Web Developer Toolbar to quickly find them. I like to edit my CSS using CSS > Edit CSS from the Web Developer Toolbar, while using Outline > Outline Current Element to quickly find the names of classes and IDs created around each widget.

You’ll see that in many cases there are separate selectors for different items within a widget. You may not need to use all the various classes and IDs provided.

In addition to the outer ID there is often an inner wrap. The inner lines can usually be styled with something like #inner_id ul li. Take a look at a facsimile of some code generated by the get recent comments widget.

 
<li id="get-recent-comments" class="widget widget_get_recent_comments">
<h2 class="widgettitle">Recent Comments</h2>
<div id="get_recent_comments_wrap">
<ul>

<li>
<a href="http://url-here/postname/#comment-100" title="Post Title, Date">Commenter Name</a>: Comment text...</li>
<li>
<a href="http://url-here/postname/#comment-101" title="Post Title, Date">Commenter Name</a>: Comment text...</li>
</ul>

</div>
</li>
 

When I styled my sidebar, I started by adding the outer ID to whatever declaration made sense from step 3 above. Then, I created a separate rule for the inner ID. For example, look what I did with the recent comments widget:

 
/* full width */
#get-recent-comments {
   width: 100%;
   clear: both;}

 
#get_recent_comments_wrap ul li {
   list-style-image: url("http://ablereach.com/images/triangle.gif");
   margin-left: 20px;}

 

Go through each active widget and add IDs and classes to your stylesheet as needed.

Here are a few examples of the IDs and classes associated with some popular widgets. Every widget is a little different, and there are a lot of widgets and plugins out there, so for accuracy I recommend that you check the source code yourself.

• Categories
  li id="categories-1" class="widget widget_categories"
  A second instance of Categories would be called categories-2.
• Pages

  Outer: li id="pages" class="widget widget_pages"
  Inner: ul li class="page_item page-item-2

• Text Box
  Outer: li id="text-1" class="widget widget_text"
  Inner: div class="textwidget"
  A second instance of Text Box would be called text-2
• Recent Posts
  li id="recent-posts" class="widget widget_recent_entries"

More on functions.php or widening Kubrick

• Styling Wide Widgetized Sidebars, Part I
• WordPress Sidebar Widget Sandwich
• WordPress: Add a Second Widget-Ready Sidebar
• Wide Sidebar and Header for WordPress Default Theme