How to Create Custom Menu Structures in WordPress

Posted on January 16, 2019 by in WordPress | 15 comments

How to Create Custom Menu Structures in WordPress

Many people only think about the WordPress menu at the top of the site. They try to stuff it full of as many links as can fit in the header bar. That does not necessarily give your users the best experience. You can use menus not only to direct your users around your site, but also to provide contextual resources that might be overlooked if they were stuffed alongside dozens of other links. With a custom menu structure, the menu interface can be used to spruce up your entire site, not just the top of it.

The Default WordPress Menu

If there is no menu specified to go into the Primary Menu location, WordPress generates a menu of every Page on a blog by default. If you have lots of Pages made, that menu can get awfully crowded.

Creating a Custom WordPress Menu Structure

That menu is unusable, really. Outside of being organized in alphabetical order, there’s no rhyme or reason to it. And not every Page needs to be in your site’s main menu anyway. So we need to create some menus and make sure that we organize them in a way that makes sense to your users.

Creating a WordPress Menu

To begin creating your menu, click on Appearance – Menus in your WordPress dashboard.

Creating a Custom WordPress Menu Structure

Once there, you see the not-so-clear WordPress menu creation screen. In it, you have 4 main points of interest.

Creating a Custom WordPress Menu Structure

  1. Menu Name – This name is not front-facing. It is only for your organizational needs.
  2. Pages, Posts, Custom Links, and Categories – You can include menu items to anywhere on your blog (individual posts or pages, as well as whole categories). If you want a menu item as an external link, use the Custom Links section.
  3. Automatically Add Pages – If you want all new Pages you create to be added to your menu, leave this checked. Very few times is this a good option.
  4. Display Location – Your options may vary from theme to theme, but these are the places within your site that your menu can appear in full. The Manage Locations tab is an extension of this.

To create the menu itself, simply select anything from the left side (1) and press Add to Menu (2). It will appear under the Menu Structure heading to the right, and it can be expanded to show other options that can be changed on an item-by-item basis (3).

Creating a Custom WordPress Menu Structure

The Navigation Label field is the text that will appear in the menu. For instance, if you want the page titled Login to appear in the menu as Member Area, you would put Member Area in this field. A link to the original page with its original name will always appear at the bottom so you don’t lose track of what you have renamed.

When you’ve added all the items you want, just press Save Menu. The menu will immediately be live in whatever location you specify.

Creating a WordPress Menu with Hierarchy

Not every link you have in a menu will fit on a single menu bar. If you want to have submenus (on click or on hover), you can do that. You do it exactly like you did above, only you add in a single step.

When you’ve hit the Add to Menu button, and the new item has appeared, you will be able to drag and drop it beneath the item you want as its parent. For example, if you want a custom link to appear when people hover/click on Login, you would create the link in the left sidebar, press Add to Menu, and then drag the new link until the dotted outline appears to indicate the hierarchy you’ve created.

Creating a Custom WordPress Menu Structure

If you want multiple sub items, you can do the same thing over again. Only this time, drag the sub item beneath a sub item.

Creating a Custom WordPress Menu Structure

And when you save the menu to push it live, you will see it in whatever location you’ve chosen.

Creating a Custom WordPress Menu Structure

Using Multiple WordPress Menus

One of the biggest missed opportunities with site navigation is limiting yourself to a single, all-purpose menu at the top of your site. Sure, mega menus have a time and place where they work great, but they aren’t always the answer. That said, if you break your navigation down and organize it with a custom menu structure, your visitors will be able to find their way around more easily. Which increases retention and…well, you know the rest.

As above, we want to create a new menu. Navigate back to the Appearance – Menus page and click the Create New Menu (1) link. You will now get a blank menu template, and it will ask for a name (2). Remember, these names are for you, so name it something you’ll recognize. Menu 2 doesn’t tell anyone what it is. Sidebar Widget – Account Management does.

Creating a Custom WordPress Menu Structure

You will now have a menu selection dropdown, where you can choose which menu you want to edit. This is where a useful naming convention comes in handy. In terms of adding content to the menu, that’s different on everyone’s site. But for this example, we’ll go wtih the Account Management idea. For that, people will need a Login/Logout link and maybe a User/Account section. Let’s make those have a parent/child relationship, too.

Creating a Custom WordPress Menu Structure

You may notice that we called this one Sidebar Widget, but there isn’t an option for Sidebar as a menu location.

Creating a Custom WordPress Menu Structure

That just means we’ll have to manually place the menu, so leave all the options unchecked and press Save Menu. When saved, this menu will appear nowhere on your site. Because you have a primary menu already, and you didn’t tell this one where to live. So let’s fix that.

Adding a WordPress Menu to the Sidebar

You will need to jump tabs now and go to Appearance – Widgets. On this page, you see all of the widgetized areas that your site can handle. Which ones appear vary theme to theme, but the general Sidebar option is usually there. And again, some themes might have extra widgets, but the default Navigation Menu widget is always there, too. So we will use those.

All you have to do is find the Navigation Menu widget and drag it to the Sidebar area. It will immediately appear on your site, but by default, there’s nothing showing.

Creating a Custom WordPress Menu Structure

After that, it’s as easy as typing in the widget title that you want people to see and selecting the menu to display.

Creating a Custom WordPress Menu Structure

Save the widget. The title appears in the widget’s header, and you can see the changes live on your site.

Creating a Custom WordPress Menu Structure

Easy peasy. Now, you will probably need more menus on your site. Maybe a footer menu so that people can find the different sections of your website, or maybe you want all of the pages together. You could list the forums, social media links, email forms, and live chat on a menu that displays easily on your site without needing a separate plugin for it.

Just repeat the steps above, and then place the new menu in a widget in your Footer area.

Creating a Custom WordPress Menu Structure

Wrapping Up

Using the WordPress menu tool to create a custom menu structure can make the UX of your site much better. Without any extra tools of plugins, you can provide resources to your users anywhere they need them. The WordPress menu can do great things, remember, and not just at the very top of your website.

Do you have a custom menu structure on your site? How did you set it up?

Article featured image by Mr Kreetha Mahamud /shutterstock.com

Check Out These Related Posts

15 Comments

  1. Hi, great tips – thanks, this very useful information for me

  2. This should be a must update in the theme, the design and customizations of the menus are very limited right now and makes that all the divi sites looks very similar (at least in the menus). I will love more this this amazing theme if the team can do something with this in the visual builder.

    • Jorge – totally agree! Love Divi and the team behind it.

      Adding flexible Menu/Navigation options in the Divi Builder would be brilliant – they are all looking the same. It’s one area Divi needs to be improved.

      • Agree totally! More menu design options please!!!!

  3. I have a site that has details about various places to see, stay and eat near Houston, TX. With over 50 locations, each with places to see, stay and eat, building the menu on tha backend is tedious. The Appearance > Menu screen has over 200 items, so organizing the menus is very time consuming.

    Any suggestions, other than patience?

    • You can make a page with 10 rows of 5 columns that will cover the 50 locations and in each location you create a page with places to see stay and eat.

      You just can’t place 200 items in the menu…. people will get lost.

      Just Funnel your users to their desired location this way.

      Have a great day!

      Andy

    • Hi David,

      Just create a page with 10 rows of 5 columns or 6 columns (this will cover your 50 locations). In each box add module of TEXT like “Discover Houston” + module a Picture of Houston.

      Link each location to a page like “Discover Houston” and on that page ADD 1 row that has 3 Columns of Places to see + stay + eat. and anchor each box to a line to the page.

      Basically 200 items in a menu is just too much. Just funnel your visitors with this method. and it is good for SEO 😉

      Hope this helps

      Have fun!

      Andy

  4. Good info and presentation. Would like to see a Divi tutorial on how to add an address bar within a website page. i.e. its easy to place a link within a webpage, but how about a dropdown menu within the page? That way page builders could place link bars anywhere within the page. Just a consideration thought. Thanks for the continued informative tutorials.

  5. They (Carpetcleaninghaddontownship) said that their focus is on the header builder so I really hope that it arrives very soon.

  6. Hi,
    thanks for this wonderful and very informative blog. It is really very helpful for all and mainly for WP-beginners. I loved this article and going to share this with my friends. I am sure it will be helpful for them too.

  7. Great tips!! thanks for sharing with us.

  8. Hi
    Very good information. Also very well explained. Overall I found it very helpful. Thank you.

  9. Love wordpress, so modular, and easy to use, thanks for this article. always referring our users to your articles!

  10. Divi has Mega Menu in it as well. You can add the code to make it display different ways.

Join To Download Today

Pin It on Pinterest

читать далее