How to use an image for your category title in WordPress
I couldn’t find the answer to this question so once I figured it out (it was so simple) I thought I should share. In wordpress, you have the ability to call different lists to your sidebar (or wherever you have those) by using <?php wp_list_categories(‘title_li=’); ?> (for you blog entry categories) or <?php wp_list_pages(‘title_li=’ ); ?> (for your page lists).
Mine are both found in my sidebar. I had the title “Blog Topics” to head up my list of blog categories by using <?php wp_list_categories(‘title_li=’); ?> and styling it with an h2 tag. What I wanted to do was use an image that was 125 x 40 px in lieu of the plain text. SO, here’s what I did.
I added on my style sheet, a class of .blogTopics with the following:
.blogTopics {
background-image: url(images/blogTopics.gif);
background-repeat:no-repeat;
background-position:left top;
width: 125px;
height: 40px;}
Then, in my sidebar.php file, I just added in my class div right above the call for my categories list and voila!
Like so:
<ul id=”side”>
<li><?php wp_list_pages(‘title_li=’ ); ?></li>
<br /><br />
<div class=”blogTopics”></div>
<li><?php wp_list_categories(‘title_li=’); ?></li></ul>
And there you have it, real easy!
Comments are closed.