Cómo utilizar correctamente register_nav_menus() y wp_nav_menu() en WordPress

Para poder utilizar varios menús en nuestro WordPress desde el apartado de apariencia del gestor tendremos que seguir unos pasos previamente.

Lo primero que tenemos que hacer es registrar los menús (tantos como deseemos) para posteriormente poder darles uso.

Para ello tenemos que editar el fichero functions.php de nuestro template de WordPress.

wp-content/themes/<template>/functions.php

1	wp-content/themes/<template>/functions.php

Es en ese fichero donde vamos a utilizar la función register_nav_menus(),que nos permitirá registrarlos para su posterior uso.

function artegraficoSetup() {
    
    // Registramos los menús (tantos como los que necesitemos utilizar en nuestro theme).
    // Esto nos permitirá usarlos desde el gestor de WP.
    // Podemos registrarlos de uno en uno, pero no va a ser en este caso.
    /*register_nav_menu( 'primary', 'TopMenu' );
    register_nav_menu( 'footer', 'FooterMenu' );    
    register_nav_menu( 'sidebar', 'SidebarMenu' );    */
    
    // register_nav_menus()
    // Vamos a registrar tres menús usando la sintaxis abreviada para definir arrays PHP 5.4> 
    register_nav_menus([
        'first' => 'TopMenu',
        'second' => 'FooterMenu',
        'third' => 'SidebarMenu' 
    ]);     
}

/*
 * Hook -> after_setup_theme 
 * Usaremos este hook para inicializar las opciones y configuraciones del theme
 * Init en cambio es mejor para inicializar plugins.
 */

add_action('after_setup_theme', 'artegraficoSetup');

function artegraficoSetup() {

// Registramos los menús (tantos como los que necesitemos utilizar en nuestro theme).

// Esto nos permitirá usarlos desde el gestor de WP.

// Podemos registrarlos de uno en uno, pero no va a ser en este caso.

/*register_nav_menu( 'primary', 'TopMenu' );

register_nav_menu( 'footer', 'FooterMenu' );

register_nav_menu( 'sidebar', 'SidebarMenu' ); */

// register_nav_menus()

// Vamos a registrar tres menús usando la sintaxis abreviada para definir arrays PHP 5.4>

register_nav_menus([

'first' => 'TopMenu',

'second' => 'FooterMenu',

'third' => 'SidebarMenu'

]);

}

* Hook -> after_setup_theme

* Usaremos este hook para inicializar las opciones y configuraciones del theme

* Init en cambio es mejor para inicializar plugins.

add_action('after_setup_theme', 'artegraficoSetup');

Una vez registrados los menús, desde nuestro gestor de WordPress, nos ubicamos en Apariencia -> Menús -> Gestionar Ubicaciones y ahí los tendremos que ver.

En como crear paginas y asignarlos a los menús que acabamos de crear es un proceso trivial.

El último paso es hacer cualquiera de esos menús visible en nuestro Theme.

En este caso voy a incluir un nuevo menú a la cabecera de página de mi template. Para ello edito el fichero header.php e insertaré unos de los menús que he creado (en este caso el que identifiqué como first) y para ello voy a utilizar la función wp_nav_menu().

$conf = [
    'menu' =>  '', 
    'menu_id' =>  'menu-content', // <ul id="navMenu">
    'menu_class' => '', // <ul class="navMenu">
    'container' => 'nav', // <nav></nav>
    'container_class' => 'menu', // <nav id="navMenu">
    'container_id' => '',    // <nav class="navMenu">    
    'theme_location' =>  'first', // este sera el nombre del menu que le tengamos asignado en functions.php usando register_nav_menu()
    'echo' => true,
    'fallback_cb' => 'wp_page_menu', // en caso de que el menu no exista cargar wp_page_menu
    'before' => '', // texto antes del texto del enlace.
    'after' => '', // texto despues del texto del enlace.
    'link_before' => '<span>', // <a href=""><span> ....
    'link_after' => '</span>', // </span></a>
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'item_spacing' => 'preserve', // preserve / discard
    'depth' => 2, // numero de niveles que serán mostrados
    'walker' => '' 
];
        
wp_nav_menu($conf); ?>

$conf = [

'menu' => '',

'menu_id' => 'menu-content', // <ul id="navMenu">

'menu_class' => '', // <ul class="navMenu">

'container' => 'nav', // <nav></nav>

'container_class' => 'menu', // <nav id="navMenu">

'container_id' => '', // <nav class="navMenu">

'theme_location' => 'first', // este sera el nombre del menu que le tengamos asignado en functions.php usando register_nav_menu()

'echo' => true,

'fallback_cb' => 'wp_page_menu', // en caso de que el menu no exista cargar wp_page_menu

'before' => '', // texto antes del texto del enlace.

'after' => '', // texto despues del texto del enlace.

'link_before' => '<span>', // <a href=""><span> ....

'link_after' => '</span>', // </span></a>

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',

'item_spacing' => 'preserve', // preserve / discard

'depth' => 2, // numero de niveles que serán mostrados

'walker' => ''

];

wp_nav_menu($conf); ?>

Muestro con un comentario todas las opciones que podemos utilizar para personalizarlas y que uso tendría cada una de ellas para que se entienda mejor.

Más información: wp_nav_menus() y register_nav_menus().