Add .first & .last CSS Class Automatically To WordPress Widgets

Previously we showed you how to Add .first & .last CSS class to WordPress Navigation Menus to help with styling attributes when designing a WordPress theme. Today I though it would be beneficial to follow up that tutorial with one that shows you how to automatically add .first & .last CSS class’s to all WordPress widgets displayed anywhere on your site by adding a simple filter to the wordpress

Bonus Free Trial – See how to get all of your wordpress work done fast and worry free

dynamic_sidebar_params function.

Step 1: Adding The Widgets Modification WordPress Filter

Firstly you will want to open your current themes functions.php file then copy the codeblack below and paste it into your functions.php file at the bottom, close and save your functions.php file.

//----------------------- [ Widget .first & .last CSS 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 .= 'first-widget ';
	} elseif($my_widget_num[$this_id] == count($arr_registered_widgets[$this_id])) { // If this is the last widget
		$class .= 'last-widget ';

	$params[0]['before_widget'] = str_replace('class="', $class, $params[0]['before_widget']); // Insert our new classes into "before widget"

	return $params;


The code above will now automatically add the CSS class .first-widget to your widget areas first widget and also add the CSS class .last-widget to your widget areas last widget.

You can now easily style and use those css properties in your WordPress themes stylesheet, this is a technique I tend to use in all my themes for easy styling just in case it’s required during development.

As always any opinions or improvments please leave a comment.

Bonus Free Trial – See how to get all of your wordpress work done fast and worry free
1 reply
  1. aliogul
    aliogul says:

    everything is okey, I have done these kind of thing a hundred time but the problem is that, when you have a custom widget (the widget that you’ve created for ex twitter badge ) then it will not for that widget.
    basically, if the last widget is a custom widget , it wont work..  
    Maybe I miss something that I must add when I create a custom widget.


Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>