Embedded in the WordPress feature set is a customizable menu that allows users to create default menus based on published pages and categories, thereby allowing them to create their own menu structure. However, there are times when you need something more robust than the default menu options. You may come across a great theme only to realize it doesn’t come with extra navigation menus right out of the box. Coding a menu structure that not only meets your usability requirements but also matches your theme can be a daunting task – especially if this is your first time with WordPress development. With this in mind, we’ve put together a snippet generator that helps you register custom menus for WordPress themes.

Let’s put everything into context before we introduce the tool and explain how you can use it.

What Are Custom Menus and Why Should I Use Them?

You’ve seen them on just about every website. They allow developers to define a structure of their website to visitors, make their content more accessible, and allow users to browse through their web pages easily. Yes, navigation menus do all this and much more.

Everything important about your website is connected to the navigation, from content to the URLs. – Kissmetrics

Menus on websites act as road maps to different areas of your site and give users some insight into what they’ll find on it. Well-designed menus increase the site’s usability manifold which ultimately results in good user experience. Think about it this way, what if you had to browse through a website that didn’t have a navigation menu? Would you want to visit that site again? Furthermore, websites that fail to follow the 3-Click Rule often end up leaving the visitor frustrated.

Aside from the usability bit, navigation menus serve another important purpose – they present your site’s important sections to the visitor at a glance. For instance, this site’s menu gives readers some quick insight into what they can expect to find – a home page, our collection of themes, pricing tables, and the magazine. Additionally, when the visitor hovers over, say, the Magazine section, they’re presented with even more information about the content we publish in it.

As you can see, menus play a key role in helping you deliver positive user experience and lowering your site’s bounce rates. Though WordPress makes it incredibly easy to structure (and re-structure) your default menu bar, some themes don’t offer support for extra navigation menus. So, how would you code a custom menu that will integrate seamlessly with your existing WordPress theme template? Try using this tool!

How Do I Use This WordPress Custom Menu Snippet Generator Tool?

Our WordPress custom menu snippet generator tool is designed to save seasoned WordPress developers from having to write custom code and help first-time theme builders get started with WordPress development. The tool enables developers to generate up to four menus. It requires only the essential fields to output a fully functional custom menu.

Let’s take a look at the individual fields:

• General Tab

  • Theme Slug: The theme’s slug should be inputted in all lowercase letters or numbers (underscores are permitted). It’s used to prefix any functions and variables that could conflict with the WordPress core, themes, or any plugins that you may have installed. In most cases, this is the same string as the text domain but with underscores replacing the hyphens.
  • Text Domain: The text domain is a unique identifier that allows WordPress to distinguish which translatable strings to attribute to your theme and which ones to leave out. Typically, it is a lowercase version of your theme’s name with hyphens replacing spaces. It should match the name of your theme’s folder in the root directory.

• Menu Tab

  • Activate: Check this box to register your menu using the register_nav_menus() function.
  • Slug: Add a suitable slug for your menu. Typically, it is the same string as your menu’s name in all lowercase letters or numbers.
  • Name: Give your menu a name. This is the name that will show up on your site’s back-end on the Appearance > Menus screen. I recommend you use a descriptive name, especially if you intend on adding multiple menus.
  • menu_class: The menu_class argument is a string denotes the CSS class that will be used for the ul element which forms the basic structure of the menu. The default value is menu. To keep things simple, use the default value.
  • menu_id: The menu_id is a unique key that is assigned to the menu that defines the menu’s structure. Typically, this string is the same as the menu’s slug.
  • Container: This element lets you decide whether you want to wrap the menu and, if so, what to wrap it in. By default, the menu is wrapped in div tags. I recommend that you stick with the default value.
  • container_class: This argument lets developers specify which class to apply to the container. By default, the value is set to menu-[menu slug]-container. Be sure to replace [menu slug] with the menu’s slug e.g. menu-menu1-container.
  • container_id: It is a unique key that is assigned to the container. The field accepts a string value.
  • fallback_cb: The fallback_cb argument is used to trigger a function in case the menu doesn’t exist. By default, the wp_page_menu() function will be called. I recommend that you use the default value. If, however, you don’t want to set a fallback then simply set the text field to false.
  • before: This is the text that will appear before the link markup. You can enter any string value in this text field.
  • after: This is the text that will appear after the link markup. You can enter any string value in this text field.
  • link_before: This denotes the text that appears before the link text. The text field accepts string values.
  • link_after: This denotes the text that appears after the link text. The text field accepts string values.
  • echo (true/false): By default, the echo argument is set to true to ensure that the menu is echoed on to the screen. Setting it to false will return the menu instead of echoing it.
  • depth (0 means all): WordPress supports multi-level menus. Setting the depth to 0 means that all of the specified levels of hierarchy will be included in the final output. By default the value is set to 0.
  • walker: The walker argument is an instance of a custom walker class which makes it easier to display hierarchical data and allow developers to traverse the tree-like data structures easily.
  • theme_location: Determines which theme location to use. The value you enter should be registered with the register_nav_menu() function. The default value for theme location is the same as the Menu value specified at the top of this form.
  • items_wrap: Use this text field to set how menu items will be wrapped. The default structure is as follows: </p><ul id =’%1$s’ class=’%2$s’>%3$s</ul><p> i.e. a ul tag with an id and class specified in it that uses the printf() format with numeric placeholders.
  • item_spacing: Allows you to select whether or not to preserve whitespace within the menu’s HTML code. By default, the value is set to preserve. Setting it to discard will remove all whitespaces.

• Code Tab

  • Once you’re all done, hop over to the Code tab. You’ll find text areas populated with custom code snippets for menus.

How Do I Add the Code Snippets to My Website?

Once you have the code snippets, all that’s left to do is add them to your WordPress website. There are a number of ways to add it to your site – using an FTP client, WordPress’ built-in Editor, or through cPanel. You have to:

1. Add the Register Menus code into your theme’s functions.php file.
2. Paste the Display Menu # code to your theme templating depending on where you want the menu to be displayed.

Repeat Step 2 for all of the menus you generated custom code snippets for. Once you’re done saving the updated files, your new custom menus will be available for use.

Conclusion

We hope this tool saves you some time on registering and adding custom menus to your WordPress site. Be sure to give it a try and share your experience with us.

Do you have any questions about the Register Custom Menus code generator tool? Let us know in the comments section below!