Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
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. –  Sunyatasattva Apr 29 '13 at 15:02
    
you can add classes when you use register_sidebar() in functions.php –  Michael Apr 29 '13 at 15:05
    
What did you try? Please include your current register_sidebar() code in your question. –  Chip Bennett Apr 29 '13 at 15:25
add comment

1 Answer

up vote 4 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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