Adding custom class to every widgets in wordpress, what's your approach?

Question

I'm creating a theme for wordpress and I am having problem implementing image replacement on headers on my widgets.

How do you I add a custom class or id to wrap my widgets?

for example

HTML:

<div id="sidebar">
  <div id="customWidgetId">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

  <div id="anotherCustomWidgetId">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

  <div class="customClass">
     <h2>This Title will be replace by an Image</h2>
     <p>Wordpress 'Text' Widget content here</p>
  </div> 

</div>

CSS:

#anotherCustomWidgetId h2 {
 text-indent: -1000em;
 background: url of my image;
 width: ;
 height: ;
}

I need to have control of the ID and classes to my widgets. so I can create custom css Image replacement for the widgets.

If your in my shoes how would you implement that in wordpress?.

Thanks!

Answer 1

If you're just looking to add a single class to every widget (I've done this for the clearfix fix) then add in another line to register_sidebar, like so...

     register_sidebar(array(
        'id' => 'sidebar1',
        'name' => 'Sidebar (Main)',
        'description' => 'Primary sidebar',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widgettitle">',
        'after_title' => '</h3>',
        'class' => 'clearfix'
    ));

This has added a class of 'clearfix' to all of my widgets.