Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo mostrar diferentes menús a los usuarios conectados en WordPress

WordPress muestra el mismo menú de navegación para todo el mundo. Sin embargo, es posible que desee personalizar el menú en función de si un usuario está conectado o no.

Mostrar menús diferentes a los usuarios conectados en WordPress es una forma estupenda de crear una experiencia más personalizada. Permite mostrar contenido relevante solo a los que están conectados, como detalles de la cuenta o recursos exclusivos.

En esta guía, explicaremos cómo establecer diferentes menús para los usuarios conectados utilizando 2 métodos.

Showing different navigtion menus to logged in and non-logged in users in WordPress

¿Por qué mostrar diferentes menús a los usuarios conectados en WordPress?

Cambiar las diferentes áreas de su sitio web WordPress en función de sus visitantes y su actividad hace que su sitio se sienta personalizado para cada usuario.

Este contenido personalizado le ayuda a mejorar la experiencia del usuario en su sitio web de WordPress.

Ahora bien, si gestiona un sitio web en el que los usuarios no necesitan registrarse ni acceder, probablemente pueda utilizar los mismos menús de navegación en todo su sitio web. Sin embargo, otros sitios web pueden beneficiarse enormemente de mostrar menús personalizados a los usuarios conectados.

Por ejemplo, sitios web como una tienda en línea, una plataforma de aprendizaje en línea o una comunidad de sitios de membresía en WordPress pueden beneficiarse de menús de navegación personalizados.

Un menú de navegación personalizado para los usuarios conectados les ayuda a encontrar más fácilmente las cosas para las que se registraron.

Por ejemplo, un usuario de una tienda online puede gestionar su cuenta, o un miembro de una comunidad de pago puede renovar fácilmente su suscripción o ver los cursos online exclusivos que ha comprado.

Por defecto, WordPress le permite crear tantos menús de navegación como desee. Sin embargo, solo puedes elegir mostrar un menú en una ubicación concreta de tu tema de WordPress.

Antes de establecer los menús para los usuarios conectados, tendrá que crear dos menús de navegación independientes. Uno será para los usuarios conectados y el otro para los desconectados. Vamos a los primeros pasos.

Una nota rápida. Los métodos que estamos compartiendo están diseñados para personas que utilizan temas clásicos de WordPress. Si está utilizando un tema en bloque con características de edición completa del sitio (FSE ) a partir de WordPress 5.8, es posible que este método no funcione.

Creación de menús para usuarios conectados y no conectados en WordPress

Para crear menús separados para los dos tipos de usuarios, deberá dirigirse a la página Apariencia ” Menús en el escritorio de WordPress.

Si ya tiene un menú de navegación que utiliza en su sitio web para todos los usuarios, éste puede ser su menú por defecto.

Main menu

Después, puede enlazar el enlace “crear un nuevo menú” para crear un nuevo menú personalizado para sus usuarios conectados.

A continuación, añada los elementos / artículos del menú que desee mostrar a los usuarios registrados o conectados. Por ejemplo, es posible que desee añadir un enlace de cierre de sesión a su menú.

En la parte izquierda de la pantalla puede ver un anuncio / catálogo / páginas de su sitio web. Simplemente marque / compruebe la casilla siguiente a cualquier página que desee añadir a su menú y haga clic en el botón “Añadir al menú”.

Logged in menu

También puede arrastrar y soltar los elementos del menú en la parte derecha de la pantalla para reorganizarlos.

Más abajo en la página, puede elegir una ubicación para mostrar su menú. Pero no necesitas asignar una ubicación a este menú ahora. Lo haremos más adelante en el artículo.

No olvides hacer clic en el botón “Guardar menú” para guardar los cambios.

Para más detalles sobre la creación de menús, eche un vistazo a nuestra guía para principiantes sobre los menús de navegación de WordPress.

Ahora ya puede mostrar diferentes menús a los usuarios conectados. Aquí tienes un resumen rápido de todos los métodos que veremos en esta guía:

Analicemos el primer método.

Método 1. Mostrar diferentes menús a los usuarios conectados en WordPress usando un plugin

La forma más fácil de mostrar diferentes menús a los usuarios conectados es utilizar el plugin de menús condicionales. Por lo tanto, vamos a instalarlo y activarlo primero.

Para más detalles, puede consultar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, tendrás que ir a Apariencia ” Menús desde tu escritorio de WordPress. A continuación, vaya a la pestaña “Gestionar ubicaciones”.

Desde aquí, verá la lista de ubicaciones de menú disponibles definidas en su tema de WordPress y los menús que se muestran actualmente.

Por ejemplo, nuestro “Menú principal” muestra actualmente un “Menú principal”.

Manage menu locations

Ahora, necesitamos decirle al plugin que muestre un menú diferente cuando se cumpla cierta condición.

Para ello, vamos a enlazar el enlace ‘+ Menú Condicional’. A continuación, podemos seleccionar en el menú desplegable el menú de navegación que queremos mostrar a los usuarios conectados.

Select logged in menu

A continuación, enlaza el enlace “+ Condiciones”.

Aparecerá una ventana emergente en la que podrás elegir entre varias condiciones.

Select logged in user aa the condition

Sólo tiene que marcar la casilla situada junto a la opción “Usuario conectado” y, a continuación, hacer clic en el botón “Guardar”.

Ahora puede visitar su sitio web para ver en acción el menú del usuario conectado. También puede salir de su administrador / administración de WordPress para ver el menú de navegación que se mostrará a todos los demás usuarios.

Different menu for logged in users

Método 2. Seleccionar manualmente el menú de conectados en WordPress usando código

Este método requiere que añadas código a tu sitio web WordPress. Si no lo has hecho antes, echa un vistazo a nuestra guía sobre cómo copiar y pegar fragmentos de código en WordPress.

En general, es necesario añadir un fragmento de código al archivo functions. php del tema o a un plugin específico del sitio. Sin embargo, no recomendamos este método porque puede causar problemas / conflictos / incidencias en tu sitio web.

En su lugar, puede utilizar el plugin WPCode.

WPCode te permite añadir fragmentos de código personalizados a tu sitio sin necesidad de editar directamente los archivos del tema. También ayuda a gestionar estos fragmentos de código y garantiza que se ejecutan de forma segura, minimizando el riesgo de romper su sitio.

Para primeros pasos, vamos a instalar el plugin WPCode. Puedes usar la versión gratuita de WPCode, ya que tiene todo lo que necesitas para mostrar diferentes menús a los usuarios conectados.

Una vez instalado, deberá ir a Fragmentos de código + Añadir fragmentos.

Add Snippet button in WPCode

Esto abrirá la galería de fragmentos de código de WPCode.

Desde aquí, puede hacer clic en el botón “+ Añadir fragmento de código personalizado”.

Add Custom Snippet button in WPCode

Entonces llegarás al editor de texto de WPCode.

El siguiente paso es añadir un título al fragmento de código y elegir “Fragmento HTML” en el menú desplegable “Tipo de código”.

Adding snippet title and choosing code type in WPCode

Una vez hecho esto, sólo tiene que copiar y pegar el siguiente código en el campo “Vista previa del código”:

function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
// Logged in menu to display
$args['menu'] = 43;

} else {
// Non-logged-in menu to display
$args['menu'] = 35;
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Así es como se vería en tu editor de WPCode:

The custom HTML snippet in WPCode's Code Preview

Asegúrese de sustituir 43 y 35 por los ID de los menús de navegación que creó anteriormente.

Puede encontrar el ID de un menú de navegación seleccionándolo en la página “Menús”. Verá el número de identificación del menú en la barra de direcciones de su navegador.

Find navigation menu ID

Una vez que se haya asegurado de que todos los datos son correctos, siga adelante y haga clic en el botón azul “Guardar fragmento de código”.

Y ya está. Esperamos que este artículo te haya ayudado a aprender cómo mostrar fácilmente diferentes menús de navegación a los usuarios conectados en WordPress. A continuación, puede que también quieras ver nuestra guía sobre cómo permitir a los usuarios invitar a sus amigos a registrarse en WordPress y cómo dar estilo a los menús de navegación de 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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

97 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Alex

    Thanks for the code – works as it should, appreciated :)

    • WPBeginner Support

      Glad our guide could be helpful!

      Administrador

  3. Paul K

    Great! But where do I find my theme’s function.php?

  4. Clara

    Works great! I have the problem that I have to menus at the top: A headliner menu and the main menu. When I use the Code and the user is logged in bove menus switch to the logged-in menu. How can I adjust the code so that the headliner menu remains the same?

    • WPBeginner Support

      You’re welcome :)

      Administrador

  5. Echo

    Would be much easier if you could do it for a specific menu item rather than an entire menu. What would someone with 499 menu items have to do?

    • WPBeginner Support

      We would not recommend that many menu items as that would be far too many for someone to navigate through which would likely cause an SEO issue if your menu links don’t add value for your visitors

      Administrador

  6. Evaldo Santos

    100%. Just configured it with Sahifa Theme and works like a charm.

    Keep up with this good work.

  7. Bk Millanzi

    this is so helpful, but is there a way to display a username and avatar which can act as a container of other profile menu items, as a drop-down menu?

  8. Amarnadh

    The path you showed is well and good only for just showing custom menus. But what if i want to show my content to a specific logged in user based on his interests. That is in detail, like various deals sites, when we login and save our interests, the next moment we see deals only on that specific topic. Can we make that possible using WordPress plugins.

  9. Sam

    Hey there, thanks for the great work. I have a question about multiple user roles.

    So I have two main menus, Menu 1 and Menu 2.

    I would like all users (logged in or out) to see the main menu unless they have the userole of “Alt”, in which case Menu 1 is replaced by Menu 2.

    How would I go about doing that?

  10. Tendai Mugoni

    It is working, thanks

  11. Curtis

    @ERICLEE You can create a child theme to prevent that from happening. I just added this code and need to do the same thing.

  12. shahzaib sarwer

    can it possible to add the menus in the subscriber profile accept than the home page these menu pages not show on the home page, just on the every subscriber profile. if it possible then please guide me, and tell me how use any pluging for this.

  13. shahzaib sarwer

    can it possible to add the menus in profile of the subscriber in wp site , if it possible so please anyone guide me what i do and how use any pluging of this work.

  14. Yuda

    How can the same be achieeved on a multi-language members site? For example show different menu for users logged in in english and a different menu for users logged in with german?

  15. solomon

    i have added log in menu and logout menu, how do i configure the page for login and log out ???,,

  16. Jan-Paul Kleijn

    First I thought of a plugin. Gotta quit thinking like that.
    Then I saw your post and was sold.
    Thank you for posting this, you helped me very nicely.

  17. Phil

    Thanks so much for that. Works perfectly.

  18. Ariet

    Hello,

    This totally works!
    But it change my footer menu too.. is there a way where my footer manu stay the same?

  19. Tarron Acuff

    So, I have 2 menus. One for the public and another that I would like employees to see when they are logged in. The employee menu would replace the main menu only when an employee is logged in.

    Here is what I am currently using in my functions.php file

    // Set the Role as a body class

    function add_role_to_body( $classes ) {

    $user = wp_get_current_user();

    $user_roles = $user->roles;
    foreach( $user_roles as $role ) {
    $classes[] = ‘role-‘ . $role;
    }

    return $classes;

    }

    add_filter( ‘body_class’, ‘add_role_to_body’ );

    ***Here is what I added for CSS***

    /* First hide the menu items for non “employee” user */
    #top-menu li.menu-for-employee {
    display: none;
    }

    /* Show the menu items for the “employee” user */
    .role-employee #top-menu li.menu-for-employee {
    display: initial;
    }

    When I log in as an employee both menus are showing.

    Thanks in advance.

  20. Wasim

    its not working for me. It display default menu after I add this code, even my primary menu gone.

  21. Joe

    Hi Guys,

    I nice tutorial but i was wondering could you use the same approach to replace a responsive menu at a certain screen size?

    I have two menus but would rather have just one responsive menu at 768 px by replacing the menu with another.

    Thanks

  22. Pet

    Awesome job with your guides. I am building my first wordpress site and I am finding your site incredibly helpful in guiding me along, thank you.

    I really wanted to show different menus for logged in users (like ‘edit profile’) and for logged out users and that brought me here. The code you shared works alright for me. I now have two menus which are showing up nice. However, the last part of the code, add filter string, I believe, is messing me up a little bit. Now, another menu is showing under the sidebar widget. The ‘logged-in’ menu. I am using sydney theme and I have tried to no avail to remove this unnecessary menu. Any idea on how I can make it not display?

    • WPBeginner Support

      Hi Pet,

      Please check Appearance » Widgets page to see if you have a custom menu added as a widget there. If it is there then you can just delete that widget.

      Administrador

      • Pet

        What genius! It worked! Thanks for the wonderful tip!! :-)

      • Jomcy Johny

        Me too have the same problem..Please help me..but I dont have widgets..Thank you..!

  23. Alex Hammerschmied

    Works like a charm…
    Thanks for that.
    Btw i love theses short tutorials ;)

  24. giovanna

    Hi can you help me please? I have another trouble please? I need to hide one menu to all and allow only the vendors to see what I have to do please? what is the specific code i have to use please?

  25. ericlee

    When you modify the functions.php like so- wouldn’t it get wiped when you upgrade your WP next version ?

  26. Ramona

    Will this work for a Buddypress install? Thanks.

  27. Nikhil Chaudhari

    the function set secoundary menu also? i only want to set primary menu. how to do that

  28. Nikhil Chaudhari

    this above function set secondary menu all i want to set only header menu?
    how to do that

  29. Asfaha

    Hi,

    thanks a lot for this solution, I’ve applied and woks perfect and saved me installing one more plugin.

  30. Shafaq

    this is the code for replacing existing menu to logged user menu by addming location top-menu and with menu loggedin no need else statement with this

    add_filter( ‘wp_nav_menu_args’, function ( $args )
    {
    if( is_user_logged_in() && $args[‘theme_location’] === ‘top-menu’ ) {
    $args[‘menu’] = ‘loggedin’;
    }
    return $args;
    });

  31. Ashraf Ali

    ———————————————————–
    function my_wp_nav_menu_args( $args = ” ) {

    if( is_user_logged_in() ) {
    $args[‘menu’] = ‘logged-in’;
    } else {
    $args[‘menu’] = ‘logged-out’;
    }
    return $args;
    }
    add_filter( ‘wp_nav_menu_args’, ‘my_wp_nav_menu_args’ );
    ———————————————————–

    Now how do i get it to work with

    —————————————————

    ———————————————————————————————————————-

    Please Advice

  32. Iqbal Mahmud

    If I want to hide a page from logged out user from a single menu what have to do?

    • Kasper

      You can lock pages to hide them from logged out users. There are several plugins that make this very easy to do. Users Ultra comes to mind.

  33. Zev

    Everything worked perfectly.

    However, I still have the issue of a repeated primary menu in the secondary navigation menu section which I can’t seem to remove (I don’t have a secondary menu set up).

    • Vince

      I’m having the exact issue. The change reflects in the secondary menu location out of nowhere and I too don’t have a secondary menu setup. :/ Please advice how to deal with it.

      Thanks in advance.

  34. Chiranjeevi Vinodkumar

    LISTEN!!!

    Most of us, uses themes.
    So first go to the functions.php of your theme.
    Search with navigation as keyword.

    In case of Shopkeeper theme..

    ==================================================================
    register_nav_menus( array(
    ‘top-bar-navigation’ => __( ‘Top Bar Navigation’, ‘shopkeeper’ ),
    ‘main-navigation’ => __( ‘Main Navigation’, ‘shopkeeper’ ),
    ‘footer-navigation’ => __( ‘Footer Navigation’, ‘shopkeeper’ ),
    ===================================================================

    This is how you look.. so pick the one which is primary, In my case, Its “Top Bar Navigation” hence used “top-bar-navigation”

    I used the following code and worked like a charm!!!

    This is my way of thanking the author.

    Good day !!

  35. Ann Novakowski

    Here’s what worked for me with WP . I used this to create a specific primary menu for logged-in Buddypress users. It will NOT affect my footer menu OR social media menu for any visitors, so everyone sees the same secondary menus regardless of whether they’re logged in or not. This is based on all of the comments above (HT to Fransiska!).

    Added the following to my Child Theme’s functions.php file:

    // CHANGE MAIN MENU =ONLY= IF MEMBER IS LOGGED IN

    function my_wp_nav_menu_args( $args = ” ) {
    if ($args[‘theme_location’] == ‘primary’) {
    if( is_user_logged_in()) {
    $args[‘menu’] = ‘logged-in’;
    }else{
    $args[‘menu’] = ‘logged-out’;
    }
    }
    return $args;
    }

    add_filter( ‘wp_nav_menu_args’, ‘my_wp_nav_menu_args’ );

    • Oliver

      Don’t know what happened why my comment, but –> ” <– these are correct!

    • fidel toro

      thanks!! help me a lot

  36. Matthias Campbell

    Hello,
    I added this code (probably wrongly) in my functions.php within my theme in wordpress editor and now I have a constant 500 server error. Even after removing the code.

    Before this i attempted to create a site specific plugin but that didnt work. Could you please tell me if the snippet requires an opening and closing bracket?
    If so how do i do that?
    My host cant help me now and they’re requesting I pay a programmer to help me for 50Eu per hour. Please help me. Its urgent.
    I am still logged into wordpress but what ever I click I get the 500 error with this specific error.
    PHP Parse error: syntax error, unexpected ‘}’ in line 1194.
    This is because I pasted the snippet after all the text in the functions.php file.
    I then removed the snippet to see if that would fix it, via editor and FTP and I still get the error.
    I look forward to hearing your response.
    Kind regards

    • WPBeginner Support

      It depends on where you are adding the code. If there is a closing PHP tag before it then you need to add a php start tag like <?php

      If this code is the last thing in the functions file then you don’t need to add a closing tag.

      Administrador

  37. Hubert

    If you have multiple menu locations and want to apply different menus for each location you can use the code bellow:

    function my_wp_nav_menu_args( $args = ” ) {

    // Primary menu location
    if( ‘primary-main’ == $args[‘theme_location’] ) {

    if( is_user_logged_in() ) {
    $args[‘menu’] = ‘Primary-Logged-In’;
    } else {
    $args[‘menu’] = ‘Primary-Logged-Out’;
    }

    return $args;
    }

    // Secondary menu location
    if( ‘secondary-menu’ == $args[‘theme_location’] ) {

    if( is_user_logged_in() ) {
    $args[‘menu’] = ‘Secondary-Logged-In’;
    } else {
    $args[‘menu’] = ‘Secondary-Logged-Out’;
    }

    return $args;

    }

    }
    add_filter( ‘wp_nav_menu_args’, ‘my_wp_nav_menu_args’ );

    • Haji

      This does not work, anyone that does know the proper code if you have 2 or more menus?

  38. Ravikant

    Perfect bro .Its work …. awesome work

  39. Leopold

    This was almost too easy!
    Thanks alot for the simple article.

    In this way I don’t have to install any plugin..

    • Chris

      Hi Gaurang,
      I’m curious to know why you feel using the plugin is better, than coding the functions.php file? I was told a while ago to watch how many plugins are actually used for a wordpress site, and the code above seems simple enough; minus the having to monitor every time your theme updates….

      Thanks,

  40. Rub

    Great, how I can use it to show menu for logged user that have certain role?

  41. Kit Johnson

    This worked so simply and neatly. I didn’t think it would be this easy. Thank you!

  42. Jason Sisson

    this is awesome tried it. works. but i also would like to redirect by role
    is that simple or much harder

  43. Ryan R. Bayne

    Thanks. Working with menu functions for the first time.

    Creating the WTG Portal Manager plugin which will allow a portal to be defined very quickly. Every portal having it’s own menu. The plugin make the relationship between portal and menu clearer plus provide other unique options.

  44. veer2412

    how can i show different posts to different users??

  45. veer2412

    thnkx for the help.. but what if i want to show different users different posts on my site.. is there any way to do that using coding??

  46. WPBeginner Staff

    Under Appearance > Menus you need to choose a location for your menu. Seems like there are two areas on your site where you can add menus. So you need to create two different menus and then assign a location to them.

    • Heather Gile

      what would the revised code for this be, if there was a distinction of ‘Primary’ and ‘Top’?
      $args[‘primary-menu’] = ‘logged-in’;
      $args[‘top-menu’] = ‘logged-in’;

      else

      $args[‘primary-menu’] = ‘logged-out’;
      $args[‘top-menu’] = ‘logged-out’;

      ?

    • Kyle

      Wordpress will not let me put 2 menus in my “top header” location. The code you provided works, but it changed ALL of my menus to the logged in or out, and is not displaying my normal nav menu

  47. b2995

    I have a top menu as well as a site menu (under logo). How would I change the code to switch just that top menu. Right now, ALL my menus change.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.