avtar
Hernando J. Chaves
min. de lectura
WordPress
Cuando creas temas para wordpress es común que en ocasiones tengas que agregar algunas clases personalizadas a diversos elementos del menú, como submenus, etiquetas li o etiquetas a, en este artículo te mostrare algunas formas de poder lograrlo de manera sencilla  y rápida. Para aplicar clases personalizadas a los elementos de los menús en WordPress (como los elementos de submenú .sub-menu, los elementos de lista li y los enlaces a), puedes hacerlo de varias formas, como a través del personalizador de menús de WordPress o añadiendo código personalizado en tu archivo functions.php o en un archivo de estilos CSS.

Opción 1:

Añadir clases personalizadas directamente desde el personalizador de menús
Ve al panel de administración de WordPress.
Ve a Apariencia > Menús.
Selecciona el menú que deseas personalizar.
Si no ves la opción “Clases CSS” al editar cada elemento del menú, despliega las Opciones de pantalla en la parte superior derecha y marca la casilla de Clases CSS.
Ahora, al editar cada elemento del menú, verás un campo para añadir una clase CSS personalizada.
Una vez que agregues las clases personalizadas, podrás dirigirte a tu archivo style.css y añadir los estilos que desees para estas clases.

Opción 2:

Añadir clases personalizadas mediante functions.php
Puedes añadir clases personalizadas a los elementos del menú usando el archivo functions.php de tu tema o tema hijo. Aquí te muestro cómo agregar una clase personalizada a los enlaces (<a>), a los elementos de lista (<li>) y a los submenús (.sub-menu).
1. Clases personalizadas para elementos <li>:
Puedes usar el filtro nav_menu_css_class para añadir clases a los elementos <li> de los menús:

function agregar_clases_personalizadas_a_li($classes, $item, $args) {
    // Añade una clase personalizada a todos los elementos
  • del menú
    $classes[] = ‘mi-clase-li’;

    // Puedes aplicar condicionales para añadir clases a ciertos elementos del menú
    if(in_array(‘menu-item-has-children’, $item->classes)) {
    $classes[] = ‘tiene-submenu’; // Si tiene submenú, añadir una clase específica
    }

    return $classes;
    }
    add_filter(‘nav_menu_css_class’, ‘agregar_clases_personalizadas_a_li’, 10, 3);

2. Clases personalizadas para los enlaces ():
Puedes usar el filtro nav_menu_link_attributes para añadir clases o atributos a los enlaces dentro de los menús:


function agregar_clases_personalizadas_a_a($atts, $item, $args) {
    // Añade una clase personalizada a todos los enlaces  del menú
    $atts['class'] = 'mi-clase-a';
    
    // Si el elemento tiene submenú, puedes agregar más clases personalizadas
    if(in_array('menu-item-has-children', $item->classes)) {
        $atts['class'] .= ' tiene-submenu-link';
    }
    
    return $atts;
}
add_filter('nav_menu_link_attributes', 'agregar_clases_personalizadas_a_a', 10, 3);

3. Clases personalizadas para los submenús (.sub-menu):
Si quieres añadir clases a los submenús, puedes modificar la estructura utilizando un filtro como wp_nav_menu_objects o walker_nav_menu_start_el.

Aquí te dejo un ejemplo básico de cómo hacerlo usando wp_nav_menu_objects:


function agregar_clases_personalizadas_a_submenu($sorted_menu_items, $args) {
    foreach ($sorted_menu_items as $item) {
        // Si el elemento tiene submenú
        if (in_array('menu-item-has-children', $item->classes)) {
            $item->classes[] = 'mi-clase-submenu';
        }
    }
    return $sorted_menu_items;
}
add_filter('wp_nav_menu_objects', 'agregar_clases_personalizadas_a_submenu', 10, 2);

Opción 3:
Usar CSS personalizado en style.css
Después de añadir las clases personalizadas, puedes definir estilos específicos en tu archivo style.css o en el CSS adicional desde el personalizador de WordPress.


/* Estilo para los elementos

Resumen:
Personalizador de WordPress: Puedes añadir clases CSS a los elementos de menú individualmente desde el personalizador de menús.
Funciones PHP: Puedes agregar clases dinámicas a los elementos del menú (li, a, .sub-menu) utilizando filtros como nav_menu_css_class, nav_menu_link_attributes y wp_nav_menu_objects.
CSS personalizado: Después de agregar las clases, es importante definir los estilos que aplicarán a esos elementos desde el archivo style.css.
Cada enfoque te da la flexibilidad para personalizar tu menú de la manera que mejor se ajuste a tus necesidades.