Menus are used on any WordPress site to add many elements such as pages, posts, categories, and custom URLs and make it easier for visitors to navigate to different parts of the site.
You can choose where you want the navigation menu to appear on your site. In most sites, your navigation menus are placed in the site header after the site title or logo. You can also add a menu in any other place. For example, you can add a smaller menu that includes links to social media networks in Site sidebar or in the site footer or in the header also above the main navigation menu or wherever you want.
Navigation menus are highly customizable in a WordPress theme through a set of ready-made functions, and in today’s article we will learn how to create and support multiple navigation menus in your WordPress theme.
Steps to create menus programmatically in WordPress
By default, the WordPress system supports the ability to manage the Navigation Bar of a WordPress site with ease and professionalism through the site admin control panel.
But if you are a WordPress developer and need to develop your own WordPress template and make it support custom menus, and control the way these menus are displayed through code, the easiest way to do this is by following the following steps:
- Register the location of your menu(s) using the register_nav_menus function.
- Display menus on the front end of the template in the places you want by calling the wp_nav_menu function
- Use CSS rows and identifiers and write appropriate codes to format your menu in a way that suits your theme’s design.
Below we explain how to accomplish each of these steps in more detail
Recording menu positions in a WordPress theme
In order to display a sub-tab called Lists under the Appearance tab in the WordPress site control panel for your theme, you must first register where the menu or group of menus is displayed within this template.
To do this programmatically in your WordPress theme code, all you have to do is use the register_nav_menus() or register_nav_menu() function to register the name of the menu within the functions.php function and pass the names of the menu positions you want to add to your theme as parameters to the function as follows.
This function is usually linked to the after_setup_theme action hook , which occurs after the template is loaded, or to the init hook , which occurs after the previous hook, that is, after the template is fully loaded and before any headers begin to be displayed.
For example, to register a position named Main Menu and a position named Footer Menu in a WordPress template, we will write the following code in the template’s functions file:
This way our template now supports two menu positions, and you can of course add as many new menu positions as you want this way.
Save the changes you made to the file and now go to your site admin control panel and choose the Appearance > Lists tab. You will find the names of these two lists among the display location options that you can specify for any list you wish to create and add to your site, as shown in the following image:
These positions will also appear to you when you view the template customization page through Control Panel > Appearance > Customization > and choose the Lists tab, where you will find here all the positions available to display lists in the template.
Important note:
There is no need to use the add_theme_support(‘menus’) function to add menu support to a WordPress theme. You can use either register_nav_menu() or register_nav_menus() instead because the menus parameter is read-only and is used to verify that the theme supports a specific feature only. Source
Read more: Learn how to add features to a WordPress theme using the add_theme_support function
Of course, if you create a navigation menu on your site, add certain items to it, locate it in one of these positions, and review your site, you will notice that these menu items will not appear on the site.
Why? Because you have to do another step, which is to determine the place where each list appears, or more precisely, each place the list is displayed from these places that you recorded, and write the code responsible for showing the list in the file designated for the template according to the position in which you want to display your list, as we will explain in detail in our next paragraph.
Display menus on a WordPress site using the wp_nav_menu function
After registering the positions of our menus in the template’s functions function, you need to display the menu in the desired position within the template. To do this we need to use the wp_nav_menu() function , which has the following general form:
As you can see from the code above, this function needs to pass a relational array of values representing multiple parameters for the list. Here is a function for the most important of these parameters that you can pass to the array and the meaning of each of them:
- ‘theme_location’ : A string specifying the menu display location to be used within the theme (theme_location value must be identical to the name you specified for your menu position in your functions.php code)
- ‘ menu’ : This parameter specifies the current menu we are using (we can pass the name of this menu, the menu ID, the nice name of the menu, or an object from the WP_Term class )
- ‘container’ : A string specifying whether to encapsulate the ul list tag in a container. It takes the default value div.
- ‘container_class’: A string through which we specify the CSS class we want to apply to the tag containing the list. By default, the value of this class will be menu-{menu slug}-container
- ‘ container_id ‘ : A text string through which we specify the CSS identifier that we want to apply to the tag containing the list.
- ‘items_wrap’ A string specifying how we want the list items to be wrapped and their default value ul.
- ‘menu_class ‘: A string in which we can define our own CSS class to apply to the ul menu tag. By default, the value of this string is ‘menu’.
- ‘menu_id’: A string specifying the identifier applied to the menu tag ul.
- ‘echo’ : a boolean value whose default value is true and it determines whether we want to display the list or return it.
- ‘fallback_cb’: Its default value is wp_page_menu, which means that if there is no menu specified, a callback function will be activated that displays an alternative default menu that includes links to a set of static pages on your site. If the value is passed to false, no menu will be displayed.
- ‘before’ : A string specifying the text before the link markup
- ‘ after’ : A string specifying the text after the link markup
- ‘link_before’: A string specifying the text before the link text
- ‘link_after ‘: A string specifying the text after the link text
- ‘items_wrap’: This parameter defines what HTML tags surround your menu links. Its default value is
‘<ul id=”%1$s” class=”%2$s”>%3$s</ul>’ - ‘depth’ : This parameter expresses the depth of the list within the hierarchy, or in other words the number of submenus of the current list. If we create one submenu for the current list it means we have a list with a depth of 2 and its default value is zero which means you can create an infinite number of submenus for the current list.
- ‘walker’: An object of the walker class that is generally used to enable developers to traverse and display tree data structures in an elegant manner, here it is used to display submenus with more than one level.
You can create an object or object from the Walker_Nav_Menu class, or you can find a ready-made object and add it to your template files. Then you create a purpose for it and pass it to this parameter to make your list look elegant with its depth and other features.
Usually I use this parameter to apply the Bootstrap library to the list. I have explained a practical example of this class in this article .
- ‘ item_spacing’ : A text string with a default value of ‘preserve’ that specifies whether or not we want to preserve spaces within the HTML tag that is generated for this list. We can pass the ‘discard’ value to it if we don’t want to keep it.
General example of using the wp_nav_menu function:
If you do not pass a value to any of these parameters, it will automatically take the default value assigned to it. For example, to display a list for which the display location was chosen to be the main menu (primary) and make it appear in the header of your site. You must review the template files, edit the header.php file , and write the following code in it. :
Now when you create a list and specify a display location for it in the main menu (primary) and view the site, the list items will appear in the header, but they will be in an unformatted form as in the following image:
When you add a menu to your WordPress theme using the wp_nav_menu() function, you will notice that the function has generated HTML code for this menu. You can see this complete code if you view the source code for the page on your site that displays this list. The code generated by WordPress for my current menu is as follows:
As you can see here we have a set of HTML tags dedicated to displaying an unnumbered bulleted list, and these tags are surrounded or attached to ids and class formatting defaults by WordPress. These rows are useful for formatting this list when needed, and we’ll explain them in more detail in our next paragraph.
Currently, we will add some formatting to the header list through tags, so we will edit the style.css template file and add some formatting to our list:
Now the list will appear in the site header as follows:
In the same way, if you want to make the list for which the display location is specified is the footer list, appear in the footer of your site, edit the footer.php file for the template and write the following code in it:
It is also possible, in a similar way, to format the footer list to appear as desired by adding formats to the template formats file style.css as follows:
Now, when you create any list on the site and specify the display location for it, the Footer menu, the list will appear in the footer of the site as follows:
List formatting in WordPress
As you noticed in the previous paragraph, the wp_nav_menu() function generates a set of menu tags within HTML according to the following general form:
By default, WordPress wraps the elements of each list you add with a set of specific identifiers and classes that you can use in your template’s layout file.
Here is a set of CSS rows that are given to these elements:
- .menu-item This row is added to each menu item.
- .menu-item-has-children Adds the menu item that has children.
- .menu-item-object-{object} This row is added to each menu item if the object {object} is either an article or a classification.
- .menu-item-object-category This row is added for menu items that correspond to categories.
- .menu-item-object-tag This row is added for menu items that match the tags.
- .menu-item-object-page This row is added to menu items that are static pages.
- .menu-item-object-{custom} This row is added for menu items that match a custom post style or custom taxonomy.
- .menu-item-type-{type} This row is added for menu items whose {type} is post_type or taxonomy.
- .menu-item-type-post_type This row is added for menu items that represent post types, such as static pages or custom posts.
- .menu-item-type-taxonomy This class is added to menu items that correspond to custom taxonomy, tags, or classifications.
- .current-{object}-parent: This row is added to the list elements that correspond to the parent element of the current object
- .menu-item-object-{object}: This row is added for each menu item. The object can be either post_type or taxonomy
- .current-{type}-parent: This row is added to the list elements that correspond to the parent element of the current style
- .menu-item-type-{type}: This row is added for each menu item and the type can be either post_type or category.
- .current-menu-ancestor: This row is added to the menu items that are children of the current page being displayed
- .current-{object}-ancestor: This row is added to the list elements that match the child for the current displayed object.
- .current-{type}-ancestor: This row is added to list elements that match the child of the current displayed style
- .menu-item-home: This row is added to the menu items that correspond to the front page of the site
- .page_item: This row is added to list items that correspond to a static page
- .page_item_has_children: This row is added to list items that agree to have a subpage
- .page-item-$ID: This row is added to list items that correspond to a static page with a specific identifier $ID
- .current_page_item: This row is added for menu items that correspond to the currently tamed static page
- .current_page_parent: This row is added for menu items that correspond to the parent of the currently displayed static page
- .current_page_ancestor: This row is added for menu items that correspond to the child of the currently displayed static page
As we mentioned previously, these rows help in formatting menu items, but if you rely on them, you will have to update the formatting file every time a different menu position is set in your site template, so you can create your own rows to format the menu the way you want.
Remember that you can also use custom CSS classes through the wp_nav_menu parameters. This approach can be a good option if you don’t target any of the default classes that WordPress already creates for the exact menu or item you want to style.
For example we will create a custom format class for the List Container element and add it to our template using the following code:
Here we have created the ‘primary_menu_class’ class as an example, but of course you can add the class you want and format the menu by adding the formatting rules you want for this new class within the template’s style.css file.
If you want to change the default categories for the menu and its items instead of assigning new categories, you can use the wp_nav_menu_args filter as follows:
In the previous code, we set the container class to the value theme_location, but replacing the spaces, if any, with dashes – and adding the suffix -nav. Since we have registered in our template two places to display the menu, ‘primary’ and ‘footer’, WordPress will now produce two menus wrapped in the following tags:
Then we can add the exact menu format you want within the template layouts file as usual.
Conclusion
Menus are one of the important things in any WordPress site, and creating a WordPress menu is an easy procedure and is done through the admin control panel. Therefore, when developing a WordPress template, you must take care of the issues of displaying and coordinating these menus that are created in the control panel within specific positions by writing the necessary code in your template files.
To do this, we followed a set of steps, namely registering custom places for the menus through the register_nav_menu function, then displaying the menus through the wp_nav_menu function in any part of your website, and finally formatting this function to appear appropriately for the design of your template as a whole.
