Adding Wrapper Element or Class to Sidebar Widget Content

I was looking for a way to add a CSS class to WordPress Widget Content area. For textWidget, I see a particular class class="textwidget" is available for every text widget but content area class and element is not same for other widget type.

I got this for adding wrapper around widget content but it only work for text Widget type:

function my_widget_content_wrap($content) {
    $content = '<div class="widget-content">'.$content.'</div>';
    return $content;
}
add_filter('widget_text', 'my_widget_content_wrap');

wordpress logo

So, here is a funny way to add style to all sidebar widget content area:

.widget :last-child {
    color:red ;
    font-size: 24px ;
}

The above looks working but it does not work correctly. It is cascading from somewhere and font size is coming smaller than expected.

This selector is working but I think this is bad for CSS performance because of *.

.sideheader + * {
    .smaller;
}

.sideheader is a class used in my every widget heading. Widget heading can be controlled in functions.php -> Search for "register_sidebar" and then 'before_title' => '<h4 class="sideheader">'.

Best solution can be this provided title is used every time. Or else you got a broken HTML

In register_sidebar() in functions.php,


  'before_widget' => '<section id="%1$s" class="widget %2$s sidesec" >',
  'after_widget' => '</div></section>',
  'before_title' => '<h4 class="sideheader">',
  'after_title' => '</h4><div class="test">'

Point of interest is this extra code: <div class="test"> in after_title and </div> in after_widget.