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

by

I need to add a class to the WordPress search widget. How would I go about doing so? I’m calling it from the admin side, as in dragging and dropping it into the sidebar at the widgets page of the admin section. I’m not calling it using get_search_form. I want to do so by using the functions.php file, not jQuery or adding css properties.

4 Answers
4

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.

Leave a Comment