0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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