Ahora que sabemos cómo crear un tema básico de WordPress desde cero, vamos a ver cómo crear un menú de navegación personalizado para nuestro tema. Este menú debe tener la capacidad de ser controlado desde el Dashboard de WordPress. En otras palabras, debería ser capaz de entrar en el Dashboard y añadir o eliminar enlaces a las páginas, entradas o categorías que desee. Al final de este tutorial, eso es exactamente lo que tendremos. Vamos a profundizar y ver cómo lograr este objetivo.
Abrir header.php
Sigue adelante y abre el archivo header.php del tema en el que hemos estado trabajando. Nuestro objetivo será añadir un menú que viva por encima del contenido principal del sitio, pero por debajo del nombre del sitio y del área del eslogan. Para ello, podemos añadir el siguiente código:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Nota que hacemos uso de una función especial que nos proporciona WordPress de wp_nav_menu(). Esta función se encarga de todo el trabajo por usted en la construcción de un menú personalizado. No tienes que escribir manualmente todo el html, así que esto es bastante útil. Ahora no tenemos mucho en el camino de las páginas todavía, pero si visitamos nuestro sitio de prueba, la función ya es la salida de un enlace a la página de muestra que existe en nuestra instalación.
Pasando argumentos a la función wp_nav_menu()
Como la mayoría de las funciones en WordPress, puede pasar argumentos opcionales a la función wp_nav_menu(). Aquí vamos a configurar un array y configurar sólo una opción. Usamos un array por si queremos pasar múltiples opciones en el futuro. Así es como podríamos añadir ese trozo de código.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Esta opción nos da una forma de nombrar ciertos menús en nuestro tema. Es posible que queramos tener más de un menú, y este es el método por el cual se puede diferenciar entre múltiples menús.
Registrar la ubicación del menú en functions.php
Para poder hacer uso del menú que acabamos de crear en nuestro archivo header.php, desde el panel de administración de WordPress, debemos registrar la ubicación del menú en el archivo functions.php del tema. Entonces, ¿cómo podemos registrar nuestro nuevo menú con WordPress? Podemos hacerlo con la función register_nav_menus() integrada en WordPress. Registremos nuestro menú así.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Configurar nuestro menú personalizado en el Dashboard de WordPress
Nuestro nuevo menú debería estar ahora registrado en el núcleo de WordPress. WordPress es ahora consciente de nuestro menú, y su ubicación en el tema. Ahora podemos ir al panel de control, crear un nuevo menú y gestionar su ubicación. Específicamente, queremos que aparezca donde hicimos uso de la función wp_nav_menu(). Vamos a visitar Apariencia->Menús y a continuación hacemos clic en ‘crear un nuevo menú’.
Podemos nombrar este menú como queramos. Vamos a elegir Menú principal para que sea más fácil, y luego haga clic en ‘Crear menú’.
En este siguiente paso, vamos a enlazar a todas nuestras Categorías. Así que podemos elegir Categorías, Seleccionar todo, actualizar la ubicación de visualización a ‘Menú principal’, y luego hacer clic en ‘Guardar menú’. Vamos a probarlo.
La visita a nuestro sitio nos muestra que ahora tenemos un enlace a cada categoría en el nuevo menú que hemos creado. Es sólo una lista desordenada por el momento, y no es la más bonita todavía – ¡pero está funcionando! 
¿Cuál es el beneficio de registrar su menú personalizado?
Lo sé, lo sé. Usted está pensando que ni siquiera tiene sentido pasar por todo este alboroto sólo para obtener algunos hipervínculos a algunas categorías para mostrar en su sitio. En cierto modo, tienes razón. Por qué no construir manualmente algunas de estas cosas usted mismo. Claro, eso se puede hacer, pero cuando construimos nuestro menú como lo hicimos aquí, ahora tenemos el poder del tablero de WordPress para controlar el código que hemos incluido en nuestro tema. Ahora podemos arrastrar y soltar fácilmente el orden de los enlaces, entre otras cosas, directamente desde el panel de control. Vamos a cambiar el orden de WordPress, PHP, JavaScript a JavaScript, WordPress y luego PHP. Muy fácil! 
Ahora cuando se visita el sitio, el orden de los enlaces en el menú se actualiza. Con este enfoque no es necesario jugar con el código subyacente.
Estilizar ese menú personalizado
¡Esa lista desordenada no va a ser suficiente! Tenemos que hacer las cosas un poco más hábil que eso. Vamos a pasar un poco de tiempo aplicando un poco de CSS personalizado para limpiar ese menú un poco. En primer lugar, queremos convertir la lista desordenada orientada verticalmente en un menú orientado horizontalmente. También queremos eliminar las viñetas de cada elemento de la lista, añadir algo de relleno y margen, así como eliminar el subrayado de los enlaces. Aquí está una puñalada en la creación de ese efecto en nuestro archivo style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;}Hay una especie de mucho sucediendo en el CSS enumerado anteriormente. Vamos a repasarlo. En el primer selector .navigation-menu ul, estamos eliminando todo el relleno y el margen de la lista desordenada. A continuación, nos aseguramos de que la lista desordenada borre los flotadores de los elementos de la lista. En el selector .navigation-menu ul li, eliminamos las viñetas de la lista, hacemos flotar los elementos de la lista a la izquierda y añadimos un pequeño margen a la derecha. Al final, dirigimos los enlaces. Primero los convertimos en elementos de nivel de bloque con un padding de 12px vertical y 17px horizontal. Añadimos un bonito efecto de borde y eliminamos el subrayado de los enlaces. Vamos a comprobarlo en el navegador.
¡Bien! Ese menú se ve mucho mejor que al principio.
Cómo añadir un color personalizado al pasar el ratón por encima del menú
El estilo básico está en su sitio. Podría ser agradable tener un poco de un efecto hover cuando uno mueve el ratón sobre cada enlace. Esto es muy fácil de configurar utilizando el siguiente fragmento:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
¡Eso se ve muy bien!
Cómo apuntar el Estado Activo de un elemento del menú
Otra cosa que nos gustaría añadir es la capacidad de personalizar el color de un enlace activo. Esto es diferente del simple efecto hover. En este caso, cuando visitamos un enlace concreto del menú, queremos que WordPress sea consciente de que esa es ahora la página activa que se está viendo y que actualice la representación visual para reflejar el enlace activo. Para hacer esto podemos hacer uso de una clase especial que está incorporada en WordPress para hacer esto mismo. Se trata de la clase current-menu-item. Así es como podemos incorporarla a nuestro menú personalizado.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Si ahora visitamos nuestro sitio y probamos a visitar los distintos enlaces del menú personalizado, podemos ver que queda muy bien. Ahora tenemos un aspecto particular para el estado hover, y un aspecto diferente para el estado activo de los enlaces en nuestro menú. Esta es una gran manera de asegurarse de que los visitantes de su sitio saben dónde están actualmente por mantener el menú activo iluminado por así decirlo.
Cómo crear un menú personalizado en WordPress Resumen
En este tutorial, tuvimos un buen vistazo a cómo agregar un menú personalizado a nuestro tema personalizado en WordPress. Hicimos uso de algunas funciones de WordPress para ayudarnos. La primera que utilizamos fue wp_nav_menu(). Esta función puede construir automáticamente una lista desordenada y elementos hijos para crear la estructura de un bonito menú al que se puede aplicar estilo. Hay muchos argumentos que se pueden pasar a esta función, pero nos centramos en lo básico aquí. La siguiente función que utilizamos fue la función register_nav_menus(). Esta función nos permite informar a WordPress sobre nuestro nuevo menú y engancharlo en el panel de control de WordPress. Una vez que nuestro nuevo menú estaba registrado en WordPress, descubrimos que era fácil añadir o eliminar lo que quisiéramos de ese menú, directamente desde el panel de control de WordPress y sin necesidad de editar ningún código en los archivos de nuestro tema. Por último, nos tomamos un tiempo para mejorar el aspecto de nuestro menú utilizando algunos estilos CSS personalizados.