Support » Fixing WordPress » How To: First and Last CSS Classes for Sidebar Widgets

  • Thought this might be useful to somebody–it’s a filter function that automatically adds “first and last” css classes to dynamic sidebar widgets. It also numbers each widget (“widget-1”, “widget-2”, etc.).

    It’s a slight improvement on Greenshady’s code in this post (it keeps a separate counter for each sidebar, and knows the total number of widgets in the current sidebar).

    Suggestions for improvement are welcome. It could easily be modified to add even/odd classes.

     * Add "first" and "last" CSS classes to dynamic sidebar widgets. Also adds numeric index class for each widget (widget-1, widget-2, etc.)
    function widget_first_last_classes($params) {
    	global $my_widget_num; // Global a counter array
    	$this_id = $params[0]['id']; // Get the id for the current sidebar we're processing
    	$arr_registered_widgets = wp_get_sidebars_widgets(); // Get an array of ALL registered widgets	
    	if(!$my_widget_num) {// If the counter array doesn't exist, create it
    		$my_widget_num = array();
    	if(!isset($arr_registered_widgets[$this_id]) || !is_array($arr_registered_widgets[$this_id])) { // Check if the current sidebar has no widgets
    		return $params; // No widgets in this sidebar... bail early.
    	if(isset($my_widget_num[$this_id])) { // See if the counter array has an entry for this sidebar
    		$my_widget_num[$this_id] ++;
    	} else { // If not, create it starting with 1
    		$my_widget_num[$this_id] = 1;
    	$class = 'class="widget-' . $my_widget_num[$this_id] . ' '; // Add a widget number class for additional styling options
    	if($my_widget_num[$this_id] == 1) { // If this is the first widget
    		$class .= 'widget-first ';
    	} elseif($my_widget_num[$this_id] == count($arr_registered_widgets[$this_id])) { // If this is the last widget
    		$class .= 'widget-last ';
    	$params[0]['before_widget'] = str_replace('class="', $class, $params[0]['before_widget']); // Insert our new classes into "before widget"
    	return $params;
Viewing 8 replies - 1 through 8 (of 8 total)
  • MathSmath, thank you for this! Very useful.

    MathSmath thanks for sharing this. I did make one minor change. The way its written with the str_replace if you have more than 1 element with a class in it, the style change will be applied to all of them. Ex:

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

    It would apply to both the li and div.

    I only wanted to apply it to the first occurrence of a class there, so I changed it to a regex:

    //$params[0]['before_widget'] = str_replace('class="', $class, $params[0]['before_widget']); // Insert our new classes into "before widget"
    $params[0]['before_widget'] = preg_replace('/class=\"/', "$class", $params[0]['before_widget'], 1);
    Thread Starter MathSmath


    Good call, durin!

    Thread Starter MathSmath


    Also, as @rarst pointed out on the WordPress Stack Exchange board, the section that checks for an empty sidebar isn’t necessary…the filter only runs pre-widget output.

    Excellent feature, thanks for sharing

    Thanks a lot for posting. Excellent post. I am thankful for this.



    Thank-you again. Super useful and exactly what I needed.

    MathSmath and durin, thank you so much. this is perfect.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How To: First and Last CSS Classes for Sidebar Widgets’ is closed to new replies.