How to use page_css_class filter in WordPress

page_css_class filter

To use page_css_class filter, you first need to register it using add_filter. You can include this code in the functions.php of your activated theme or in a custom WordPress Plugin.

At WePlugins, we always prefer creating a custom WordPress Plugin while using hooks so nothing breaks when you update your WordPress Theme in the future.

In the live examples below, we have defined a function weplugins_modify_page_css_class_defaults which takes 5 parameters and we registered it using add_filter. The first parameter page_css_class is the name of the hook, the second parameter weplugins_modify_page_css_class_defaults is the name of the function that 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 may need to remove a registered hook. You can use remove_filter to remove the page_css_class filter.

Parameters

Below are the 5 parameters required to use this hook:

• $css_class: (string[]) An array of CSS classes to be applied to each list item.
• $page: (WP_Post) Page data object.
• $depth: (int) Depth of page, used for padding.
• $args: (array) An array of arguments.
• $current_page_id: (int) ID of the current page.

Live Example 1: Basic Usage

Below is an example of how you can use this hook.

    function weplugins_modify_page_css_class_defaults($css_class, $page, $depth, $args, $current_page_id) { 
        // Update the $css_class variable according to your website requirements and return this variable.
        // You can modify the $css_class variable conditionally too if you want.
        return $css_class; 
    }
    // add the filter
    add_filter("page_css_class", "weplugins_modify_page_css_class_defaults", 10, 5);
    

Live Example 2: Conditional CSS Class Modification

This example shows how to modify the CSS classes conditionally based on the page ID.

    function weplugins_modify_page_css_class_conditional($css_class, $page, $depth, $args, $current_page_id) {
        if ($current_page_id == $page->ID) {
            $css_class[] = 'current-page';
        }
        return $css_class;
    }
    // add the filter
    add_filter("page_css_class", "weplugins_modify_page_css_class_conditional", 10, 5);
    

Live Example 3: Removing the Hook

To remove a hook callback, use the example below.

    // remove the filter
    remove_filter("page_css_class", "weplugins_modify_page_css_class_defaults", 10, 5);
    

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 any customization, please contact us.