Custom List Graphics in WordPress

When you add a widget to the sidebar of your WordPress blog, you are essentially adding a specialized list. These lists are formatted to include things like recent posts, pages, or blogroll. In most themes, these lists are formatted with a negative list-style, meaning they do not follow a bullet. In many instances, this creates a clean simple look, but sometimes it’s fun to create custom bullet graphics to add a bit of pizazz. Here’s the way you do just that using the Slate theme:

Using Photoshop, create the image that you would like to display as your bullet. A good rule of thumb is to make this image no larger then 15×15px. For this demonstration, I created an image for the Slate theme that’s 12×11px and displays a blue arrow on a gray background. The colors were chosen to match the color pallete of the Slate theme. I named my image arrow.png. The result was an image that looked like this:

To make this image available to call upon, it needs to be uploaded into the images folder within the theme directory. If your theme doesn’t include an images folder, I recommend creating one. For the Slate theme, we are dropping the image into wp-content/themes/slate/images/.

Now that the image is in place, we can specify its use in the stylesheet. Open style.css by selecting Editor under the Appearance section on your WordPress dashboard. Scroll down to the section titled sidebar and add this snipit:

#sidebar ul li ul{
	list-style-image: url(images/arrow.png);
        padding: 0 0 0 5px;
	}

This style describes the list-style-image for all list items that fall bellow the sidebar title in the list hierarchy. With the Slate theme, a small left padding was needed to bump the images away from the content/sidebar dividing line. In other themes, you may find that greater or lesser padding is needed.

Here is the final result using this technique on the Slate theme demo page.