Menus are some of the most common elements on websites. With , you can easily customize menus and choose from multiple display options if your theme supports it. However, if you want to use menus in a custom location, you’ll need to edit your theme files and add the .
Combining this function with register_nav_menu, you will be able to create and place menus anywhere on your website. Adding and configuring these features is relatively easy, even if you’re not a developer. Also, you can edit the menus directly from your WordPress dashboard.
In this article, we will talk about how the WordPress wp_nav_menu function works. We’ll show you which arguments and classes work with wp_nav_menu, and then explain how to use the function with your theme. Go for it!
wp_nav_menu is a function that can display custom menus in WordPress. Unlike , which displays a list of existing pages, wp_nav_menu only works with custom menus.
You can add the function to any of your theme’s template files to control where you want the menu to appear. Here’s a quick example of what the function looks like without any specific parameters:
wp_nav_menu( array $args = array() )
You will need to specify which menu you want to display for the code to work. In practice, an example wp_nav_menu function in a page template would look like this:
wp_nav_menu( array( ‘theme_location’ => ‘custom-menu’) );
A wp_nav_menu function can include multiple parameters. In that example, we use theme_location to specify the name of the custom menu we want to use.
If you don’t feel comfortable adding code to your website, you can opt for instead. Some tools will allow you to create and place custom menus, just like using wp_nav_menu.
You can also use some . If you already use one of these tools, check if it offers the custom menu feature.
WordPress wp_nav_menu Parameters and CSS Classes
Most WordPress features offer several default parameters to modify their effects. In the case of wp_nav_menu, you have both parameters and CSS classes. Let’s start with the first.
wp_nav_menu parameters
You can customize the wp_nav_menu function using one or more parameters. Here are the available options:
- ‘menu’: indicates which menu you are using. You can specify a menu using an ID, a slug, a name, or an object.
- ‘menu_class’: Set the CSS class for your menu. By default, the function will use the class menu.
- ‘menu_id’: Specifies the ID of the menu. The default value or ID is the menu slug with a number added or incremented.
- ‘container’: Choose the type of container to use for the menu. By default, the function uses containers Div.
- ‘container_class’: sets a CSS class that is applied directly to the menu container. By default, that menu class will be menu-{menu slug}-container.
- ‘container_id’: sets an ID for the menu container. As with the menu ID, the container will use its default incremented slug.
- ‘fallback_cb‘ – If WordPress can’t find the menu it wants to display, this parameter tells it what other item to display.
- ‘theme_location‘: if you register a custom menu using register_nav_menuthis parameter will display it.
- items_wrap‘: By default, your menu will be displayed in the format of unordered list (ul). This parameter allows you to configure how to wrap the menu items.
- ‘item_spacing‘: Most menus use white space to separate items. If you want to disable that white space, you can set this parameter to discard it.
There are a few extras we didn’t mention, including options to add text to the menu. However, the parameters mentioned above are the main elements that you will use when adding custom menus to a theme.
This is an example of a function that uses multiple parameters:
‘custom-menu’, ‘container_class’ => ‘menu-class’ ‘fallback_cb’ => ‘wp_page_menu’ ) ); ?>
If the number of available parameters seems overwhelming, don’t worry. In most cases, you will only use the parameters theme_location Y container_class. That makes setting up the feature remarkably easy.
wp_nav_menu CSS classes
When you use the wp_nav_menu function, it automatically applies a series of CSS classes to each displayed menu item.
Here are the :
- .menu-item: This class is automatically applied to each menu item.
- .menu-item-has-children: Applies only to menu items with subitems.
- .menu-item-object-{object}: Applies to all menu items. The placeholder for object it can be a post_type or a taxonomy.
- .menu-item-object-category: These menu items correspond to a specific WordPress category.
- .menu-item-object-tag: menu items that correspond to a WordPress tag.
- .menu-item-object-page: menu items within static pages.
- .menu-item-object-{custom}: elements that correspond to custom post types.
- .menu-item-type-{type}: Applies to each menu item. The placeholder for Type can be post_type or taxonomy.
- .menu-item-type-post_type: elements that correspond to any post_type.
- .menu-item-type-taxonomy: elements that correspond to any taxonomy.
As you can see, there is a lot of overlap with the wp_nav_menu CSS classes. The vast number of options at your disposal means that you can be hyper-specific when using CSS to configure custom menus.
Remember that you can also use custom CSS classes with the wp_nav_menu parameters. This approach can be a great option if none of the default classes target the exact menu or elements you want to style.
How to create and customize a menu using the WordPress wp_nav_menu function?
Now that you know how the wp_nav_menu function works, it’s time to learn how to use it within your theme. Let’s start by talking about wp_nav_register.
Step 1 – Create a custom menu using the wp_nav_register function
As we mentioned earlier, wp_nav_menu does not allow you to create custom menus, but instead allows you to place them. That means you have to do the menus manually before using that feature.
wp_nav_register allows you to create or “register” menus for a specific theme. You will have to edit the file functions.php about the topic to use it.
Before you get down to business, we recommend setting up a child theme if you’re not already using it. Working with a child theme will prevent any code changes in the theme from disappearing when you update it. It is also advisable to make a full backup of your website before changing essential files.
Once this is resolved, you will need to access your theme’s functions.php file. The easiest way to do this is by navigating to the page Appearance -> Theme File Editor on the control panel.
The theme editor should open your active theme and you can select the functions.php file using the menu on the right.
Alternatively, you can access functions.php using the File Transfer Protocol (FTP). We recommend this method if you prefer to use a full text editor. You’ll only be adding a single code snippet, so WordPress’ built-in code editor should suffice.
Navigate to the end of the file and add the following code:
function wpb_custom_new_menu() { register_nav_menu(‘custom-menu’,__( ‘Custom Menu’ )); } add_action( ‘init’, ‘wpb_custom_new_menu’ );
You will have to modify the slug of the personalized menu and the name of the menu, which would be the field custom menu. However, you can set any name for the custom menu.
Save the changes to the functions.php file. Now it’s time to edit which items will be included in the new menu.
Step 2 – Edit Your WordPress Custom Menu
To edit the custom menu you just set up, go to Appearance -> Menus. Find the section Menu settings at the bottom right of the screen.
That section should include the new menu location you registered in the first step.
To edit the items that location will display, choose a menu using the option Select a menu to edit: or create a new one.
Next, choose the items you want to include in the menu, using the list on the left, and rearrange them in the section menu structure.
Each menu item includes a display name and a link. When you’re happy with your selections, remember to check if your new custom menu is active in the menu settings. If it is, it saves the changes to the menu.
Step 3 – Use the wp_nav_menu function to display the new menu
At this stage, you should have a menu ready to be registered in your theme. However, even though the menu exists, it won’t appear anywhere until you use the wp_nav_menu function to specify its location.
You need to add the wp_nav_menu function inside a page template to place the custom menu. The page template files you have access to will depend on the theme you are using.
go to Appearance -> Theme File Editor to access these files in the control panel. the section of Theme Files to the right contains a list of all the files you can edit from this screen.
In our example, we have selected the single page template of our theme. The code you need to add to the template should look something like this:
‘custom-menu’, ‘container_class’ => ‘menu-class’ ‘fallback_cb’ => ‘wp_page_menu’ ) ); ?>
Before you save your changes to the template file, remember to update the placeholders with your custom theme slug and any other parameters you want to use. In our example we include the parameters container_class Y fallback_cb.
However, the code that is used can be as simple as:
‘custom-menu’ ) ); ?>
The position of that code will determine the location of the menu on the page. If you’re not sure how that location works, you can experiment with different locations within the template file.
We don’t recommend changing any other part of the code when editing the template files, unless you know what it does. Since you’re only adding a few lines of code, you can remove them if there are any errors.
After editing, check if the menu loads by visiting one of the pages that use the template you were working on. If the menu isn’t showing, there may be a bug with the slug for the theme_location parameter, so go ahead and come back to…
Facebook Comments
Disqus