A How To Guide on Building Dynamic Menu in WordPress Pages

Everything associated with WordPress CMS has always been exciting and beneficial. If you too own a WordPress powered website then you might be definitely familiar with the simple-to-use and highly intuitive menu system that’s included by default in WordPress. It is due to the existence of this menu system that the task of managing the website’s menus becomes a breeze. Available since the release of WordPress version 3.0, this menu system has served as a handy toolkit for adding custom menus to all the widgetized regions within your site’s theme including the header, sidebar etc. All in all, you can conveniently add certain additional menu areas to the theme installed for your WordPress website. 

What has been covered in this post?

Despite the fact that WordPress’ in-built menu system has served as a handy option for tweaking the menus displayed on multiple web pages, what if you’re inclined on hooking a dynamic menu in accordance to a specific set of posts/pages? Well, this is exactly what I’ve looked into here. It is through this post that I’ll be helping you understand the process of creating a dynamic menu that needs to be incorporated for certain web pages/posts.
 

Dynamic Menu- What is it and why is it needed?

Dynamic menu is a type of menu that allows you to maintain the hierarchy of menu items of your WP theme that are displayed on a specific page. Typically added in the header section, dynamic menu can also be added into the footer or sidebar of the website. The term “dynamic” means that all the new menu items are being displayed automatically each time a new sub-page is being added within the WordPress admin area. Therefore, you can save yourself a lot of headache associated with creating a menu item of the newly added sub-page for the website. The menu items will be displayed by default after the successful creation of the sub-page.
 

Now, let’s take a look at the process of creating a dynamic menu in WordPress

As the very first step, simply log into your website admin dashboard and go to Appearance-> Menus. A screen similar to the one displayed below will appear on your monitor:
 
 
On the above screen, for the “Menu Name” section, simply enter the name of the dynamic menu item(s) that you’re interested in creating. For instance, in this tutorial, I’ve name the dynamic menu as “Main Menu”. Now, simply click on the “Create Menu” button for completing the process of creating a new dynamic menu. A screen exactly similar to this one will appear on your monitor:
 
 
On the above screen, select the checkbox for “Automatically add new top-level pages to this menu”. With this, each time you create a new subpage, the menu item for the same will be created by default. On the contrary, if you’re inclined on defining the location for adding the dynamic menu item(s), then you simply need to select any one of the two options viz: Primary Menu and Top Menu; available under the “Theme Locations” section.
 

Every WordPress theme renders different support for creation of a dynamic menu

While some WordPress themes will allow you to add a dynamic menu in the main menu, others would permit you to add the menu within the footer. There are fewer chances of finding WordPress themes which enable you to add a dynamic menu to the website’s sidebar.
Let’s take an example. I’ve activated the default WordPress Twenty Fifteen theme for my site. Now, after logging into my site’s admin dashboard and clicking on Appearance-> Menus, a window similar to the one shown in below screen-shot is being displayed:
 
 
As is visible on the above screen, for the Menu Settings label, under the ‘Theme Locations’ section, two options are available viz: Primary Menu and Social Links Menu.
 

Displaying the created dynamic menu item(s) in a WordPress Page

For showing up the added dynamic menu item(s) in your site’s sidebar or widget area, all you need to do is simply add a simple lines of code in your theme’s functions.php file. But, before that let me make you familiar with WordPress’ built-in function called the wp_nav_menu(). Well, while this function is a must-have for creating the dynamic menu item(s), it also makes a call to the custom menu in addition to displaying the created dynamic menu. Amongst the wide range of parameters included within this function, the ones holding prime importance are explained as under:

• theme_location– this is the parameter which calls the menu that has been hooked to the specified location. However, if the location for displaying the dynamic menu doesn’t exist, you’ll be required to create one, followed by registering the same with register_nav_menu(). Just place the below line of code in your theme’s functions.php file and the newly created dynamic menu item(s) will be displayed in the theme’s sidebar:

<?php wp_nav_menu(array('theme_location'=>'sidebar')); ?>
 

• menu– this is the parameter which calls the created dynamic menu by slug, ID or name.

 
With that we’re done!
 

Conclusion

The flexibility associated with creation and display of dynamic menu item(s) in WordPress pages is worth an experience. I’m sure the above post would have enabled you to dig deeper into the same and you’ll have got all set for displaying a dynamic menu at preferred locations within your web pages.
 
Author Biography:
Samuel Dawson has extreme experience in the field of web design & development technologies. He is working as web developer in Designs2HTML Ltd, emerging markup conversion firm involved in the process to convert psd to responsive html5. Samuel also loves to share information with others.