Extra styling for special widgets is much easier when we have the option to add custom classes for these widgets. There is a ready to use a code for it 🙂

Just add it to your functions.php file in the root of your theme.

if ( ! class_exists( 'wpi_Widget_Fields' ) ) {
    class wpi_Widget_Fields {

        /**
         * Display widget size field
         *
         * @param  object $widget
         */
        public static function displayField( $widget, $return, $instance ) {

            if ( ! isset( $instance['wpi_classes'] ) ) {
                $instance['wpi_classes'] = null;
            }

            $row = "<div>";
            $row .= "<p><label for='widget-{$widget->id_base}-{$widget->number}-wpi_classes'>" . apply_filters( 'widget_css_classes', esc_html__( 'Custom Classes', 'wpi-lang' ) ) . ":</label></p>";
            $row .= "<p><input type='text' name='widget-{$widget->id_base}[{$widget->number}][wpi_classes]' id='widget-{$widget->id_base}-{$widget->number}-wpi_classes' value='{$instance['wpi_classes']}' class='widefat' /></p>";
            $row .= "</div>";

            echo $row;

            return $instance;
        }

        /**
         * Widget update settings
         */
        public static function widgetUpdate( $instance, $new_instance ) {
            $instance['wpi_classes']        = $new_instance['wpi_classes'];
            return $instance;
        }

        /**
         * Update widgets params
         *
         * @param  array $params
         *
         * @return array
         */
        public static function sidebarParams( $params ) {
            global $wp_registered_widgets;
            $widget_id    = $params[0]['widget_id'];
            $widget_obj   = $wp_registered_widgets[ $widget_id ];
            $widget_opt   = get_option( $widget_obj['callback'][0]->option_name );
            $widget_num   = $widget_obj['params'][0]['number'];
            $widget_class = array();

            if ( ! empty( $widget_opt[ $widget_num ]['wpi_classes'] ) ) {
                $widget_custom_class = $widget_opt[ $widget_num ]['wpi_classes'];
                $widget_custom_class = preg_replace( '/\s\s+/', ' ', $widget_custom_class );
                $widget_custom_class = explode( ' ', $widget_custom_class );
                $widget_class        = array_merge( $widget_class, $widget_custom_class );
            }

            $widget_class = array_map( 'sanitize_html_class', $widget_class );
            $widget_class = implode( ' ', $widget_class ); //array to string

            $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_class} ", $params[0]['before_widget'], 1 );

            return $params;
        }

    }
}

if ( is_admin() ) {
    add_filter( 'in_widget_form', array( 'wpi_Widget_Fields', 'displayField' ), 10, 3 );
    add_filter( 'widget_update_callback', array( 'wpi_Widget_Fields', 'widgetUpdate' ), 10, 2 );
} else {
    add_filter( 'dynamic_sidebar_params', array( 'wpi_Widget_Fields', 'sidebarParams' ) );
}

Now you will have a special field at the bottom of every widget where you can add custom classes.

How to add custom classes for widgets

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *