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.

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.

• widgets
• css

• 2 Have you seen Add class to before_widget for all widgets with a dropdown and a counter? – fuxia ♦ Commented Dec 19, 2014 at 17:54
• Actually this helps. I think it does more than I need, though. I'll try to understand it. Thanks! – yaserso Commented Dec 19, 2014 at 18:01

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
        [description] => 
        [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
        [description] => 
        [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.

Hey you can add class in before_widget something like this

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Your Widget Name',
       'description' => 'Description of your widget',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

i think it help you

This add a class field on every widget :

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
        $instance['classes'] = null;   
        $row .= "Class:\t<input type='text' name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat' value='{$instance['classes']}'/>\n";
        $row .= "</p>\n";    
        echo $row;
    return $instance;
}
add_filter('widget_form_callback', 'kc_widget_form_extend', 10, 2);function kc_widget_update( $instance, $new_instance ) {
    $instance['classes'] = $new_instance['classes'];
return $instance;
}
add_filter( 'widget_update_callback', 'kc_widget_update', 10, 2 );
function kc_dynamic_sidebar_params( $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'];    
    if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
        $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'kc_dynamic_sidebar_params' );

Source

There is a plugin with which you can add more CSS classes and ID's to a widget. It's called Widget CSS Classes. Pretty handy, take a look: https://wordpress/plugins/widget-css-classes/