How to use category_css_class filter in WordPress

category_css_class filter

To use the `category_css_class` filter, first you have to register it using `add_filter`. You can write this code into `functions.php` of your activated theme or in a custom WordPress Plugin.

We at WePlugins always prefer to create a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the below live example, we have defined a function `weplugins_modify_category_css_class_defaults` which takes 4 parameters and we registered using `add_filter`. The first parameter `category_css_class` is the name of the hook, the second parameter `weplugins_modify_category_css_class_defaults` is the name of the function which needs to be called, the third parameter is the priority of calling the hook if the same hook is used multiple times, and the last parameter is the number of arguments (if any) to be passed in the registered function.

Sometimes, you have to remove a registered hook, so you can use `remove_filter` to remove the `category_css_class` filter.

Parameters

Below are the 4 parameters required to use this hook.

• $css_classes : (string[]) An array of CSS classes to be applied to each list item.
• $category : (WP_Term) Category data object.
• $depth : (int) Depth of page, used for padding.
• $args : (array) An array of wp_list_categories() arguments.

Live Example

Example 1: Basic Usage

Below is an example of how you can use this hook to modify category CSS classes.

function weplugins_modify_category_css_class_defaults($css_classes, $category, $depth, $args) { 
    // Update the $css_classes variable according to your website requirements and return this variable. You can modify the $css_classes variable conditionally too if you want.
    return $css_classes; 
}
// add the filter
add_filter( "category_css_class", "weplugins_modify_category_css_class_defaults", 10, 4 );

Example 2: Conditional Modification

In this example, we modify the CSS classes conditionally based on the category ID.

function weplugins_modify_category_css_class_defaults($css_classes, $category, $depth, $args) { 
    if ($category->term_id == 5) {
        $css_classes[] = 'special-category';
    }
    return $css_classes; 
}
// add the filter
add_filter( "category_css_class", "weplugins_modify_category_css_class_defaults", 10, 4 );

Example 3: Removing the Filter

To remove a hook callback, use the example below.

remove_filter( "category_css_class", "weplugins_modify_category_css_class_defaults", 10, 4 );

Please make sure to provide the same callback function name, priority, and number of arguments while removing the hook callback.

Contact Us

If you need customization or are having any trouble using this hook, please contact us, and we’d be happy to assist you.