Monday , 20 November 2017
Home / Programming / WordPress / Themes / WordPress Theme Menu Support
WordPress Theme Menu Support
WordPress Theme Menu Support

WordPress Theme Menu Support

This tutorial is a part of the WordPress Theme tutorial series. If you would like to see the whole series and the order in which you should follow them, then click here.

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.

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.

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.

Replace it with this.

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.

WordPress Theme Menu Support
WordPress Theme Menu Support

Conclusion

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.

About Jasko Koyn

Check Also

How to add JavaScript in your WordPress Themes

How to add JavaScript in your WordPress Themes

We have some javascript in our theme. So, let’s learn how to add JavaScript in …

2 comments

  1. Honestly this is probably the best wordpress theme tutorial I’ve seen so far. I’m having just a bit of an issue. Your instructions state to replace the HTML code with WordPress PHP code. When I refresh my page It shows what I’m guessing is wordpress data from the nav array. May not make sense without a visual. Not sure if this a new version issue. Any suggestions?
  2. Sir,everything went fine.but,even if i put container to nav ,tree is created with div class=”menu” ul and rest of the menu

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link