¿Desea añadir elementos / artículos personalizados a menús específicos de WordPress?
Los menús de WordPress son menús de navegación que se muestran en la parte superior de la mayoría de los sitios web. A veces es posible que desee mostrar elementos personalizados que no sean simples enlaces en los menús de navegación.
En este artículo, le mostraremos cómo añadir fácilmente elementos personalizados a menús específicos de WordPress.
Por qué añadir elementos personalizados a los menús de WordPress
Los menús de WordPress son enlaces de navegación que suelen aparecer en la parte superior de un sitio web. En los dispositivos móviles, suelen aparecer al tocar un icono de menú.
Dado que se trata de un lugar prominente en la estructura / disposición / diseño / plantilla de un sitio web típico de WordPress, es inteligente aprovecharlo colocando en el menú elementos / artículos personalizados que no sean simples enlaces.
Por ejemplo, algunos usuarios pueden querer mostrar el formulario de búsqueda como hacemos en WPBeginner. Un sitio web de membresía puede querer mostrar enlaces para acceder / salir, o puede querer añadir iconos o imágenes a su menú.
Por defecto, los menús de navegación están diseñados para enlazar texto plano. Sin embargo, puede colocar elementos / artículos personalizados en los menús de WordPress.
Dicho esto, echemos un vistazo a cómo puede añadir elementos personalizados a menús específicos en WordPress manteniendo intacto el resto de su menú de navegación.
Añadir elementos personalizados a menús de navegación específicos en WordPress
Hay diferentes maneras de añadir elementos personalizados a un menú de navegación en WordPress. Depende del tipo de elemento / artículo personalizado que esté intentando añadir.
Le mostraremos algunos de los ejemplos más comunes. Para algunos de ellos tendrás que utilizar plugins, mientras que otros requerirán que añadas algún código.
Si desea omitir una sección determinada, puede utilizar este índice:
- Añadir una ventana emergente de búsqueda a su menú de WordPress
- Añadir iconos o imágenes a su menú
- Añadir enlaces de acceso / cierre de sesión a su menú
- Añadir texto personalizado a un menú de WordPress
- Añadir la fecha actual al menú
- Mostrar nombres de usuario en su menú
- Mostrar diferentes menús en diferentes páginas
Primeros pasos.
1. Adición de una ventana emergente de búsqueda en el menú de WordPress
Normalmente, puede añadir un formulario de búsqueda a su barra lateral de WordPress utilizando el widget o bloque de búsqueda por defecto. Sin embargo, no hay forma de añadir la búsqueda al menú de navegación por defecto.
Algunos temas de WordPress tienen una opción para añadir un cuadro de búsqueda a su área de menú principal. Pero si el tuyo no la tiene, puedes utilizar el método que se indica a continuación.
Para ello, necesitas instalar y activar el plugin SearchWP Modal Search Form. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Este plugin es una extensión para SearchWP, que es el mejor plugin de búsqueda de WordPress en el mercado.
La extensión es gratuita y funcionará también con la búsqueda por defecto de WordPress. Sin embargo, le recomendamos que lo utilice con SearchWP si desea mejorar la búsqueda de WordPress.
Tras instalar la extensión, dirígete a la página Apariencia ” Menús. En la columna “Añadir elementos de menú”, haga clic en la pestaña “Formularios de búsqueda modal de SearchWP” para expandirla.
Seleccione su motor de búsqueda y haga clic en el botón Añadir al menú.
El plugin añadirá la búsqueda a tu menú de navegación. Haga clic en el ‘Formulario de búsqueda emergente’ debajo de sus elementos de menú para expandirlo y cambiar la etiqueta a Buscar o cualquier otra cosa que desee.
No olvides hacer clic en el botón Guardar del menú para guardar los cambios.
Ahora puede visitar su sitio web para ver la Búsqueda añadida a su menú de navegación. Al hacer clic se abrirá el formulario de búsqueda en una caja de luz emergente.
Para más detalles, consulte nuestra guía sobre cómo añadir un botón de búsqueda a un menú de WordPress.
2. Añadir iconos e imágenes personalizadas a menús específicos
Otro elemento / artículo personalizado muy popular que los usuarios suelen querer añadir a un menú específico es una imagen o un icono.
Para ello, tendrás que instalar y activar el plugin Menu Image Icon. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, vaya a la página Apariencia ” Menús y pase el ratón por encima del elemento / artículo del menú en el que desee mostrar un icono o una imagen.
Haga clic en el botón azul Imagen de menú para continuar.
Aparecerá una ventana emergente. Desde aquí, puede elegir una imagen o icono que se mostrará con ese elemento / artículo del menú.
También puede elegir la posición de la imagen o el icono con respecto al elemento / artículo del menú. Por ejemplo, puede mostrar el icono justo antes del elemento del menú, como en el ejemplo siguiente, o incluso ocultar el título del menú para que solo aparezca el icono.
No olvide hacer clic en el botón Guardar cambios para establecer los ajustes. Repita el proceso si necesita añadir iconos o imágenes a otros elementos del menú.
Después, podrá visitar su sitio web para ver la imagen o el icono personalizados en determinados elementos del menú.
Para obtener instrucciones más detalladas, consulte nuestro tutorial sobre cómo añadir imágenes en los menús de WordPress.
3. Añadir enlaces de acceso / cierre de sesión al menú específico de WordPress
Si utiliza un plugin de membresía de WordPress o tiene una tienda en línea, es posible que desee permitir a los usuarios acceder fácilmente a sus cuentas.
Por defecto, WordPress no viene con una forma sencilla de enlazar el acceso / cierre de sesión en los menús de navegación.
Le mostraremos cómo añadirlos utilizando un plugin o un fragmento de código.
1. Añadir enlaces de acceso / cierre de sesión a los menús utilizando un plugin
Este método es más sencillo y recomendable para todos los usuarios.
En primer lugar, debe instalar y activar el plugin Login or Logout Menu Item. Después de eso, usted tiene que visitar la página Apariencia ” Menú y haga clic en la pestaña de inicio de sesión / cierre de sesión para expandirlo.
Desde aquí, debe seleccionar el elemento “Conectado|Desconectado” y hacer clic en el botón Añadir al menú.
No olvide hacer clic en el botón Guardar menú para guardar los cambios. Ahora puede visitar su sitio web para ver su enlace personalizado de acceso / salida en acción.
El enlace cambiará dinámicamente para acceder / desconectarse en función del estado de conexión del usuario.
Obtenga más información en nuestra guía práctica sobre cómo añadir enlaces de acceso / cierre de sesión en los menús de WordPress.
2. Añadir enlaces de acceso / cierre de sesión mediante código personalizado
Este método requiere que añadas código a tu sitio web WordPress. Si no lo ha hecho antes, eche un vistazo a nuestra guía sobre cómo añadir código personalizado en WordPress.
En primer lugar, debe averiguar el nombre que su tema de WordPress utiliza para la ubicación específica del menú de navegación.
La forma más fácil de encontrarlo es visitando la página Apariencia ” Menús y llevando el ratón a la zona de ubicaciones de los menús.
Haga clic con el botón derecho para seleccionar la herramienta Inspeccionar y, a continuación, verá el nombre de la ubicación en el código fuente. Por ejemplo, nuestro tema de demostración utiliza principal, pie de página y barra superior-menú.
Tenga en cuenta el nombre utilizado para la ubicación de destino en la que desea mostrar el enlace de acceso / cierre de sesión.
A continuación, debe añadir el siguiente código al archivo functions. php de su tema o a un plugin específico del sitio.
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
}
return $items;
}
Después, puede visitar su sitio web y verá el enlace acceder / desconectarse en su menú de navegación.
Este enlace dinámico cambiará automáticamente a acceder / cerrar sesión en función del estado de acceso del usuario.
4. Cómo añadir texto personalizado al menú de navegación de WordPress
¿Y si sólo quiere añadir texto y no un enlace a su menú de navegación?
Hay dos formas de hacerlo.
1. Añadir texto personalizado a un menú específico (Fácil)
Simplemente vaya a la página Apariencia ” Menús y añada un enlace personalizado con el signo # como URL, y el texto que desee mostrar como Texto del enlace.
Haga clic en el botón Añadir al menú para continuar.
WordPress añadirá tu texto personalizado como un elemento / artículo del menú en la columna de la izquierda. Ahora, haz clic para expandirlo y borra el signo #.
No olvides hacer clic en el botón Guardar menú y obtener una vista previa de tu sitio web. Verás que tu texto personalizado aparece en el menú de navegación.
Sigue siendo un enlace, pero al hacer clic en él el usuario no hace nada.
2. Añadir texto personalizado a un menú de navegación mediante código
Para este método, añadirá un fragmento de código a su sitio web. En primer lugar, tendrá que averiguar el nombre de la ubicación de su tema como se describe anteriormente en la sección de enlace de acceso / cierre de sesión.
A continuación, debe añadir el siguiente código al archivo functions. php del tema o a un plugin específico del sitio.
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ( $args->theme_location == 'primary') {
$items .= '<li><a title="">Custom Text</a></li>';
}
return $items;
}
Simplemente sustituya donde dice ‘Texto personalizado’ por su propio texto.
Ahora puede guardar los cambios y visitar su sitio web para ver el texto personalizado añadido al final del menú de navegación.
Este método de código puede ser útil si desea añadir mediante programación elementos dinámicos a un menú específico de WordPress.
5. Añadir fecha actual en el menú de WordPress
¿Quieres mostrar la fecha actual dentro de un menú de navegación en WordPress? Este truco es muy útil si tienes un blog que se actualiza con frecuencia o un sitio web de noticias.
Simplemente añada el siguiente código al archivo functions. php de su tema o a un plugin específico del sitio.
add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
if( $args->theme_location == 'primary') {
$todaysdate = date('l jS F Y');
$items .= '<li><a>' . $todaysdate . '</a></li>';
}
return $items;
}
No olvide sustituir “principal” por la ubicación de su menú.
Ahora puede visitar su sitio web para ver la fecha actual en su menú de WordPress.
También puede cambiar el formato de la fecha a su gusto. Consulta nuestra guía práctica sobre cómo cambiar el formato de fecha y hora en WordPress.
6. Mostrar nombre de usuario en el menú de WordPress
¿Quiere añadir un poco más de personalización a su menú de navegación? Puede saludar a los usuarios conectados por su nombre en el menú de navegación.
En primer lugar, tendrás que añadir el siguiente código al archivo functions. php de tu tema o a un plugin específico del sitio.
add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
foreach ( $menu_items as $menu_item ) {
if ( strpos($menu_item->title, '#profile_name#') !== false) {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$user_public_name = $current_user->display_name;
$menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!");
} else {
$menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!");
}
}
}
return $menu_items;
}
Este código primero comprueba si has añadido un elemento / artículo con #nombre_de_perfil# como texto enlazado. Después, reemplaza ese elemento / artículo con el nombre del usuario conectado o un saludo genérico para los usuarios no conectados.
A continuación, debe ir a la página Apariencia ” Menús y añadir un nuevo enlace personalizado con el #nombre_de_perfil# como texto de enlace.
No olvide hacer clic en el botón Guardar menú para guardar los cambios. Después, puede visitar su sitio web para ver el nombre del usuario conectado en el menú de WordPress.
7. Mostrar dinámicamente menús condicionales en WordPress
Hasta ahora le hemos mostrado cómo añadir diferentes tipos de elementos personalizados a menús específicos de WordPress. Sin embargo, a veces puede necesitar mostrar dinámicamente diferentes elementos de menú a los usuarios.
Por ejemplo, puede querer mostrar un menú solo a los usuarios conectados. Otra posibilidad es que el menú cambie en función de la página que esté viendo el usuario.
Este método permite crear varios menús y mostrarlos solo cuando se cumplen determinadas condiciones.
En primer lugar, debe instalar y activar el plugin Conditional Menus. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, debe visitar la página Apariencia ” Menús. Desde aquí debe crear un nuevo menú que desee mostrar. Por ejemplo, en este ejemplo hemos creado un nuevo menú solo para usuarios conectados.
Una vez creado el menú, pase a la pestaña Gestionar ubicaciones.
Desde aquí, debe hacer clic en el enlace Menús condicionales situado a continuación de la ubicación del menú.
A continuación, seleccione en el menú desplegable el menú que ha creado anteriormente.
A continuación, haga clic en el botón “+ Condiciones” para continuar.
Aparecerá una ventana emergente.
Desde aquí, puede seleccionar las condiciones que deben cumplirse para que aparezca este menú.
El plugin ofrece un montón de condiciones para elegir. Por ejemplo, puede mostrar el menú basado en la página específica, categoría, tipo de contenido, taxonomía, y más.
También puede mostrar menús diferentes en función de los perfiles de los usuarios y del estado de los conectados. Por ejemplo, puede mostrar un menú diferente a los miembros existentes en un sitio web de membresía.
Esperamos que este artículo te haya ayudado a aprender cómo añadir elementos / artículos personalizados a menús específicos de WordPress. Puede que también quieras ver nuestra guía sobre cómo elegir el mejor software de diseño web, o nuestra comparativa de expertos sobre el mejor software de chat en vivo para pequeñas empresas.
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.
Jiří Vaněk
I like the implementation of the search, where instead of the classic empty field, there is a popup window. It looks like a nice solution. I was also interested in the date and personalization of the logged in user. Thanks for the inspiration.
reza
very helpful and simple
thanks thanks thanks
WPBeginner Support
Glad our guide was helpful
Administrador
Denis
Hello,
thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
Cheers,
Denis
WPBeginner Support
For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.
Administrador
Ben Short
I’m sure this is too late for Denis! But in case anyone else wants their menu item to come FIRST in the list of menu items, rather than LAST, here’s an example of code I’ve used for this purpose:
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if (is_single() && $args->theme_location == ‘primary’) {
$oldItems = $items;
$items = ‘Show whatever’;
$items .= $oldItems;
}
return $items;
}
Karen
Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?
WPBeginner Support
Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.
Administrador
Mary
How to add in my secondary menu footer class li items in functions.php…?
Saurabh Saneja
Hi,
How can I add a search form at the beginning of the menu items list?
Thanks,
Saurabh
PS: big fan of your tuts
Igor
This is great. But would it be possible to add a menu within a menu?
I want to append a language menu to my primary menu.
I get the language menu on the page but not in the desired place.
instead of
Annemarie
Thank you for this! Just what I needed in a project.
Tasneem
I used the code for teh search box it works perfect.
Anuj
Nice article, Help me alot.
Garratt
Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.
Garratt
never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”
Garratt
OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.
`add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$items .= ‘Show whatever’;
return $items;
}
sahar
It worked but it destroyed responsivity…I had to remove code
Gerson
How add this menu item in first position ?
Gwen
Awesome, Thanks you just saved me hours.
Dilip
What is use of 10,2 in the code
WPBeginner Support
10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
2 is for the number of arguments the function accepts.
Administrador
Pat
This is so useful and just what I needed! Thank you very much for sharing.
Matt
The Log-in link won’t show up, just the log out link. What could cause this?
Ritchie Pettauer
This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.
I didn’t expect the first posting I found to solve my problem
thx guys.
Bill Gram-Reefer
works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in
appearance/menus/add-to-menu
Everything I’ve seen creates a whole new…what is it a div…(?)
that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.
AND take the css assigned to the navigation bar.
Josalone Wordsworth
I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition
Hugo Callens
Related question: how to add a menu item based on a specific user role?
Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?
Monilal
Its works but current menu item not select
james
is there a way to add it on certain submenu instead of top ul?
Jonathan
I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?
Gerrit
Thank you for the How To!
To be honest I don’t understand how you call the function.
Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.
Could you please detail for a wp-beginner?
Thank you,
Gerrit
samuel
hey how if i want to add it to sub menu ?
lokitoki
hm any ideas how i could add html tags to just one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
amit
the option is available on wp admin panel
lokitoki
hm any ideas how i could edit the tag for one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
gonzela2006
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
Lại Đình Cường
How about add new custom menu to specific position?
Guillermo
I want put a little image beside left to the menu home, how can put it?
please help me
Pierre Laflamme
In your examples, you add items to the primary menu (theme_location == ‘primary’).
How would I add an item in a specific menu in widget area? Where do I get the theme_location?
WPBeginner Support
theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.
Administrador
Brad Trivers
If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.
Xúlio Zé
Really useful!
Thank you vary much Brad
^-^
Peter Lalor
Hi Brad,
Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
Thanks,
Peter
razvan
Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.
This is my code:
if( $args->theme_location == ‘primary’ )
return ““.$items;
How can I hide the a href on the page and just display the image with link?
Thanks in advance
Kathy
Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!
What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?
Thanks so much!
Erik Mitjans
Hi Kathy!
I was working on this since days and I finally got it working.
Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035
Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.
Cheers!
Eric
sachi
awesome i was searching these codes
Brad
Thanks this was very helpfull,
However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??
Thanks much !!
WPBeginner Support
It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s
functions.phpfile or a site specific plugin.Administrador
Lavinia
This isn’t work for me
Andor Nagy
How can I place it in front of the first menu item? Otherwise great tutorial!
Regards,
Andor Nagy
Editorial Staff
Use the return example of the search bar and move the items towards the end?
Administrador
Cameron Jones
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$custom = ‘Show whatever’;
$items = $custom.$items;
return $items;
}
Murugu
Pardon my ignorance but which php file would I be editing?
Editorial Staff
This would go in your functions.php file.
Administrador
Murugu
I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?
add_filter(‘wp_nav_menu_items’,’add_search_box_to_menu’, 10, 2);
function add_search_box_to_menu( $items, $args ) {
if( $args->theme_location == ‘header_extras_inner’ )
return $items.””;
return $items;
}
Elliott Wall
Sorry to be coming into this discussion so late
I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers
Editorial Staff
For placeholder text, you have to do something like this:
::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }1-click Use in WordPress
Administrador
Elliott Wall
This worked perfectly— thank you again!
Sam
Can we add custom link before the first item instead of at the end?
xafar Ali
Yes , just concatenate first instead of last.
$items = “MENU ITEM ” . $items;
piomat
beer!
SAcha
Hi,
very interesting!
I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.
Thanks
Editorial Staff
Not sure if that is possible.
Administrador