StackTips

How to use custom CSS in Redux framework option panel

stacktips avtar

Written by

Editorial,  2 min read,  2.98K views, updated on Sept. 17, 2023

Redux WordPress framework is awesome in its way. It powers developer with an awesome options panel, that you can use for developing themes or plugins without having to worry about complexities of WordPress settings API.

I absolutely love the way the option panel is organized into tabs and sections. However, if you feel you need more customization, you can include your own CSS and customize the option panel look that suits you.

Add the following code snippet to your redux framework options-init.php file to add your custom css to Redux framework options panel.

// This is your option name where all the Redux data is stored.
$opt_name = 'my_theme_options';
//...

// Append custom css to redux framework
if (!function_exists('my_theme_redux_custom_css')):
    function my_theme_redux_custom_css()
    {
        wp_register_style('my-redux-custom-css',
            CSS_URI . '/admin/theme-options-custom.css', array('redux-admin-css'),
            THEME_VERSION, 'all');
        wp_enqueue_style('my-redux-custom-css');
    }
endif;
add_action('redux/page/' . $opt_name . '/enqueue', 'my_theme_redux_custom_css');