Adding Category Icons to your ClassiPress Homepage

Did you ClassiPress category icons disappear after your recent upgrade? Not a problem. We will walk you though a new tutorial on how to add icons to you site without modifying any core code at all. Whats core code? Well, the code inside the /classipress/ directory you uploaded. You never want to modify that code because upgrading becomes rather difficult when you do that! Instead you should always create a child theme, which will lean on ClassiPress and extend its functionality allowing you to change styles, colors, and even how some pages function! If you don’t know how to make a child theme, you might start in the tutorial we wrote for AppThemes here: http://www.appthemes.com/blog/classipress-child-theme-tutorial-part-1/

Now that you have established a child theme, lets begin.

Step 1: Default all categories to use a generic icon

The first step we will take is to implement styles and load the same icon for every category. Start by opening up your child themes style sheet and then you will want to copy this code and place it inside.

Step 2: Add icon image to your child theme

If you peek into the code above you will see its looking for “images/cp_logo_icon.png”. That means we need to add that file to the server. To make things easier for you, we are providing you with a zipped copy of the images folder.

Simply download this file: classipress-icons-samples

and extract the images folder into your child theme. To give you an example, your basic childtheme folder should look like this:

Step 2: Preview and Find Category ID

The site should now look something like this.

Now lets go find the ID of the “Pro Check-Ins” category so that we can use a custom icon just for that one category. To do this, you can of course use Firebug and inspect the HTML using developer tools, but I’m going to assume many of you don’t know how to do that, so lets get the category ID from the WordPress admin.

• Navigate to /wp-admin/ and login if you haven’t already.
• Click on the “Ads” section, then click on the “ad categories” subsection where you should see a list of your Classifieds categories you created.
• If you click to edit any of the categories you will be taken to a page where the URL will inidicate the category ID. In this example we clicked on the “pro check-ins” category. See image below where we indicate how to find your category ID from the URL:

Now we know the category ID is 42. Please keep that in mind as we enter the next step of the process.

Step 3: Customize the icon per category

Now that we know the category ID, we are able to add the next line of CSS code in our style.css document. Note that you should have the second icon already in your images folder that was included in the download above.

Take this above code and append your style.css file with it. Now your page should look something like this! Rinse and repeat for all other categories.