---
title: Add the Order of Widgets Within a Sidebar as a CSS Class to All Widgets
date: 2012-04-19T17:18:43+00:00
modified: 2012-04-19T17:19:28+00:00
permalink: https://kaspars.net/blog/add-widget-order-css-class-sidebar
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
  - Snippet
category:
  - WordPress
---

# Add the Order of Widgets Within a Sidebar as a CSS Class to All Widgets

Here is a simple filter to automatically add a class attribute like `widget-order-1` to all widgets within sidebars:

```
add_action('init', 'add_widget_order_class');

function add_widget_order_class() {
	global $wp_registered_sidebars, $wp_registered_widgets;

	$sidebars = wp_get_sidebars_widgets();
	if (empty($sidebars))
		return;

	foreach ($sidebars as $sidebar_id => $widgets) {
		if (empty($widgets))
			continue;
		foreach ($widgets as $i => $widget_id) {
			$order = $i + 1;
			$wp_registered_widgets[$widget_id]['classname'] .= ' widget-order-' . $order; 
		}
	}
}
```