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 WordPressAs 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 menuWhile 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 PageFor 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.