Jeremiah Hoyet

I was browsing through the WordPress.org support forum today when I came across a question that I thought was worthy of a blog post. The question was:

I am trying to change the titles of my sidebar widgets (i.e. “Pages,” “Recent comments,” “Meta,” etc) to images. Since my sidebar is widgetized, it seems this is more difficult than simply changing a few things in my sidebar.php document.

Does anyone have any tips?

It seems that with the implementation of widgets in later versions of WordPress, users have had some trouble customizing their sidebar titles with images. In early versions of WordPress, one could just go into the sidebar.php file and replace the titles of sidebar sections with an image using the good ol’ fashion HTML tag. This is no longer possible since widgets are dynamically added to the sidebar and are no longer located in the sidebar.php file.

Although I personally would rather use text to title sections on my sidebar, for the reduce loading times and various other reasons, using an image can allow you to use non-standard fonts and add a bit of flare to your blog. I’m going to show you have to achieve this using a bit of “detective work” and CSS.

Step One: Creating your image

This is more of a tip than a step.

Before you begin, you should have the image you’ll be replacing the widget title with already created and uploaded to your server (or a free image host). It’s also a good idea to dive into the stylesheet of your WordPress theme to figure out the widget of the sidebar, and create your images using that width. The default theme, Kubrick, has a sidebar width of 190px.

Step Two: Find out the structure of a widget title for your theme

The first, and easiest, step is to figure out how your WordPress theme outputs a widget’s title in the sidebar. You can do this by going to your dashboard and adding the widget you’d like to replace the title of to your sidebar. Once the widget is placed in the sidebar, browse over to your blog. In your browser click View–> Page Source (or just “Source if you’re using IE). Now search the document for the title of the widget you’re looking for; for example “Recent Posts”.

If you’re using the default WordPress theme, Kubrick, you should see something like this:

<li id=”recent-posts” class=”widget widget_recent_entries”>
<h2 class=”widgettitle”>Recent Posts</h2>
<ul>
<li><a href=”http://yourblogurl.com/?p=1″>Hello world!</a></li>
</ul>
</li>


You’ll notice that the <h2> tag encasing the title of the widget, Recent Posts, has a class defined as “widgettitle”. This is used to define the overall style of every widget title on your blog, but because we’re going to want each widget to have it’s own unique image as a title, we are not going to worry about this class. What we wanted to find out was the class of the overall widget, in this case that can be found in the first line inside the <li> tag, and that class is “widget_recent_entries”.

Step Three: Writing the CSS

Now that we know what class to use, we can write the CSS that will insert our image in place of the text title of the widget. I’m using the default theme as an example, remember that your theme’s sidebar may output widgets in a different fashion and this may effect the CSS you’re going to be writing:

li.widget_recent_entries h2 {
display: block;
width: 125px;
height: 45px;
text-indent: -9999px;
background-image: url(’http://www.theurlofyourimage.com/image.jpg’);
background-repeat: no-repeat;
background-position: center center;
}

The above CSS should be added to the end of your stylesheet and will replace the text in title of the Recent Posts widget with an image of your choosing. Remember to edit the width and height to suite your image, and also remember to change the URL to point at your image.

Now that you have one image title in your sidebar, use the same process to find the class for each widget title you want to change!

I hope this little tutorial helps out in some way!