Spice Up Your WordPress Site by Giving Categories their Own Icons

 

One way to liven up your site a little and give it a little extra flair is to associate different icons with different categories. Or, you can do it for only one or two categories to really mark those off as different.

When you assign a category an icon, the image that you’ve chosen will show up all over your site whenever a post from that category is present.

Before we get into the code, let’s take a look at how these icons might look on your site.

Music Category Example

Let’s say you have a category for music, and you want to assign that category an icon. Although you could assign every category an icon, you choose to only assign the Music category an icon. (Maybe you’re a musician, and you know that a lot of people come to your site for your take on music. But you write about other things too. In order to help people easily identify the music posts at a glance, you include your icon to help them out.)

Front Page

When not every post gets an icon, you will see only icons on Music category posts in places like the homepage of your site.

Category Page

Of course on your Music category archive page, all the posts will be music posts, and so each one will have an icon associated with it.

The Music category page will even get an extra little icon up in the corner (or wherever you position your icons to be.)

Single Page Post

You will also see your icon show up on your single page post.

How to Do It

The code you need is very simple. You will only need a line of CSS styling.

When you have the URL of your icon (make sure to size it so it’s not too big – I used 60×60 pixels for mine), go to the Stylesheet for your theme. (Appearance > Edit > Stylesheet – style.css)

Place the following code in your stylesheet and save it.

.category-music {
background: url(http://example.com/wp-content/uploads/musicman60.jpg) no-repeat top right;
}

As you can see, all you need to do is name your category and then style it, using a background image. You can do this for any category. Just put “.category-“ and then put the category slug (in this case it’s “music”).

Unless you changed your category slug when you set your categories up, it should be the same name as  your category.

And that’s all there is to it.

Tags:

• CSS
• categories