Creating conditional navigation menus

We discussed the importance of navigation menus in the previous recipe. The items in the navigation menu are also important in modern sites due to the dynamic nature of their content. Modern sites like to involve users in site functionality rather than providing static content. A high percentage of sites provide different content for different users or user types. So, the menu is no longer a static one. We need to load user-specific menu items or menus to allow access only to the content for each user or user type.

In this recipe, we are going to create multiple navigation menus and display them conditionally based on the user role.

Getting ready

Open the code editor and make sure you have access to the theme files in your local or external WordPress installation.

How to do it...

We have to create multiple navigation menus. Follow these steps to create menus before loading them conditionally inside the theme:

1. Log in to the WordPress Dashboard as an administrator.
2. Click the Appearance menu.
3. Click the Menus option.
4. Click the create a new menu link.
5. Add a unique name to the menu. In this case, we're using WPCookbookMenu1.
6. Click the Create Menu button.
7. Add items to the menu from Posts, Pages, Custom Links, and Categories by selecting them and clicking the Add to Menu button, as shown in the following screenshot:

8. Click the Save Menu button to save the menu.
9. Follow the same process from steps 4 to 7 and create two menus with different menu items and menu names.

Now, you should have three menus listed inside the Select a menu to edit drop-down field. Follow these steps to display the menus conditionally to different user roles:

1. Go to the twentytwenty theme folder using the file manager and copy header.php file
2. Go to twentytwentychildtheme folder and paste the header.php file
3. Open the wp-content/themes/twentytwentychild/header.php file with your code editor.
4. Find the following code block, which is used for displaying the default menu:

wp_nav_menu(
   array(
     'container' => '',
     'items_wrap' => '%3$s',
     'theme_location' => 'primary' ) );

5. Replace it with the following code to dynamically load the menu based on user types:

$roles_menus = array('subscriber' => 'WPCookbookMenu1', 'administrator' => 'WPCookbookMenu2') ;
 $menu_name = 'WPCookbookMenu3';
 foreach ($roles_menus as $key => $menu) {
   if(current_user_can($key)){
     $menu_name = $menu;
   }
 }

wp_nav_menu(
   array(
     'menu' => $menu_name,
     'container' => '',
     'items_wrap' => '%3$s',
     'theme_location' => 'primary' ) );

6. Save the changes to the file.

Now, you need to view the home page as an administrator or subscriber as a normal user. If you only have the admin user on the site, use the Users section in the backend to create a new user with the Subscribe role for testing. You will see different menus displayed for each of the three user types.

How it works...

We can create an unlimited number of menus in the WordPress menu section and assign them to different menu locations in the theme. In this scenario, we wanted to change the top menu for different user types and show different menu items. So, we created three menus called WPCookbookMenu1, WPCookbookMenu2, and WPCookbookMenu3.

The menu of the Twenty Twenty theme is loaded from the header.php template. So, we copied the template into the TwentyTwenty Child theme folder with the same path. Then, we removed the existing menu generation code and added custom code to include the conditional checks.

In the first part of the code, we created an array to store user roles and a menu name to display the respective user role. Next, we used a foreach loop to traverse through the array and check the permission level of the current user with the current_user_can function. Once a match was found, we changed $menu_name to a role-specific menu while keeping WPCookbookMenu3 as the default value for $menu_name. The last part of the code is the same as the original code in the Twenty Nineteen theme, except for the addition of the 'menu' => $menu_name parameter and the removal of the theme_location parameter from the wp_nav_menu function.

The menu name changes based on the user role, which is used to conditionally display the menu. When a matching user role is not found, it will display the WPCookbookMenu3 menu for guests and logged in users with other roles.

Before moving on to the next recipe, replace the header.php file inside the child theme folder with the original file from the Twenty Twenty theme. We're doing this since we want to use the original theme for the next recipe.