Having a dynamic theme is important. It allows the user to customize your theme to their liking. In this tutorial, we’re going to learn how to add WordPress theme menu support. This will allow our users to change the items in the menu with their own titles and links.
Adding WordPress Theme Menu Support
Before we start displaying the menus, we need to tell WordPress our theme supports menus. This is very simple to do with 1 function. At the end of our functions.php file add this line of code.
add_theme_support( 'menus' );
The add_theme_support() function is a function provided by WordPress. Our theme can support multiple things from WordPress like custom backgrounds, thumbnails, etc. In our case, we want our theme to have WordPress theme menu support. There is no need to reinvent the wheel and make our own menu system when WordPress has one. We simply pass in the name of feature we want to support. For a list of features you can support, then click here.
Now, we’re able to start registering menu spots. Our theme currently only has 1 menu spot which is at the very top. If you have multiple menus in your theme, then you can register multiple menus. To register our menu(s), we use the register_nav_menus() function provided by WordPress. Add this bit of code at the end of functions.php file.
register_nav_menus( array( 'main' => 'Main Nav' ) );
This function takes in 1 argument. It takes in an array of menus we would like to register. In our case, we only have 1. So, we create 1 item. The value of each item is the human readable name that will be displayed when the user is configuring their menus. The key is considered the slug name for this menu. The name you give it should be clear as to where this menu would be placed.
Displaying The Menus
We’ve added WordPress theme menu support and registered our menus. Now we can finally start displaying these menus. Open up your header.php file and locate this bit of code.
<li id="current"><a href="index.html">Home</a><span></span></li>
<li><a href="style.html">Style Demo</a><span></span></li>
Replace it with this.
'theme_location' => 'main',
'menu' => 'main',
'container' => 'nav' )
The wp_nav_menu() function displays a menu created in the Appearance > Menu panel. It has an array of parameters. We won’t be defining every single one, but only the ones we need to define for this tutorial. Let’s go over each one
- theme_location – The location in our theme to display. In our case, this would be the key we used when registering our menus.
- menu – The menu that is desired.
- container – Should our menu be wrapped in div or nav tags?
For our container, we were using <nav> tags in the HTML version, so we’ll be using <nav> tags in the WordPress version, too.
Refresh your page and you should be able to see your menu in action. Our theme does not support multi-level menus. So, if you created a multi-level menu, then you’ll have to remove the lower level menu items. This is not a WordPress problem, but simply a CSS problem. If you know how to add low level menu items in CSS, then go ahead and add that feature. You can add or remove items in the menu panel and your menu should update automatically on the front end.
Here’s what it looks like.
Adding WordPress theme menu support is one way to make our theme dynamic. We’ll be making our theme more dynamic as we go along. If you would like more information about menus, then click here.