1

My sidebar widget code in functions.php looks like this...

if ( function_exists('register_sidebar') )
register_sidebar(array(
    'name' => 'Home Sidebar',
    'id' => 'home-sidebar-widget',
    'before_widget' => '<div class="menu side %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="sidebarTitle">',
    'after_title' => '</h4>',
));

Which creates this markup on the site...

<div class="menu side widget_text">
    <h4>widget 1 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

<div class="menu side widget_text">
    <h4>widget 2 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

Here's what I need (just adding a number to the class collection)...

<div class="menu side s1 widget_text">
    <h4>widget 1 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

<div class="menu side s2 widget_text">
    <h4>widget 2 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

I would like to add a count variable so that each sidebar gets a number that I can then use for css targeting. How?

Improve this question
2
  • Keep in mind that a class name can't start with a number, so maybe something more like <div class="menu side widget_1 widget_text">
    – Dalton Rooney
    Commented Mar 4, 2011 at 15:23
  • Good point. Not sure how I missed that one :-)
    – Scott B
    Commented Mar 4, 2011 at 15:26

2 Answers 2

Reset to default
5

There doesn't seem to be an easy way to do this. However, you can try this rather hackish approach:

add_filter('dynamic_sidebar_params', 'my_sidebar_params_cb');

function my_sidebar_params_cb($params) {
    global $my_widget_counter;
    if (empty($my_widget_counter)) $my_widget_counter = 1;
    else $my_widget_counter++;
    $params[0]['before_widget'] = str_replace('class="', 'class="widget_nr_'.$my_widget_counter.' ', $params[0]['before_widget']);
    return $params;
}
Improve this answer
3
  • +1 - Might be hackish, but if it works this would be my preferred method.
    – t31os
    Commented Mar 4, 2011 at 15:46
  • @Scott B: One more thing...if you have a chance to do this within your own class, i'd strongly recommend that, as you can then store the counter as $this->widget_counter rather than dumping it into the global scope (which is what i don't like about this solution).
    – wyrfel
    Commented Mar 4, 2011 at 19:46
  • Just wanted to add ( this came up in search) that using something like this to hard-code widget styles will break styles if you drag widgets around or add any new widgets.
    – Wyck
    Commented Sep 1, 2011 at 23:27
2

You could target specific elements in CSS like so..(won't work for all browsers of course).

#sidebar div.menu.side:nth-child(1) { /* First */ }
#sidebar div.menu.side:nth-child(2) { /* Second */ }
#sidebar div.menu.side:nth-child(3) { /* Third */ }

..and so on...

Or use some jQuery to add the classes..

jQuery(document).ready( function($) {
    var wi = 1;
    $('#sidebar div.menu.side').each( function() {
        $(this).addClass( 'widget-s' + wi );
        wi = wi + 1;
    });
});

wyrfel's approach looks like it could work for you though, i'd suggest that over the two above.

Improve this answer
1
  • You're getting +1 from me, too...mostly for thinking around the square. ;-)
    – wyrfel
    Commented Mar 4, 2011 at 19:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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