How to Display Different Menus For Different User Roles If Logged In or Out Without Using a Plugin

On this post, we show you how to display different menus for different users on your WordPress website on condition if they are logged in or not without using any plugin at all. If you’re not too good with coding, don’t worry because the process is fairly easy and anyone can do it following the instructions.
Displaying different menus may be useful, for example, if you have a multivendor platform such as Dokan, where you want to display different menus for: 

  1. Logged in Vendors
  2. Logged in Customers
  3. New visitors who are not registered or aren’t logged in.

In my case, I was building the menus based on the factors above since I was building a multivendor store using Dokan Pro.

Let’s dive right it.

Since we are not using any plugin, we will be editing our WordPress theme files. If you’re new to this, worry not. I’ll explain it like you’re 5. 🙂  The file we’ll be editing is the functions.php file. 
It is always a great idea to create a child theme and then make edits to it. This way, your customizations are not overwritten and remain in place even after a theme update. 
To create a child theme,  I recommend Child Theme Configurator but you’re free to use any plugin of your choice. After creating Child theme, activate it. 

1. Creating your Menus

Obviously, you need to have your menus ready. If you don’t have these yet, on your WordPress Dashboard,  go to Appearance > Menus. Create your menu(s) and save. Note the menu ID at the end of the URL.  As shown below, my menu called ‘Logged in Customer’ is ID number 41.

2. Customizing the Child Theme Functions.php file.

To start customizing, on your WordPress Dashboard,  go to Appearance > Theme File Editor as shown. 
Next, select your child theme as indicated in the screenshot below. This is very important, and proceed to select the function.php file. 

3. Editing the Functions.php file.

After selecting the functions.php file on your child theme, add the following code at the end of the existing code. 

function my_wp_nav_menu_args( $args = '' ) {
    if ( is_user_logged_in() ) {
        $user = wp_get_current_user();
        if ( current_user_can( 'customer' ) ) {
            // User is logged in and is a subscriber
            $args['menu'] = '41';
        } elseif ( current_user_can( 'vendor' ) ) {
            // User is logged in and is a vendor
            $args['menu'] = '39';
        }
    } else {
        // User is not logged in
        $args['menu'] = '21';
    }
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Be sure to replace the user roles and menu ID fields with what you have on your website. In my case, I am using the user roles customer’ and ‘vendor’. and my 3 menu IDs are ’41’, ’31’, and ’39’

If you only want to show a different menu for those logged in/out, then your code would look as below. 

function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) { 
    $args['menu'] = '39';
} else { 
    $args['menu'] = '21';
} 
    return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Again, remember to replace the menu IDs with what you have on your website.

Save the changes by clicking ‘Update File’ and you’re done. Test your menus. They should now display differently depending on the user role and if they are logged in or not. 

That’s all! 

Need help setting up your website or a Multivendor platform using Dokan? Reach out via e-mail on our Contact Page or via WhatsApp using this link and we'll be happy to help!

Leave a Reply