En WPBeginner, hemos ayudado a innumerables lectores a personalizar sus sitios de WordPress para mejorar la experiencia del usuario, impulsar la imagen de marca / marca, e impulsar las conversiones. Y hemos visto que cuando se hace bien, un menú de navegación único puede ayudar a aumentar la participación y mantener a la gente en su sitio por más tiempo.
El problema es que todos los temas de WordPress han establecido ubicaciones en las que se puede mostrar un menú de navegación, por lo que cambiarlo puede ser complicado. Esto es especialmente cierto si eres principiante porque modificar archivos de temas es un proceso delicado.
Si utilizas un tema de bloques, puedes hacerlo con el Editor de Sitios Completo. Pero, en nuestra experiencia, hay mejores opciones que funcionarán para todo tipo de temas.
Por ejemplo, si quieres personalizaciones avanzadas, puedes usar un potente maquetador de páginas como SeedProd. O, si buscas una forma sencilla de utilizar código personalizado, WPCode es, con diferencia, la mejor opción.
En este artículo, te mostraremos cómo añadir un menú de navegación personalizado a cualquier área de tu tema de WordPress. Te guiaremos a través de 3 opciones diferentes para que puedas elegir el tutorial que mejor se adapte a tus necesidades.
¿Por qué añadir menús de navegación personalizados en temas de WordPress?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de su sitio web. Facilitan a los visitantes la búsqueda de contenidos interesantes, lo que puede aumentar las páginas vistas y reducir la tasa de rebote en WordPress.
La ubicación exacta de su menú variará en función de su tema de WordPress. La mayoría de los temas tienen varias opciones, por lo que puedes crear diferentes menús y mostrarlos en diferentes ubicaciones.
Para ver dónde puedes mostrar los menús en tu tema de WordPress actual, simplemente dirígete a Apariencia ” Menús y luego echa un vistazo a la sección ‘Ubicación de la pantalla’.
La siguiente imagen muestra las ubicaciones que son compatibles con el tema Astra WordPress.
A veces, es posible que desee mostrar un menú en un área que no aparece como “Mostrar ubicación” en su tema.
Con esto en mente, echemos un vistazo a cómo añadir un menú de navegación personalizado a cualquier área de tu tema de WordPress. Simplemente usa los enlaces rápidos de abajo para saltar al método que prefieras:
Método 1: Usar el Editor de Sitios Completo (Solo Temas Basados en Bloques)
Si utiliza un tema de bloques como ThemeIsle Hestia Pro, puede añadir un menú de navegación personalizado utilizando la edición completa del sitio (FSE) y el editor de bloques.
Para más detalles, puede consultar nuestro artículo sobre los mejores temas de WordPress para la edición completa del sitio.
Este método no funciona con todos los temas, y no te permite personalizar cada parte del menú. Si quieres añadir un menú completamente personalizado a cualquier tema de WordPress, te recomendamos que utilices un plugin maquetador de páginas.
Si utilizas un tema basado en bloques, dirígete a Apariencia “ Editor.
Por defecto, el editor de sitio completo muestra la plantilla de inicio de su tema, pero puede añadir un menú de navegación a cualquier área.
Para ver todas las opciones disponibles, seleccione “Plantillas”, “Patrones” o “Páginas”.
Ahora puede hacer clic en la plantilla, en la parte de la plantilla o en la página en la que desee añadir un menú de navegación personalizado.
WordPress mostrará ahora una vista previa del diseño. Para editar esta plantilla, haga clic en el icono del lápiz pequeño.
El siguiente paso es añadir un bloque de navegación a la zona en la que desea mostrar el menú.
En la esquina superior izquierda, haga clic en el botón azul “+”.
Ahora, escribe “Navegación” en la barra de búsqueda.
Cuando aparezca el bloque “Navegación”, simplemente arrástrelo y suéltelo en su estructura / disposición / diseño / plantilla.
A continuación, haga clic para seleccionar el bloque Navegación.
Si ya ha creado el menú que desea mostrar, haga clic para seleccionar el bloque Navegación. En el menú de la derecha, haz clic en el icono de tres puntos situado junto a “Menú”.
A continuación, puede elegir un menú en el desplegable.
Otra opción es crear un menú dentro del editor del sitio completo añadiendo páginas, entradas, enlaces personalizados y mucho más. Para añadir elementos al nuevo menú, basta con hacer clic en el icono “+”.
Esto abre un mensaje / ventana emergente donde puedes añadir cualquier entrada o página y decidir si estos enlaces deben abrirse en una pestaña nueva.
También puedes añadir una barra de búsqueda al menú de WordPress, añadir iconos de medios sociales y mucho más. En la ventana emergente, simplemente escriba el bloque que desea añadir al menú y seleccione la opción correcta cuando aparezca.
A continuación, puede configurar este bloque mediante los ajustes de la minibarra de herramientas y el menú de la derecha. Repita estos pasos para añadir más elementos al menú.
Cuando estés satisfecho con el aspecto del menú, sólo tienes que hacer clic en el botón “Guardar”.
Su sitio utilizará ahora la nueva plantilla y los visitantes podrán interactuar con su menú de navegación personalizado.
Método 2: Usar un plugin maquetador de páginas (funciona con todos los temas)
El editor de sitios completo te permite añadir menús a temas basados en bloques. Sin embargo, si quieres añadir un menú avanzado y totalmente personalizable a cualquier tema de WordPress, entonces necesitarás un plugin maquetador de páginas.
SeedProd es el mejor plugin maquetador de páginas de WordPress del mercado que le permite personalizar cada parte de su menú de navegación.
Tenemos una amplia experiencia en el uso de esta herramienta para construir menús de navegación personalizados, páginas de destino, y mucho más. Para más detalles, compruebe nuestra completa reseña / valoración de SeedProd.
Cuando se trata de páginas, SeedProd viene con más de 350 plantillas de diseño profesional que puede utilizar como punto de partida. Después de elegir una plantilla, puede añadir un menú de navegación personalizado a su sitio utilizando el bloque Nav Menu de SeedProd.
Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: También hay una versión gratuita de SeedProd que le permite crear menús de navegación personalizados sin escribir código. Sin embargo, en esta guía, vamos a utilizar SeedProd Pro ya que tiene el bloque Nav Menu, además de plantillas adicionales y características avanzadas.
Después de activar el plugin, SeedProd le pedirá su clave de licencia.
Puede encontrar esta información en su cuenta del sitio web de SeedProd. Tras introducir la clave, haga clic en el botón “Verificar clave”.
Una vez hecho esto, vaya a SeedProd ” Páginas de destino y haga clic en el botón “Añadir nueva página de destino”.
Ahora puede elegir una plantilla para su página personalizada.
Para ayudarte a encontrar el diseño adecuado, todas las plantillas de SeedProd están organizadas en diferentes tipos de campañas, como las de ” coming soon” y las de “lead squeeze”. Incluso puedes utilizar las plantillas de SeedProd para mejorar tu página 404.
Para ver más de cerca cualquier diseño, sólo tiene que pasar el ratón por encima de esa plantilla y luego hacer clic en el icono de la lupa.
Cuando encuentre un diseño que desee utilizar, haga clic en “Elegir esta plantilla”.
Estamos utilizando la plantilla ‘Black Friday Sales Page’ en todas nuestras imágenes, pero puedes utilizar cualquier plantilla que desees.
Después de elegir una plantilla, escriba un nombre para esa página personalizada. SeedProd creará automáticamente una URL basada en el título de la página, pero puede cambiar esta URL por la que desee.
Por ejemplo, puede añadir palabras clave relevantes para ayudar a los motores de búsqueda a entender de qué trata la página. Esto puede mejorar el SEO de WordPress y ayudar al motor de búsqueda a mostrar la página a personas que buscan contenido como el suyo.
Tras introducir esta información, haga clic en el botón “Guardar y empezar a editar la página”.
La mayoría de las plantillas ya contienen algunos bloques, que son los componentes del núcleo de todas las disposiciones de página de SeedProd.
Para personalizar un bloque, basta con hacer clic para seleccionarlo en el editor de páginas.
La barra de herramientas de la izquierda mostrará ahora todos los ajustes de ese bloque. Por ejemplo, en la imagen siguiente, estamos cambiando el texto dentro de un bloque “Titular”.
Puede dar formato al texto, cambiar su alineación, añadir enlaces, etc., utilizando los ajustes del menú de la izquierda.
Si seleccionas la pestaña “Avanzado”, tendrás acceso a más ajustes. Por ejemplo, puedes hacer que el bloque destaque añadiendo sombras y animaciones CSS.
Para añadir nuevos bloques a su diseño, sólo tiene que buscar cualquier bloque en el menú de la izquierda y arrastrarlo a la página. Si desea borrar un bloque, haga clic para seleccionarlo y utilice el icono de la papelera.
Como queremos crear un menú de navegación personalizado, arrastra un bloque ‘Nav Menu’ a la página.
Esto crea un menú de navegación con un único elemento / artículo por defecto ‘Acerca de’.
Ahora puede crear un nuevo menú dentro del editor SeedProd o elegir un menú que ya haya creado en el escritorio de WordPress.
Para mostrar un menú que hayas creado anteriormente, sigue adelante y haz clic en el botón ‘Menú WordPress’. Ahora puedes abrir el menú desplegable ‘Menús’ y elegir cualquier opción de la lista.
Después, puedes cambiar el tamaño de la fuente, la alineación del texto, etc., utilizando los ajustes del menú de la izquierda.
Si desea crear un nuevo menú dentro de SeedProd, seleccione el botón “Simple”.
A continuación, haga clic para ampliar el elemento / artículo “Acerca de” que SeedProd crea por defecto.
Esto abre algunos controles donde puede cambiar el texto y añadir la URL a la que enlazará el elemento / artículo del menú.
Por defecto, el enlace será ‘dofollow’ y se abrirá en la misma ventana del navegador / explorador. Puede cambiar estos ajustes utilizando las casillas de verificación de la sección “Enlace URL”.
En la siguiente imagen, estamos creando un enlace ‘nofollow’ que se abrirá en una nueva ventana. Para más información sobre este debate, consulte nuestra guía para principiantes sobre enlaces nofollow.
Para añadir más elementos al menú, basta con hacer clic en el botón “Añadir nuevo elemento”.
A continuación, puede personalizar cada uno de estos elementos siguiendo el mismo proceso descrito anteriormente.
El menú de la izquierda también tiene ajustes que cambian el tamaño de la fuente y la alineación del texto.
Incluso puede crear un separador, que aparecerá entre cada elemento del menú.
Después, ve a la pestaña “Avanzado”. Aquí puedes cambiar los colores del menú, el espaciado, la tipografía y otras opciones avanzadas.
A medida que realice cambios, la vista previa en directo se actualizará automáticamente, de modo que podrá probar distintos ajustes para ver qué queda bien en su diseño.
Por defecto, SeedProd muestra el mismo menú en dispositivos móviles y de escritorio. Sin embargo, los dispositivos móviles suelen tener pantallas mucho más pequeñas en comparación con los ordenadores de sobremesa.
Teniendo esto en cuenta, es posible que desee crear un menú separado para mostrar en los dispositivos móviles. Por ejemplo, puede utilizar una estructura / disposición / diseño / plantilla vertical para que los usuarios móviles no tengan que desplazarse lateralmente. También puede mostrar menos enlaces en los teléfonos inteligentes y las tabletas.
Para crear un menú preparado para dispositivos móviles, basta con diseñar el menú siguiendo el mismo proceso descrito anteriormente. A continuación, seleccione la pestaña “Avanzado” y haga clic para ampliar la sección “Visibilidad de dispositivos”.
Ahora puede conmutar el carrusel / control deslizante “Ocultar en el escritorio”.
Ahora, SeedProd solo mostrará este menú a los usuarios de móviles.
Cuando esté satisfecho con el aspecto de su menú personalizado, es hora de publicarlo.
Basta con hacer clic en la flecha desplegable situada junto a “Guardar” y seleccionar “Publicar”.
Ahora, si visita su blog de WordPress, verá el menú de navegación personalizado en acción.
Método 3: Crear un Menú de Navegación Personalizado en WordPress Usando Código (Avanzado)
Si no quieres establecer un plugin maquetador de páginas, puedes añadir un menú de navegación personalizado utilizando código. A menudo encontrarás guías con instrucciones sobre cómo añadir fragmentos de código personalizados al archivo functions.php de tu tema.
Sin embargo, no recomendamos este método, ya que incluso un pequeño error en su código podría causar una serie de errores comunes de WordPress o incluso romper su sitio por completo. También perderás el código personalizado cuando actualices tu tema de WordPress.
Por eso recomendamos usar WPCode. Es la forma más fácil y segura de añadir código personalizado en WordPress sin tener que editar ningún archivo del núcleo de WordPress.
Nota: Hay montones de formas diferentes en las que puedes usar WPCode para personalizar tu sitio WordPress de forma segura. Tiene una biblioteca de fragmentos de código incorporada y es compatible con todos los idiomas más importantes de WordPress, incluyendo PHP, JavaScript, CSS y HTML. Para más información acerca del plugin, marca / comprueba nuestra completa reseña de WPCode.
Lo primero que tienes que hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, vaya a Fragmentos de código “ Añadir fragmento en su escritorio de WordPress.
Aquí verás todos los fragmentos de código ya preparados que puedes añadir a tu sitio. Entre ellos se incluye un fragmento que te permite desactivar completamente los comentarios, subir tipos de archivo que WordPress no suele soportar, desactivar páginas de adjuntos y mucho más.
Para crear su propio fragmento de código, pase el cursor por encima de “Añada su código personalizado” y haga clic en “Usar fragmento de código”.
Para empezar, introduzca un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en su escritorio de WordPress.
A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código PHP”.
Una vez hecho esto, basta con pegar el siguiente fragmento de código en el editor de código:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Esto añadirá una nueva ubicación de menú a tu tema llamada ‘Mi menú personalizado’. Para utilizar un nombre diferente, simplemente retoque el fragmento de código.
Si desea añadir más de un menú de navegación personalizado a su tema, sólo tiene que añadir una línea adicional al fragmento de código.
Por ejemplo, aquí estamos añadiendo dos nuevas ubicaciones de menú a nuestro tema, llamadas ‘Mi Menú Personalizado’ y ‘Menú Extra:’
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Después, desplázate hasta las opciones de ‘Inserción’. Si aún no está seleccionada, elige el método ‘Auto Insertar’ para que WPCode añada el fragmento de código en todo tu sitio.
A continuación, abre el menú desplegable “Ubicación” y haz clic en “Ejecutar en todas partes”.
A continuación, desplázate a la parte superior de la pantalla y haz clic en el conmutador “Inactivo” para que cambie a “Activo”.
Por último, haz clic en “Guardar” para activar este fragmento de código.
Después, vaya a Apariencia ” Menús y busque en el área ‘Ubicación de la pantalla’.
Ahora debería ver una nueva opción “Mi menú personalizado”.
Ahora puede seguir adelante y añadir algunos elementos de menú a la nueva ubicación. Para obtener más información, consulte nuestra guía paso a paso sobre cómo añadir menús de navegación para principiantes.
Cuando esté satisfecho con su menú, el siguiente paso es añadirlo a su tema de WordPress.
La mayoría de los sitios web muestran el menú de navegación justo debajo de la cabecera. Esto significa que el menú es una de las primeras cosas que ven los visitantes, junto con el logotipo o el título del sitio.
Puede añadir el menú de navegación personalizado a cualquier lugar añadiendo algo de código al archivo de plantilla de su tema.
En su escritorio de WordPress, vaya a Apariencia ” Editor de archivos de temas.
En el menú de la derecha, elija la plantilla en la que desea añadir el menú. Por ejemplo, si quieres mostrar el menú de navegación personalizado en la cabecera de tu sitio web, lo normal es que selecciones el archivo header.php.
Si necesita ayuda para encontrar el archivo de plantilla adecuado, consulte nuestra guía sobre cómo encontrar los archivos que debe editar en su tema de WordPress.
Después de seleccionar el archivo, tendrá que añadir una función wp_nav_menu y especificar el nombre de su menú personalizado.
Por ejemplo, en el siguiente fragmento de código, estamos añadiendo ‘Mi menú personalizado’ a la cabecera del tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Tras añadir el código, haga clic en el botón “Actualizar archivo” para guardar los cambios.
Ahora, si visita su sitio, verá el menú personalizado en acción.
Por defecto, su menú aparecerá como una simple lista con viñetas.
Puede personalizar el menú de navegación para que se adapte mejor a su tema de WordPress o a la imagen de marca de su empresa añadiendo código CSS personalizado a su sitio.
Para ello, vaya a Apariencia ” Personalizar.
En el Personalizador de temas de WordPress, haga clic en “CSS adicional”.
Se abrirá un pequeño editor de código en el que podrás introducir código CSS.
Ahora puedes dar estilo a tu menú usando la clase CSS que has añadido a la plantilla de tu tema. En nuestro ejemplo, es .custom_menu_class.
En el siguiente código, añadimos márgenes y relleno, establecemos el color del texto en negro y disponemos los elementos del menú en una disposición horizontal:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
El Personalizador de WordPress se actualizará automáticamente.
Ahora mostrará cómo se verá el menú con el nuevo estilo.
Si está satisfecho con el aspecto del menú, haga clic en “Publicar” para aplicar los cambios.
Para obtener más información, consulte nuestra guía sobre cómo aplicar estilo a los menús de navegación de WordPress.
Guías para expertos: Haga más con los menús de navegación de WordPress
Con WordPress, puedes crear todo tipo de menús útiles y atractivos. Con esto en mente, aquí tienes algunas guías de expertos que te ayudarán a sacar aún más partido a tus menús de navegación:
- Cómo añadir iconos de imagen con menús de navegación en WordPress
- Cómo añadir lógica condicional a los menús en WordPress (paso a paso)
- Cómo añadir descripciones de menú en sus temas de WordPress
- Cómo añadir un menú adaptable a pantalla completa en WordPress
- Cómo añadir un Mega Menú a su sitio WordPress (Paso a Paso)
Esperamos que esta guía te haya ayudado a aprender cómo añadir un menú de navegación personalizado en WordPress. Puede que también quieras ver nuestras guías sobre cómo añadir un botón en el menú de cabecera de WordPress o cómo resaltar un elemento / artículo del menú en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Imran
I have a custom header built for wordpress when had menu items hardcoded, How can i use the wordpress menu in the header instead of the hardcoded menu ?
cheryl
I am fairly new to wordpress however I would like to edit a custom menu that we have created as something appears wrong within the menu.
How do i do this?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Helpful article. I am a WordPress user and this tips will help me to add custom navigation menus. Thanks for sharing.
Daniel Keith
Hi there,
Great tutorial. How can I apply CSS to this custom menu?
Though this is a great way to add multiple menus but without proper CSS the website look odd.
Zaheer Abbas
I m creating my word press theme but menu and widget is not showing in admin panel ???
is it built in features in word press or i have to create menus and widgets with code plz guide
Tabitha
How can I make my drop down menu into columns? My current drop down is too long.
Aakash Salunke
I’m little bit advanced user. My theme supports only one menu. But I want to add one more menu. I have made it but how can I add?
WPBeginner Support
First you will need to register the menu location, then you will need to edit your theme files to display your navigation menu.
Administrador
bobit
its worked, thanks for the great post
Aijaz Ansari
Awsome, tutorial, it really helps a novice like me.
thanks
Victoria
Thanks for the article!!! I created my new menu.
I have a problem though.
My website has a fixed width, and when I resize the window everything stays in place, exept for the new menu. Min-width is not an option because it’s not exactly the behavior I want.
How can I make it behave the same way as the rest of the contents of the page?
Thanks!
Joey
THANKS! I was looking a long time for this, never thought it was so simple.
Cory
i have a crazy old theme that didnt support WP 3.0+ menus. This tutorial was so easy. Took me 3 minutes to bring it a little more up to date. thanks so much.
Jacques Goudreau
Thanks for the tip! Great tut!
Emma
Where do you even go to make these changes? I can’t see any of those options under the Theme or Theme Options tabs.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Editorial Staff
Most themes do support this. Look at Appearance > Menus. This article is for theme designers who want to add this feature in their themes to allow users to add menus from the backend.
Administrador
Zoe
I’ve been trying to add a custom class to a singular custom url (to change the color of just one url) in the Top Nav Menus section, but it just adds my class as an extension of the existing class in the output source code and nothing happens.
Here’s my css code and the source code that is output on my site:
.myCustomClass { color: #FFFF00; }
A one-off colored link
Any suggestions on how to get this to work?
Editorial Staff
Yes add it like color: #ffff00 !important; in that class. This should do the trick.
Administrador
Jeremy Johnson
I was able to implement these modifications and the custom menu works. However, the css in my chosen theme doesn’t seem to support sub-menus. The submenu item is always visible, mousing over the parent item does nothing, and the parent menu item is as wide as the wider child item which pushes the other menu items farther to the right than they should be. Any suggestions on making the sub-menu act dynamically? I’m fairly new to CSS.
Editorial Staff
The best place to start would be to take the default Twenty Eleven theme. Use the navigation CSS from there, and start modifying.
Administrador
Cedric
Still looking for a solution for this.
shaunling
This is just great!
digitfox
Yeah! its a nice tutorial for me! I am very new to WP! Thanks
PauloNeves
I need help.
Follow all steps, but in Apparance Panel the option menu not enable.
When select other theme working.
How do enable option menu?
Thanks.
Paulo Neves
wpbeginner
@PauloNeves You have to add this line in your theme’s functions.php file: add_theme_support( ‘menus’ );
Brad
Thanks for this! Worked awesomely for me and helped my client a lot! – aptdesign
eeebasic
That is very helpful me although wordprees 3.3 version released few days ago.
citydan
I have followed the instructions and this post and the post here (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.
Any ideas why my menu sub-items are not showing?
GourabMalla
Hi,
I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.
I’m using WordPress 3.2
Thanks
Gourab
DanFlynnDesign
Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!
asharperrazor
I have tried this many times. I have an old wordpress theme. So old I’m not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.
Won’t display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?
Thanks in advance. The website is http://www.asharperrazor.com
JamesGeorge
I implemented this with NO problems-thank you! I took the “nav menu” code and put it in the div where my client’s theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!
ÁlvaroBenavides
I really need help implementing the CSS of the classes, so please notify when u finish!
Bec
Great post – thank you!
I have implemented as above and my menu items are showing on site only problem is that each page is empty?!
any ideas?
Editorial Staff
Sounds like a PHP error. Please validate your PHP to make sure there is no error.
Administrador
Joseph McCullough
Quick and dirty – the way I like my code snippets. Thanks a bunch.
Paul
I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
Any ideas?
Editorial Staff
Nope, no clue why it is doing that.
Administrador
Narendra Choudhary
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Reply
Ram
I have a question on nav menu,
is there any way to add the image to the list of navigation menus..
Thanks,
Ram
Editorial Staff
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Administrador
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Thanks,
Ram
Editorial Staff
Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.
Julie @ Inspired to Write
Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!
Editorial Staff
That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.
Administrador
Chris
Question about the menu handling.
I have a menu that is right aligned, so the menu items show up in reverse order.
Is there a way to sort the menu_order in REVERSE?
so: sort_column’ => ‘menu_order’ would have something added to reverse the order.
Thanks!
Editorial Staff
Just because they are right aligned, shouldn’t make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.
Administrador
Julie
Have followed instructions but after creating menus and adding appropriate categories to use, I can’t see them in my nav bar – any ideas what I have done wrong?
Editorial Staff
Have you pasted the codes in your header.php or wherever that menu should appear?
Administrador
dan
You also need to add this to your functions.php file in order for you to use the menus
register_nav_menus( array(
‘primary’ => __( ‘Main Navigation’, ‘twentyten’ ),
) );
Editorial Staff
Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don’t have to register locations.
Administrador
errr
i’m soooo not following … could u be more clear where i would plug this code (add_theme_support( ‘menus’ );) into the functions.php file?
i’m totally lost
Editorial Staff
Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.
Administrador
BanyanTree
If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.
wpbeginner
@BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.
BanyanTree
@wpbeginner@BanyanTree You don’t need to link to articles, no one asked for that. Three words answers his question; “at the end,” which is easier to type than a snide remark. Keep in mind, you named your site; “wpbeginner,” and if that’s the audience you seek, cater accordingly.
wpbeginner
@f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories… The word “beginner” is being used on a relative scale.
We have articles for Very Newbies who are just users in our Beginners Guide Category… We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.
Hope that explains it.
f1mktsol
@wpbeginner If you’ve outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.
Skubeedoo
I added add_theme_support( ‘menus’ );
and saw no option in the admin panel [where do i look?] I’m using intrepidity theme. I’m a noob, so it might be right in front of me and don’t know the difference. I have a website that has a WP inside it and want to be able to navigate out of WP and back to my main URL. All I need is a “Home” nav link.
Thanks in advance.
Editorial Staff
It should show under Appearance Tab.
Administrador
ianarosh
friend you have an awesome site and I am glad i’ve found it!
I was killing my head to figure how to add the costum menu and it was easy after i’ve seen this! Simply amazing.
A sugestion ever pondered in making posts about blog/server security? (not sure if you’ve had already need to explore more :O)
Best regards and keep the good work mate!
Editorial Staff
Do a search, we already have a post about that.
Administrador
Charles
Can any of you tell me how to add support for multiple menus in the functions php file. I want to include two set’s of menus
Editorial Staff
You don’t need to have two set of functions.php… Just call the main function. Create multiple menus using the user interface in wp-admin. Then you would have to call the menus in the php code.
Administrador
Jamie
Just to let you know but the following:
“add_theme_support( ‘nav-menus’ );”
Has changed in the final release to:
“add_theme_support( ‘menus’ );”
Thanks!
Peter Luit
@Jamie: Thanks for that latest remark!
Editorial Staff
Thanks Jamie, Post fixed
Administrador
Jacob
Great. Just what I was looking for. How do you add the menu slug to the function?
Editorial Staff
‘menu’ => ‘Project Nav’ like this <<
Administrador
Chris Creed
Thanks for this – I’m currently playing around with the new menu system – it’s a great additional feature that’s going to make things so much easier. I develop themes and get quite a few support requests from people wanting to create custom navigation sections on their site – the new menus should hopefully help to simply things a lot (especially for people with little WordPress experience).
Gopal Bhattacharjee
I am also testing WordPress 3.0 Beta, now I can play arround with menu…Thanks!
Angie
I am wondering how to remove HOME from my nav menu using WP 3.0 beta. Do I edit the wp_nav_menu function or is there some other way?
If I edit the function, can you provide instruction?
Editorial Staff
You can simply click Remove…just like any other navigation link.
Administrador
Kevin
Its a pity there’s no way to add the “home” page to the menu from within the menu builder. This is a major flaw.
Editorial Staff
Why not? You can create a custom navigation link called Home and add your homepage URL to it.
Administrador
Noor
I am also testing WordPress 3.0 Beta and I found few bad things in Menus…e.g it is inconsistent and hope till the final release it will become consistent
michelle
nice tutorial! thanks for the share!
Mani Viswanathan
Good Tutorials first up! will be useful while I upgrade to 3.0