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');
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
.