Cómo agregar la primera y la última clase a los elementos del menú de navegación de WordPress

Recientemente, mientras trabajábamos en un proyecto de diseño personalizado, encontramos la necesidad de agregar un estilo personalizado a los elementos del menú de navegación de WordPress. Este diseño en particular requería un estilo diferente para el primer elemento del menú y el último elemento del menú. Ahora podríamos iniciar sesión fácilmente en el administrador de WordPress y agregar una clase CSS personalizada al primer y último elemento del menú. Pero como se lo estamos suministrando a un cliente, es muy probable que en el futuro pueda reorganizar el orden de los menús. Usar la forma del panel de administración para agregar clases no fue el método más eficiente. Entonces decidimos hacerlo usando filtros. En este artículo, le mostraremos cómo diseñar su primer y último elemento de menú de WordPress de manera diferente agregando una clase CSS .first y .last.

Todo lo que tienes que hacer es abrir el archivo functions.php de tu tema. Luego pega el siguiente código:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

Otra forma de diseñar el primer y último elemento del menú de manera diferente sería usar selectores CSS que funcionan en la mayoría de los navegadores modernos.

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Nota: si tiene muchos usuarios en navegadores antiguos (Internet Explorer), probablemente desee evitar la siguiente técnica.

Esperamos que este artículo te haya ayudado. Hemos creado una hoja de trucos en las clases CSS predeterminadas generadas por WordPress que también pueden ser útiles para diseñar elementos del menú.