How to Create a Simple and Dynamic Navigation Menu in WordPress

I have recently started with WordPress development and so far it has been a good ride. But it just doesn’t seem enough sometimes. I find myself wanting to do more and that’s why I have taken to writing about the work I do.

Blogging about my work helps in two ways. It channelizes my thoughts into perspective and it also gives me the opportunity to contribute to the ever so generous WordPress community. Like recently  wrote about WordPress Nonce

I have noticed that more often than not we have clients requesting for changes in the theme’s design. Requests may include tweaks to the layout, changes with the color scheme used and sometimes the modifications are related to the menu. I happened to work on one such requirement that of customization of the navigation menu and that’s what the post today is about.

What to Expect From This Post?

• Step by step creation of a simple navigation menu and files that need to be taken into account while doing so.
• Inclusion of a dynamic menu based on logged in user.

Which Files Will Be Needed for Modification?

• functions.php – To register the menu
• template file – To display the menu

Steps to Create Navigation Menu Using Child Theme

Step 1: Register Custom Navigation Menu

The primary step is to register the navigation  menu using the register_nav_menus() function. This needs to be registered in the functions.php file in your child theme and preferably run on ‘init’ hook. Let’s take a look at an example

register_nav_menu('primary-header-menu',__( 'Header Menu' ));

In this example, we are registering the primary header menu. We can also register multiple menus at a time.

register_nav_menus(array(
    'primary' => __('Primary Menu', 'My_First_WordPress_Theme'),
    'secondary' => __('Secondary Menu',       'My_First_WordPress_Theme'),
    'My_custome_menu' => __('finally Menu', 'My_First_WordPress_Theme')
));

On adding this code to the functions.php file the menu will be added under Appearance –> Menus –> Theme Locations.

Step 2: Display the Custom Navigation Menu

We can display a custom navigation menu anywhere in a theme. Let’s say for example we want to display the menu in footer than we will need to override the footer.php template in the child theme using the following code.

wp_nav_menu( array( 'theme_location' => 'primary' ) );

Step 3: Style the Custom Navigation Menu

If we want a specific look for the website we can style the navigation menu by referencing custom CSS classes in the wp_nav_menu function call in the previous step.

wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'my_css_class' ) );

Note

• Here ‘primary’ is the name used while registering the navigation menu in step 1.
• While ‘Primary Menu’ is the name that will be displayed in Appearance –> Menus –> Theme Locations, where menu related links and pages are being set.

Dynamic Navigation Menus Based on User Role

Now that we have completed creating a custom navigation menu let us take a look at how to display different a different navigation menu to different users based on their role.

If you do not particularly enjoy coding then you can heave a sigh of relief as here we’re going to use an out of the box solution. This functionality can be achieved using the Nav Menu Roles plugin available on wordpress.org

Here’s how you will have to do it

• Download and install the plugin.
• In the website’s back end go to Appearance –> Menus
• Now select the menu item based on your requirement
• Here you can select the display mode as ‘Logged Out Users’, ‘Logged In Users’ or ‘By Role’.
• If you select ‘By Role’ as your choice of display mode then you can select one or more roles defined in the system to whom the menu will be displayed. If you wish to enable visibility to all, then just select ‘By Role’ and it will be visible to all.

So that was about adding a simple and dynamic navigation menu to your WordPress website. I’m new to the blogging scenario so if there’s something that you have not understood let me know through the comments section and I’ll be happy to elaborate.