Cómo agregar widgets de estilo según su posición en un área de widgets

¿Estás buscando una forma de crear widgets dinámicos en WordPress? Si bien probablemente haya un plugin para esto, hemos creado un fragmento de código rápido que puedes usar para agregar estilos a los widgets según su posición en un área de widgets en WordPress.

Instrucciones:

Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:

function widget_position_style_dynamic_sidebar_params( $params ) {
	if( is_admin() )
		return $params;

	$widgets = wp_get_sidebars_widgets();
	$area = $params[0]['id'];
	$order = array_search( $params[0]['widget_id'], $widgets[$area] ) + 1;
	$params[0]['before_widget'] = '<div class="widget-'. ordinal( $order ) .'">' . $params[0]['before_widget'];
	$params[0]['after_widget'] .= '</div>';
	return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_position_style_dynamic_sidebar_params' );

function ordinal( $num ) {
	// Special case "teenth"
	if ( ($num / 10) % 10 != 1 ) {
		// Handle 1st, 2nd, 3rd
		switch( $num % 10 ) {
			case 1: return $num . 'st';
			case 2: return $num . 'nd';
			case 3: return $num . 'rd';
		}
	}
	// Everything else is "nth"
	return $num . 'th';
}

Este código agregará un div contenedor alrededor de tus widgets y les aplicará los nombres de clase 'widget-1st', 'widget-2nd'. Ahora, puedes apuntar a ese widget en tu CSS: #mysidebar .widget-1st { background: red }.

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Los 10 mejores plugins de WordPress para desarrolladores web y cómo guardar datos parciales de formularios en WordPress.