Avatar of scarstens

Creating ClassiPress Category Icons

September 12, 2010 | scarstens | Tutorials

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.

  1. 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.
  2. 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: none
Rating: 3.6 - 12 votes

Popular Marketplace Items

  • StarStruck WordPress Plugin Thumbnail
    $19

    StarStruck

     (14)
    A fast, lightweight, and elegant star rating system for comments, pages, & posts.
  • Contact Stats Vantage Plugin Logo
    $29

    Contact Stats

     (2)
    Captures valuable geo data from visitors on Vantage.
  • adposter-blocker-thumbnail
    $9

    AdPoster Blocker

     (2)
    A simple but powerful plugin that blocks spammy new user regs and/or ads/jobs/posts.
  • appmaps-bing-thumbnail
    $9

    AppMaps Bing

     (1)
    Replace Google Maps with Bing Maps on your Vantage site.
  • simply-hired-thumbnail
    $29

    Simply Hired Publisher

     (4)
    A Simply Hired aggregator that publishes job listings on your site.
  • displayGeoDistanceVantageLogo
    $15

    Display GEO Distance Vantage

     (1)
    Adds the relative distance to each listing based on a zip/postal code or city/state search.
  • thumbnail-vantage-review-badges
    $19

    Review Badges

     (3)
    Create & distribute dynamic business listing review badges.
  • thumbnail-vantage-user-locator
    $19

    User Locator for Vantage

     (7)
    Auto-detect & add your visitors location using geo coordinates.
  • cj-thumbnail
    $29

    Commission Junction Publisher

     (7)
    Jump start your Clipper site with affiliate deals from Commission Junction.
  • linkedin-thumbnail
    $29

    LinkedIn Publisher

     (3)
    A highly customizable job aggregator for JobRoller that connects with LinkedIn.
  • $49

    eClassify

     (17)
    A rich, stylish, professional & clean responsive design child theme for ClassiPress.
  • infinite-scroll-thumbnail
    $19

    Vantage Infinite Scroll

     (3)
    Create an endless page like Facebook's wall. Replaces the standard pagination.

16 Responses to “Creating ClassiPress Category Icons

  1. Avatar of tmackinnon

    1 Comment

    7/10 Joined

    Awseome work, love all the improvements that have been made to the script.

    Keep up the good work, look forward to more!

    TM

    Like
    Anonymous likes this.

  2. Avatar of imomin

    Nice work!

    It would have been better if there was browse button when adding or editing category. Even though I like it but I might not do it. Not yet.
    Mainly because:
    1) I do not have knowledge of how to edit theme.
    2) I have a live site and I do not want to do something which might break the site.
    3) I don’t my site to get screwed-up with future updates (never got time to play with child_theme).
    4) I do not want to spend whole lot of time on it. I like feature to be part of the Classipress theme or have plug-ins (plug and play). So, I don’t have to learn CSS, PHP, MYSQL, etc. to enjoy your new features.

    Have you considered following approch?
    http://wordpress.org/extend/plugins/category-icons/
    http://wordpress.org/extend/plugins/category-page-icons/screenshots/

    • Avatar of ahikmahin

      23 Comments

      8/10 Joined

      thanks for sharing this man :)

      Like
      Anonymous likes this.

    • Avatar of paully

      I second @imomin’s reply. This kind of feature would be a big score.

    • Avatar of scarstens

      The feature was simple to create, didn’t take to much time to build in, and provides a GREAT framework for developers to use category icons. I’m pretty sure we realized that everyday computer users wouldn’t be able to take advantage of the feature how it is now, but its a stepping stone towards greatness.

      Like
      Anonymous likes this.

  3. Hi,nice post…I am looking forward for some of the more posts by you..
    Just wondering to ask can we convert wordpress to classipress themes..Is it possible?

  4. Hello

    Is it possible to remove the number of ads that is next to the category menu…

    exemple : cars (25)

  5. Avatar of brokencode

    1 Comment

    10/10 Joined

    I thought it has the option to select category icons on previous version. Don’t know why it is removed.

    • Avatar of scarstens

      if you are referring to the early 2.0 versions, I’m fairly certain the entire script was rewritten after that, but that era of ClassiPress was “pre-Seth”, so I couldn’t say with 100% certainty.

  6. There is something seriously flawed with this method. How is the php element going to know to call the cat-item-95 class if you don’t define it in the element?

    This doesn’t work!

    Like
    Anonymous likes this.

    • Avatar of scarstens

      It is not flawed, as you can see on the demo site it works perfectly fine.

      Like
      2 people like this.

  7. The other part that doesn’t work with this method is having a different icon for each category. With the current method it would only create one icon for all categrories but I want differnt icons for each cat.

    Thanks,

    • Avatar of scarstens

      The “cat-item-ID” class is built automatically by wordpress. I promise you that each category has its own unique identifier, which is how you setup an icon for each one.

      Like
      tj2014 likes this.

Discussion is closed.