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 have a theme with a sidebar and 3 widgets. I want to change the color of one of those widgets. The problem is that all the widgets have the same code:

<div class="box_outer">
  <div class="widget">
    <h3 class="widget_title">Widget title</h3>
    <div class="wid_border"></div>
    <div class="menu-widget-container">
      <!-- widget content -->
    </div>
  </div>
</div>

How can I change the generated code to make it build a unique identifier for each widget, and get something like this:

<div class="box_outer" id="widget1">
  <div class="widget">
    <h3 class="widget_title">Widget title</h3>
    <div class="wid_border"></div>
    <div class="menu-widget-container">
      <!-- widget content -->
    </div>
  </div>
</div>
share|improve this question

1 Answer 1

up vote 2 down vote accepted

If you register your sidebar this way, your all dynamic widgets gets a unique class automatically e.g. - class="widget-container widget_archive"

register_sidebar( array(
    'name' => __( 'Primary Widget Area', 'twentyten' ),
    'id' => 'primary-widget-area',
    'description' => __( 'The primary widget area', 'twentyten' ),
    'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
    'after_widget' => '</li>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

Note -

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

  • " %1$s " - Will print the unique widget id.
  • " %2$s " - will print the unique class for each widget.

Then we can apply custom styling as necessary to that unique class.

Reference - Codex - Register Sidebar

share|improve this answer

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.