Override WordPress Widget CSS Classes?

As alluded to by @Michael in the comments, the CSS classes for widgets depend on the sidebar they’re in more than the widget themselves. Those widget-specific CSS classes can be useful, but not when you’re trying to style every widget.

It sounds like you may be able to use a normal element selector that targets anything in your sidebar, though I’m unclear exactly what you need. Assuming your sidebar wrapper had an id of “sidebar” you’d use something like this:

#sidebar li { /* styles */ }

However, this may not work if you don’t have a sidebar wrapper or need something more or less specific. This brings us back to register_sidebar(). Take a look at the Codex’s default $args list:

<?php $args = array(
'name'          => __( 'Sidebar name', 'theme_text_domain' ),
'id'            => 'unique-sidebar-id',
'description'   => '',
'class'         => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget'  => '</li>',
'before_title'  => '<h2 class="widgettitle">',
'after_title'   => '</h2>' ); ?>

The line to focus on is this one:

'before_widget' => '<li id="%1$s" class="widget %2$s">',

Notice two things:

%1$s and %2$s are placeholders for widget-specific CSS classes generated by WordPress. Even if you don’t use this immediately, I like to leave them in for later use.
A sidebar with that argument will also have a generic “widget” class applied to all widgets in it.

It sounds like you’re wanting that “widget” class mentioned in point 2 above. Then you’d use a nicer CSS selector like

.widget { /* styles */ }

If that’s what you need, you’ll need to change the way your theme registers that sidebar and probably use that before_widget setting suggested by the codex. If you’re using a prebuilt theme, that will mean creating a child theme, unregistering the sidebar, and then reregistering it with the new arguments.

Related Posts: