1

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.

5

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.

  • 1
    This is a brilliant approach! – KalenGi Aug 1 '18 at 18:17
2

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

  • I'm not adding it to through the register sidebar function. I want to add a class to the search widget. I'm using the widgets section in the admin section with the whole drag and drop thing. – yaharga Dec 19 '14 at 18:02
0

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.org/plugins/widget-css-classes/

  • I woudl like to avoid using a plugin, if it's possible. – yaharga Dec 19 '14 at 18:14
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.