Actualización: a partir de WordPress 3.7 (octubre de 2013), las clases de CSS tienen ha sido agregado para indicar elementos y páginas del menú secundario en los menús temáticos, sin necesidad de usar un andador personalizado, ya que se cuida en el núcleo de WordPress.
Las clases CSS se denominan menu-item-has-children
y page_item_has_children
.
Para obtener una solución completa para cualquier persona que tenga prisa (crédito por la respuesta anterior de Jan Fabry), consulte la implementación completa a continuación.
Muestra la navegación en la plantilla de tu tema:
wp_nav_menu( array(
'theme_location' => 'navigation-primary',
'container' => false,
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'walker' => new Selective_Walker(),
'depth' => 2
)
);
Luego, incluye lo siguiente en el functions.php
de tu tema:
class Selective_Walker extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = !empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $item, $depth, $args ) {
if ( $args->has_children ) {
$item->classes[] = 'has_children';
}
parent::start_el(&$output, $item, $depth, $args);
}
}
El resultado HTML resultante será similar al siguiente:
<ul>
<li><a href="#">Home</a></li>
<li class="has_children"><a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">Our Mission</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li class="has_children"><a href="#">Products</a>
<ul class="sub-menu">
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
Para obtener más información sobre el uso de la clase walker de WordPress, consulte Descripción de la clase Walker .
¡Disfruta!