Creating ClassiPress Category Icons

If you have visited the ClassiPress Demo recently you may have noticed some color and pizazz that you hadn’t seen before. If you take a closer look you will see that…wait, there are icons for every category!

Wow, that’s great. But how are you going to get icons onto your ClassiPress site? Well, we are here to give you a small tutorial on how to add one icon to one category, giving you the knowledge that will allow you to create categories for ALL your icons!

Lets take a brief look at the new category area as it appears on the demo.

First off you need to have at least some knowledge of how to edit theme files and upload them. If you are not familiar with that, you might search the web for some basic WordPress theme tutorials to see what you can learn. So to begin you have two options.

You can modify existing CSS files built-in to the ClassiPress theme – style.css or custom.css (note that you must rename the custom-sample.css file to custom.css in order for it to become functional). But be super careful to backup your files before upgrading or you will lose your changes.
You can create a child theme, which has its own CSS document. You do not have to worry about your files upon upgrade, and will maintain your styles between ClassiPress versions.

We will assume at this point you have opened one of the above CSS documents for editing so that we can begin. Before we go in and create our new CSS style we need to do some “information collecting”.

In order to create the styles we need to know the “category ID” of every category we want to add an icon to. For this tutorial we are only going to modify one category icon. We are also going to suggest that you use Firefox as a web browser.

So next login to your WordPress / ClassiPress website as an administrator and then click on Posts (or Ads) and then click on Categories which should show you a screen that looks something like this. Notice that we are trying to capture the Category ID. We will need to capture the ID’s for all the categories we want to create icons for.

Now that we know the category ID is 95, we need to find an image icon to use. You can get these from all over the internet and a great icon search engine is called, Iconfinder. Make sure you check the licensing terms for each icon you use. Some cost money while others are free.

Next you’ll want to upload the image to your website. If you know how to use FTP, you can place the image in your theme or child theme directory. Otherwise follow along and we will use the WordPress Media Manager to upload our new icon.

So next click on “Media” then on “Add New” as shown below. Then upload your icon. Make sure you size the image to be 24 pixels tall by 24 pixels wide (or smaller) BEFORE uploading it. Sometimes you’ll be able to get the image in the proper size. Other times, you’ll have to re-size it yourself. We recommend using an image editor like Adobe Photoshop, Gimp (free), or Pixlr (free online). Also note that you shouldn’t upload actual icon files that look like “file.ico“. Instead you should upload jpg, gif, or png images.

Now make sure you capture the File URL from the textbox and keep this URL somewhere safe because we will be using it in our CSS file.

Now that we have the category icon image on the server, and we have captured the category ID, lets add the style to the stylesheet. You should have your stylesheet open for editing, and we are going to add the following lines:

.cat-item-95 {
background:url("http://yourdomain.com/youruploaddirectory/iconfilename.png") no-repeat scroll left center transparent;
}

Keep in mind you will replace the number “95” with your category ID, and the URL will be replaced with the File URL that you collected while uploading the file. Also note that the above URL will not function as we will not be providing the icon images for you.

In some cases, the icon positioning might need adjusting which you can do on an individual basis. Here’s an example of how you can move it down two pixels:

.cat-item-95 {
background:url("http://yourdomain.com/youruploaddirectory/iconfilename.png") no-repeat scroll left -2px transparent;
}

If it needs to move up a tad, then change it to 2px. If the icon needs to move left or right a bit, just replace the “left” to something like 2px or -1px. It takes some playing around with it sometimes to get it just right. If you use Firefox, it’s much easier to use a free plugin called Firebug which allows you to edit your css files in real-time to preview the changes. This avoids the back and forth of saving, uploading, and then browser refreshing (shift+refresh) each time. Firebug is more of a developer’s tool so if you decide to use it, we recommend going over a demo first. Here’s one to get you started.

Make sure you save your changes to the stylesheet and upload them back up to the server. Viola, you can now do this for all your “Parent” categories to give your homepage a sweet new feel.

Your rating: 1

Rating: 3.8 - 16 votes

Comments (16)