# Custom CSS Classes for Widgets

> Adds a "CSS classes" field to every classic widget, so you can style individual widgets from your theme or a CSS snippet.

- Type: PHP
- Runs: Run everywhere
- Category: [Widgets](https://wpide.com/library/category/widgets/)
- Tags: widgets, css, classes
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/widget-css-class-field/

## Code

```php
add_action( 'in_widget_form', function ( $widget, $return, $instance ) {
    $value = isset( $instance['wpide_css_class'] ) ? $instance['wpide_css_class'] : '';

    echo '<p><label for="' . esc_attr( $widget->get_field_id( 'wpide_css_class' ) ) . '">CSS classes:</label>';
    echo '<input type="text" class="widefat" id="' . esc_attr( $widget->get_field_id( 'wpide_css_class' ) ) . '" name="' . esc_attr( $widget->get_field_name( 'wpide_css_class' ) ) . '" value="' . esc_attr( $value ) . '" /></p>';
}, 10, 3 );

add_filter( 'widget_update_callback', function ( $instance, $new_instance ) {
    $classes = isset( $new_instance['wpide_css_class'] ) ? explode( ' ', (string) $new_instance['wpide_css_class'] ) : array();

    $instance['wpide_css_class'] = implode( ' ', array_filter( array_map( 'sanitize_html_class', $classes ) ) );

    return $instance;
}, 10, 2 );

add_filter( 'dynamic_sidebar_params', function ( $params ) {
    global $wp_registered_widgets;

    $widget_id = isset( $params[0]['widget_id'] ) ? $params[0]['widget_id'] : '';
    $callback  = isset( $wp_registered_widgets[ $widget_id ]['callback'][0] ) ? $wp_registered_widgets[ $widget_id ]['callback'][0] : null;

    if ( ! $callback instanceof WP_Widget || ! isset( $params[1]['number'] ) ) {
        return $params;
    }

    $settings = $callback->get_settings();
    $classes  = isset( $settings[ $params[1]['number'] ]['wpide_css_class'] ) ? $settings[ $params[1]['number'] ]['wpide_css_class'] : '';

    if ( '' !== $classes ) {
        $params[0]['before_widget'] = preg_replace( '/class="/', 'class="' . esc_attr( $classes ) . ' ', $params[0]['before_widget'], 1 );
    }

    return $params;
} );
```

## Notes

Separate several classes with spaces. Works with classic widgets and the Legacy Widget block.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Custom CSS Classes for Widgets" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/