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

Question

Hi,

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 do not know what the widget classes would be (and cannot change them or do not want to change them) I would just target the h2 elements within sidebar with CSS3 using nth:child and offer support for browsers that do not implement it with javascript.

You could amend the widgets (found in your plugin folder) to add specific classes or if you do not want a dynamic sidebar call each widget using the_widget() template tag. The widget template tag takes arguments to allow you to put html before and after the widget title and the widget itself which you can use for css hooks

The codex has been kindly updated at User bono contribution