Style every second widget?

Question

I need to apply a certain style to every second widget in my sidebar, and I'm reluctant to use :nth-child due to cross-browser compatibility issues. Is there a bit of PHP that will allow me to apply a class to every other widget?

Answer 1

Use the dynamic_sidebar_params filter. The following code adds classes to say whether the widget is odd or even, what index it is in the sidebar, and what sidebar it's in.

Note: the str_replace("class=\"", "class=\"$class ", $before_widget); code below depends on your before_widget using double quotes -- it probably should be done with a regular expression to handle single quotes as well. I just haven't ever got around to it.

function my_filter_dynamic_sidebar_params($params){

    static $sidebar_widget_count = array();
    $sidebar_id = $params[0]["id"];
    if (! isset($sidebar_widget_count[$sidebar_id])){
        $sidebar_widget_count[$sidebar_id] = 0;
    }
    $before_widget = $params[0]['before_widget'];
    $class = $sidebar_widget_count[$sidebar_id] % 2 ? 
        "widget-odd" : "widget-even";
    $class .= " widget-index-" . $sidebar_widget_count[$sidebar_id];
    $class .= " widget-in-$sidebar_id";
    $before_widget = str_replace("class=\"", 
        "class=\"$class ", $before_widget);
    $params[0]['before_widget'] = $before_widget;
    $sidebar_widget_count[$sidebar_id]++;
    return $params;
}

add_filter("dynamic_sidebar_params", "my_filter_dynamic_sidebar_params");

Answer 2

This would probably be a great place to make use of the CSS :nth-child pseudo-class, especially :nth-child(odd) and :nth-child(even). I wouldn't worry too much about browser compatibility. If you must, just use jQuery for IE8.

Answer 3

Here's a related discussion on the WordPress.org forum: http://wordpress.org/support/topic/dynamic-widget-classes-for-use-in-css