Add div class to only one widget

Question

I want to add more classes in the div tag of my search widget. My search is located in the sidebar together with other widgets.

My code:

function NT_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Sidebar', 'side' ),
    'id'            => 'sidebar',
    'description'   => __( 'Rechte Spalte', 'rechts' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<span class="none">',
    'after_title'   => '</span>',
) );

}
add_action( 'widgets_init', 'NT_widgets_init' );

So each widget gets an id and a class. How can I add more classes to only ONE widget, not the rest.

Answer 1

You have two possible solutions.

1. The widget_display_callback filter hook

This filter hook parameters allows you to target easily the widget instance and override it's arguments.

A possible approach would be: Inside the filter callback, modify the arguments for that instance, display it and then return false to prevent it from being displayed again the normal way by WordPress. See this code in wp-includes/class-wp-widget.php.

2. Register a new widget that extends the search widget

You can extend the search widget --defined in wp-includes/widgets/class-wp-widget-search.php and override the widget() method to add the class you want, something like this (code should be added in some place seen by WordPress, like a custom plugin or in your theme functions.php file):

/**
 * Custom widget search
 *
 * Extends the default search widget and adds a class to classes in `before_title`
 *
 * @author  Nabil Kadimi
 * @link    http://wordpress.stackexchange.com/a/258292/17187
 */
class WP_Widget_Search_Custom extends WP_Widget_Search {

    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_search widget_search_custom',
            'description' => __( 'A Custom search form for your site.' ),
            'customize_selective_refresh' => true,
        );
        WP_Widget::__construct( 'search_custom', _x( 'Custom Search', 'Custom Search widget' ), $widget_ops );
    }

    public function widget( $args, $instance ) {

        $custom_class = 'wpse-258279';
        $args['before_widget'] = str_replace('class="', "class=\"$custom_class", $args['before_widget']);

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        // Use current theme search form if it exists
        get_search_form();
        echo $args['after_widget'];
    }
}

/**
 * Register the custom search widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'WP_Widget_Search_Custom' );
} );

Answer 2

Option-1: Using CSS class already provided:

Every widget already provides unique id and class to use in CSS rules. So for most styling needs, it's better to use those to generate specific CSS rule that'll only work for that widget (e.g. Search). For example, the default Search widget will have the CSS class widget_search. You may use it to style the search widget differently from other widgets. Like:

.widget {
    background-color: wheat;
}
.widget.widget_search {
    background-color: gold;
}

Option-2: Using dynamic_sidebar_params filter:

Since you are registering the widgets with register_sidebar() function, most likely you've used it with dynamic_sidebar() function in the templates. In that case, you may use the dynamic_sidebar_params filter hook to insert extra CSS classes only to a specific widget.

Use the following CODE in your theme's functions.php file (additional instructions are there in the CODE):

add_filter( 'dynamic_sidebar_params', 'wpse258279_filter_widget' );
function wpse258279_filter_widget( $params ) {
    // avoiding admin panel
    if( ! is_admin() ) {
        if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['widget_name'] === 'Search' ) {
            // Insert your custom CSS class (one or more) in the following array
            $classes = array( 'custom-css-class-for-search' );

            // The following three lines will add $classes
            // (along with the existing CSS classes) using regular expression
            // don't touch it if you don't know RegEx
            $pattern = '/class\s*=\s*(["\'])(?:\s*((?!\1).*?)\s*)?\1/i';
            $replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1';
            $params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 );
        }
    }
    return $params;
}

With the above CODE, you may add one or more CSS classes in this line: $classes = array( 'custom-css-class-for-search' );. So if you want to add two CSS classes for the search widget, it'll be like:

$classes = array( 'custom-css-class-for-search', 'another-class' );

Option-3: Custom Widget:

If you need more control than the above methods can handle, then you may implement custom Widget for Search like shown in this answer.

However, it may be difficult to maintain custom widgets if you want the same behaviour for multiple widgets. Because then you'll have to implement that widget too (only for extra CSS class)! If that's not an issue for you, then you may follow that path, as with a custom Widget, you'll have far better control over the markups and functionality.