I'm attempting to style lists in the sidebar (you know, <ul><li>) and I'm curious how to also make widgets adopt this class. Each widget seems to have its own class assigned to it by WordPress' defaults - is there a way to override this?

  • What is the problem of using Wordpress default classes and style those? If it's just a matter of styling I don't see the obstacle. Commented Apr 29, 2013 at 15:02
  • you can add classes when you use register_sidebar() in functions.php
    – Michael
    Commented Apr 29, 2013 at 15:05
  • What did you try? Please include your current register_sidebar() code in your question. Commented Apr 29, 2013 at 15:25

1 Answer 1


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. %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.
  2. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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