How to make rollovers with jQuery

I’ve found a tutorial on Atlanta Jones. Read it, it’s worth it. Here is an example that works with the Default theme of WordPress and the Category Icons plugin with its Widget.

1. Create an empty file named rollover.js at the root of your theme folder.

2. Copy and paste this javascript code in rollover.js : Continue reading

What is Category Icons ?

I agree with Ryan Caldwell ( :

So the first step in my adventure was to prettify [my pages] a bit. To do this, I downloaded the Category Icons plugin for WordPress. Category Icons allows you to associate a unique image with each of your WordPress categories. By placing a little snippet of code on your category.php theme file, you can then have a big, bold image come up that will make your category pages look better than 90% of the category pages out there.

Or with  JTPratt when he wrote :

It’s a beautiful plugin […] well documented and supported. Everything is configurable from the options menu, you can use it on your index (home) page, post pages, or even your sidebar! You can do icons only, or text and icons, and it comes with a widget for the sidebar.

The cool thing about the plugin is that it gives you ways to do one or multiple category icons, but also a method for putting icons with your categories in the side bar as well ! I’m always very grateful when a good plugin come along !


Sources : JTPRATT’s Blogging Mistakes ( here & here ) & Performancing

What’s new in 1.8.2 ?

  • New option : size of the space before and/or after the icons in the sidebar.
  • French translation is up to date. Other language than english & french needs to be updated. (thanks in advance to the translators)
  • A widget is included to display icons in the sidebar, if you prefer to use a widget :

How to display icons in posts

1. download the plugin and install it.
2. Upload your images to your upload folder. The size of the icons depends on your needs & theme. There’s no recommanded size to use the get_cat_icon() function.
3. Assign icons to your categories in Manage tab.
4. Then, in Template Code, the plugin will show you where to put the get_cat_icon() and put_cat_icons() functions in your theme files :

5. You can also use the widget to display icons in your sidebar.

Note that the ‘small’ icons are displayed by default. If the small icons are not found, the normal icons will be displayed, and vice versa. If you have both type (normal and small) and you want to display ‘normal’ icons, you must use set the parameter ‘small’ to false.

Example :

I want to display ‘normal’ icons in my posts. I’ll put that code in index.php (for example) :


How to assign an icon to a category

First :

In WordPress 2.3.X :

Go to Manage > Category Icons and click on Icons tab.

Manage icons

In WordPress 2.5 :

Go to Settings > Category Icons and click on the Icons tab.

Manage Icons WP 2.5

In WordPress 2.7+ :

Go to Posts > Category Icons and click on the Icons tab.

Icons tab

Icons tab

If you want to delete the icons of a category and its priority, click on the checkbox in front of it, and then click on the button “Delete Icons and Priority”.

In the “Name” column, click on the name of the category to edit or select its icons.

Select Icons WP 2.5

In the dropdown menu icon or Small icon, select an icon among the ones you uploaded in the default folder (wp-content/uploads) or the folder you’ve choosen to upload them. And then click on the button to the right to validate.That’s all.

Icon priority by Oliver Weichhold

You can prioritize the display of icons. From the author (Oliver) :”You can now assign numeric priorities to categories. The priority is used to select a single category icon for a post with multiple categories.Example:

imagine we have a post with two categories:

  • Companies -> ACME Corp. (Icon: ACME.gif, Priority 10)
  • Products -> Milk (Icon: Milk.gif, Priority 20)

If you now pass the new boolean parameter “use_priority=true” to the get_cat_icon() function, it will only render Milk.gif, because Products -> Milk has the highest priority of all categories for the post”.

Function : put_cat_icons()

This function “iconizes” your categories list in the sidebar.

put_cat_icons(list [,get_cat_icon_parameters] [,’icons_only=true’])

  • list : this is a WordPress category list : wp_list_categories(). You MUST ADD echo=0 to the wp_list_categories parameters.
  • get_cat_icon_parameters : (optional) these are the get_cat_icon() parameters, separated by a ‘&’.
    There’s an exception : for put_cat_icons(), the parameter ‘link’ is always set to false.

Example :

write the following code in sidebar.php to have icon next to the category name for which you uploaded an icon. You can give any parameters to wp_list_categories, but you MUST ADD echo=0, in order to process the list :

if (function_exists('put_cat_icons'))

In the parameters, if you put : ‘icons_only=true’, then only the icons will be displayed in the sidebar, instead of the icon AND the category name. Look at the 2nd line :

if (function_exists('put_cat_icons'))

If you use the widget, just put icons_only=true in the parameters :