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.

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?

share|improve this question
    
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 Mar 4 '11 at 15:23
    
Good point. Not sure how I missed that one :-) –  Scott B Mar 4 '11 at 15:26
add comment

2 Answers 2

up vote 5 down vote accepted

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;
}
share|improve this answer
    
+1 - Might be hackish, but if it works this would be my preferred method. –  t31os Mar 4 '11 at 15:46
    
Thanks wyrfel. This is exactly what I was looking for. –  Scott B Mar 4 '11 at 17:24
    
@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 Mar 4 '11 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 Sep 1 '11 at 23:27
add comment

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.

share|improve this answer
    
You're getting +1 from me, too...mostly for thinking around the square. ;-) –  wyrfel Mar 4 '11 at 19:44
add comment

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.