Una de las características de WordPress que más me gusta es el tema de los menús. Si en nuestro template lo tenemos bien definido, en la sección de Apariencia → Menús podremos modificar visualmente los elementos del menú muy fácilmente e incluso poner parámetros adicionales a cada elemento, como classes de CSS o atributos del título del enlace.

Primer paso: crear una posición de menú nueva.

Antes que nada nos hace falta crear una nueva posición de menú. Para ello abriremos el fichero functions.php y añadiremos al final del fichero el siguiente código:

if (function_exists('register_nav_menu')) {
    register_nav_menu('menu-principal', 'Menú principal');
}

Lo que hace esta función es registrar la nueva posición de menú que la podremos usar en cualquier parte de nuestra página. El primer parámetro que le pasamos es el identificador que tendrá. El segundo es el título de la misma que es la que saldrá en el panel de administración:

Para mostrar esta posición del menú lo que hay que hacer es llamarla con la siguiente función:

 <?php wp_nav_menu( array( 'theme_location' => 'menu-principal' ) ); ?>

El parámetro que le pasamos a esta función es el identificador que le hemos puesto a la función que crea la posición de menú (en nuestro caso: “menu-principal”).

Añadir un nuevo menú y prepararlo para darle estilos con CSS

Una vez registrada la nueva posición crearemos un menú nuevo con varios elementos. A la hora de añadir elementos, WordPress nos permite poner automáticamente links de categorías o páginas que tengamos publicadas. Esto nos ahorra tener que introducir los links manualmente en el cuadro de “Enlaces personalizados”.

Es importante elegir bien el nombre del menú que vayamos a crear ya que WordPress añadirá un id de CSS al <ul> que contiene el menú. Por ejemplo: si hemos puesto “Menú Principal” tendremos: <ul id="menu-menu-principal" class="menu">. Dentro de este <ul> tendremos elementos <li> que serán los elementos del menú que habremos puesto.

A cada uno de los elementos <li> les podemos poner classes de CSS específicas por cada uno. Para ello dentro de la sección de Apariencia → Menús arriba a la derecha hay un botón que pone: “Opciones de pantalla”. Hacemos clic y en el desplegable que aparece seleccionamos “Mostrar propiedades avanzadas de menú: Classes de CSS”. Con esto lograremos que en cada ítem del menú nos aparezca una casilla donde le podremos indicar una clase de CSS que deseemos: