How to add css classes to widgets using functions.php?

Alright, so I managed to pull it off thanks to @toscho who provided me with this link: Add class to before_widget for all widgets with a dropdown and a counter

I kind of worked up through it.

All I wanted to do was add one class “col-sm-4” from Bootstrap to the search widget.

is_admin() || add_filter( 'dynamic_sidebar_params', 'wpse172754_add_widget_classes' );

/**
 * Add classes for widgets.
 *
 * @param  array $params
 * @return array
 */
function wpse172754_add_widget_classes( $params ) {

if ($params[0]['widget_name'] == 'Search') {
  $params[0] = array_replace($params[0], array('before_widget' => str_replace("widget_search", "widget_search col-sm-4", $params[0]['before_widget'])));
}

  return $params;

}

Allow me to explain what it does.

First, to better understand the code myself, I did a print_r($params) to see what’s in it, and this was the output:

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        How to add css classes to widgets using functions.php? => 
        [class] => 
        [before_widget] => <section class="widget search-2 widget_search">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => search-2
        [widget_name] => Search
    )

    [1] => Array
    (
        [number] => 2
    )
)

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        How to add css classes to widgets using functions.php? => 
        [class] => 
        [before_widget] => <section class="widget custom-social-media-widget-2 widget_custom-social-media-widget col-xs-offset-2 col-xs-6 col-sm-offset-4 col-sm-3 col-lg-offset-5 col-lg-2">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => custom-social-media-widget-2
        [widget_name] => Custom Social Media Widget
    )

    [1] => Array
        (
            [number] => 2
)

To better understand the output, I also went over to the WordPress Code Reference page for that hook and saw what the array actually contains. Next, all I had to do was use the numbers and keys in my favor.

• First, I knew most values would be stored in the first array $params[0], as the second one only included the instance number, so I should use that array.
• Just to make sure the code doesn’t always run unnecessary, I put in a simple if statement to check whether it’s the widget that I want.
• Next, I had to replace the value in the array, so I used array_replace().
• Finally, knowing one of the values I would find in the before_widget value, I used a str_replace to change the value and add the class name that I want.

If there’s a better way to do it, please let me know, or update me in the future on this. Hope this helps.