How to Create Custom Menu Structures in WordPress

Posted on February 23, 2015 by in Tips & Tricks | 38 comments

How to Create Custom Menu Structures in WordPress

WordPress creates menus for you based on your pages and categories. This menu structure is often generic and can get a little out of hand. Adding a new category will change your menu structure and this can sometimes get ugly. Sometimes you want more control over how the menu looks and works. Sometimes you have to take matters into your own hands.

WordPress allows you to create your own menus and menu structure. Using the menu editor you can create multiple menus and then assign them to specific menu locations on your website. How? I will show you.

Creating Menus Manually

WordPress has a powerful system built in for creating advanced menus. It works by drag-and-drop and is easy to set up. You can create multiple menus and choose which menus to use. How many you can display at once depends on your theme. I will use Divi in this tutorial, which will display three menus.

How to Create Custom Menu Structures in WordPress - Creating Menus Manually

In your dashboard go to Appearance and select Menus.

Creating a Menu

How to Create Custom Menu Structures in WordPress - Creating a Menu

First, give your menu a name and click Create Menu. Once you’ve done this you’ll be able to add items to the menu. On the left you have your pages, links, and categories. The categories will also display your custom post types and taxonomies.

Select Pages and click on View All.

How to Create Custom Menu Structures in WordPress - Creating a Menu 2

Select every page that you want to have in your menu. If you want them all just click Select All. Next click Add to Menu.

How to Create Custom Menu Structures in WordPress - Creating a Menu 3

There are several page locations in the menu structure. The first is the Primary Page location. This is the location where all of the pages line up on the left side. If I moved a page to the right by dragging it and dropping it, it will be placed in the Sub Item location. I can have multiple sub items and I can make sub items have sub items. Let’s see how this is done.

Structuring the Menu with Drag and Drop

How to Create Custom Menu Structures in WordPress - Structuring the Menu with Drag and Drop

In order to create your menu structure, drag and drop the menu items where you want them. Here is where it gets interesting. You can drop menu items as a page or as a sub page.

How to Create Custom Menu Structures in WordPress - Structuring the Menu with Drag and Drop 2

To make a page, drop the menu item to be in line with the items on their left side. To make the page a subpage, move the menu item to the right. You can see in this example that I’ve created a page called Sample Page. I then moved a page called Sub Page 1 into the sub item area of Sample Page 1 by dropping it under Sample Page 1 and moving it to the right.

I’ve also moved a page called Shop by dragging it to the location above a page called Testimonials. I left it as a primary page.

I came back to Sample Page 2. I dragged Sub Page 2 to the right and dropped it in the Sub Item location under Sample Page 2. I then dragged Sub Page 3 and dropped it, but this time instead of dropping it in the Sub Item area of Sample Page 2, I dropped it in the Sub Item area of Sub Page 2. This created a sub page of a sub page and allowed me to build a structure of how the pages are related.

Another way to move them is by clicking on the word Page next to the down arrow and then selecting the Move option you want.

Removing a Menu Item

Now notice that I have two pages called Home. One is the page that WordPress creates and the other is a page that I created in order to have a link to back to the home page. Since WordPress does this automatically, I can delete the one I created.

How to Create Custom Menu Structures in WordPress - Removing a Menu Item

To remove it from the structure, click on the word Page on the right side on the item you want to remove. This opens the attributes of that item. Simply click on Remove.

Renaming the Navigation Labels

How to Create Custom Menu Structures in WordPress - Renaming the Navigation Labels

In this example my page’s names are Sample Page 1 and Sub Page 1. I don’t want those names to be what shows in the menu. I can change this by changing the Navigation Label. Highlight the name in the Navigation Label text box and change it to the name you want to have shown in the menu. This will not change the name of the page, but it will change the name that shows on the menu. This is a handy feature as it allows you to label your structure in a way that is easy to understand without having the rename your pages.

Handling Sub Pages

How to Create Custom Menu Structures in WordPress - Handling Sub Pages

You can restructure your menu’s sub pages easily. By using drag and drop you can move entire sub blocks at once by grabbing and dragging the first item in the sub block.

How to Create Custom Menu Structures in WordPress - Handling Sub Pages 2

Here I created a new menu and placed Sample Page 2 as a sub item of Sub Page 1. However, I decided that it should be a sub item of Resources. Instead of moving each of Sample Page 2’s sub items one at a time, I can move the entire block at once. By grabbing Sample Page 2 and dragging it I also moved Sample Page 2’s sub items, so I moved the entire sub block in one move.

How to Create Custom Menu Structures in WordPress - Handling Sub Pages 3

Using Links

How to Create Custom Menu Structures in WordPress - Using Links

You can also create a link to be used as a menu item. Simply select Links, paste in the URL, type in the text that should show on the menu, and click Add to Menu. You will have to create the links separately for each menu that you create.

How to Create Custom Menu Structures in WordPress - Using Links 2

Once you’ve added the link it works like any menu item, so you can move it and change its attributes.

Using Categories

How to Create Custom Menu Structures in WordPress - Using Categories

You can also use categories as menu items. They work the same as pages, so you can choose which categories to use and drag and drop them anywhere you want them.

Menu Settings

How to Create Custom Menu Structures in WordPress - Menu Settings

At the bottom of the menu structure you will see the menu settings. Here you can choose whether or not it will automatically add new pages to the menu. Keep this unselected if you want to have full control of your menu. You can also choose where the menu appears within your theme. If you don’t make a selection then the menu will not appear on your site. I’m choosing this to be the primary menu.

Save Menu

How to Create Custom Menu Structures in WordPress - Save Menu

Don’t forget to select Save Menu before exiting this screen. If you do not, then you will end up having to do the work all over again.

Testing the Menu

How to Create Custom Menu Structures in WordPress - Testing the Menu

You can see in this image that the menu works the way I wanted it to. If there were any issues I would go back and make the changes I wanted. One thing to notice is the name of the page hasn’t changed, but the name in the menu did change. If I wanted the name of the page to change I would have to do that on the page itself.

Using the Custom Menu Widget

How to Create Custom Menu Structures in WordPress - Using the Custom Menu Widget

You can also place your custom menus in your sidebar using a custom menu widget. Just drag the widget to your desired sidebar location and choose the menus you want to display.

How to Create Custom Menu Structures in WordPress - Using the Custom Menu Widget 2

The links from the menu you choose will appear vertically in your sidebar. Like most widgets, you can give it a title. You can place as many menu widgets as you want. I placed all three of my menus just to show what they look like in my sidebar. Of course you don’t have to use a menu that was made for the other three locations – you can create a menu specifically for your sidebar. It’s a great way to build a navigation structure into your sidebar.

Types of WordPress Menus

Many themes from Elegant Themes have a structure for three menus: Primary, Secondary, and Footer. Each of these menus can be specially designed to make the best use of their positioning. The placement and types of menus will vary depending on the theme you’re using. Here’s a look at the menu structure for the themes Divi and Twenty Fifteen.

Primary

How to Create Custom Menu Structures in WordPress - Primary

The primary menu is you main form of navigation on your site. In the theme I’m using it is the menu closest to the logo. It has the largest text of your menus. It should include the basic navigation structure that your visitors will expect: a link to your home page, about, contact, blog, resources, etc. It really depends on your audience and the purpose of your site. Try to keep it simple and easy to understand.

Secondary

How to Create Custom Menu Structures in WordPress - Secondary

The secondary menu has a smaller font than the primary menu. In the theme I’m using it’s above the header. It should include items that you don’t want in your primary menu but you want to be convenient for your visitors.

Footer

How to Create Custom Menu Structures in WordPress - Footer

The footer menu of course goes in the footer of your website. I’ve chosen to keep the footer simple. I only used the most prominent links and I did not include sub menus. This keeps the footer clean and easy to use. Of course what you need here will depend on your site and your visitors, so feel free to include links and categories.

Manage Locations

How to Create Custom Menu Structures in WordPress - Manage Locations

You can create as many menus as you want, but depending on what your theme will allow, you can only display a few of them at a time. The theme I am using will allow me to display three menus. In the menus screen, click on the tab Manage Locations. This tab allows you to choose where your different menus will appear. You can choose which of your menus is the primary menu, secondary menu, and the footer menu.

Social Links

How to Create Custom Menu Structures in WordPress - Social Links

The Twenty Fifteen theme has two menus: the Primary Menu and a Social Links Menu.

How to Create Custom Menu Structures in WordPress - Social Links 2

To create the Social Links menu, I created a new menu called Social Links. I then selected Links in the left navigation panel and added the URLs and names of each social network. Next, I selected Social Links Menu and saved the menu.

How to Create Custom Menu Structures in WordPress - Social Links 3

This added social icons with links to the sidebar. For links it doesn’t recognize (like the fake one that I made up for Google +) it places a circular symbol with a dot inside.

A Few Quick Tips for Creating Great Menus

  • Use menu names that describe to you what the menu is for.
  • Create names in the structure that users will understand easily.
  • Organize links is order of importance.
  • Don’t use more than three layers deep in the navigation structure.
  • Navigation should be intuitive, clear, and consistent.
  • Use categories and sub categories for large numbers of links

Wrapping Up

WordPress does a decent job of automatically creating menus based on your pages and categories, but the larger your site gets, the messier your menus can get. Letting WordPress take control of your menu system can eventually wreak havoc on your navigation structure. Using the built in menu editor you can create effective navigation systems for your site that are clean and neat.

Your turn! Have you created custom menus for yours or your clients’ sites? Did you use the methods I described here? Do you have anything to add? I’d like to hear about it in the comments below!

Article thumbnail image by Vasya Kobelev / shutterstock.com

38 Comments

    • Thanks Richard, great thing to mention! I just found out about Maxmegamenu too, and love it! It’s really simple to use and has so many options! 🙂

      I also like navception (https://wordpress.org/plugins/navception/), very useful when you have larger menu’s then WP can handle 😉

      By the way, I ONLY work with custom menu’s, never let them be generated by WP.. Too bad Menu management is such a drag in WP still, wish they would improve that…

    • Agree, or the even better menu plugin UberMenu.

      • That plugin is the better by far, but my plugin is free

        • Agree for the second time. Also, the learning curve for UberMenu is much steeper too. I would say that for most, your plugin will be more than enough… love them both though!

    • Im desparate to change the font in my footer menu in Divi theme. Why isnt this possible? I have Divi booster too and this doesnt even offer this option.

  1. pretty useful guide…all you need a little bit of knowledge of CSS so that you can style it..according to your requirements..

  2. Nice timing on this. I recently wanted to add a direct link to our Teamspeak channel in one of the menus we have, so when they click on it TeamSpeak opens to that specific server (e.g. ts3server://78.46.68.166?port=9987&channel=prolive_blau&channelpassword=aibrgather).

    However, WordPress always tacks on ‘http://’ before every link, rendering the TeamSpeak one useless. Is there anyway to fix this? I’m aware of a few Teamspeak widgets, but I’d rather have this in the menu.

  3. I had an issue with my menus with Diva. After adding a certain number of menus and submenus, I was unable to add more. There was a limit. I had to contact my hosting company and they helped me by creating a phprc file for the settings below:
    suhosin.post.max_vars = 5000
    suhosin.request.max_vars = 5000

  4. I’m pretty far on the basic user end of wordpress, we have people in our operation that do this work. However, I’m a regular reader, this blog is great for keeping me informed about what is possible. I don’t know how hard it would be for you guys to drop in a few more examples of finished product though, not just for this blog entry, but in general. I’m more of a reader so that I can tell folks “heh, we should do that”. You guys mostly focus on the nuts and bolts of how to, but screen shots or links to finished products would be great!

  5. Great information, thanks. I’ve been doing just that, but find it a real pain to add a post to a menu. When selected, it pops to the bottom of the list and then you have to gradually slide it up into position. It works, but is rather time consuming. I’m just a simple blogger, and don’t know any programming at all.

  6. Awesome article

  7. I was hoping to get more out of this post than just basic WordPress instructions on creating menus that can be found anywhere. I was hoping for some clever CSS tricks or Javascript effects to make nice drop downs or expandable/collapsable menu items.

  8. I’m not sure why there’s so many negative comments on here about this being a basic tutorial or no mention of plugins.

    1. WordPress has a solid built in menu system. Why not utilise it?
    2. Yes it’s basic but everyday so many people get into this industry without knowing the simple things.

    I like the article because there’s so many “advanced guides” or “ultimate lists” that there’s very little for the absolute beginner. I got no value from this article but I respect the author for writing a well structured and informative piece which will really help many many people to advance their blogging skills.

    • Wow Glen, I just read your note and I had the same exact thought! I just started a website for tutorials and DIY projects. I want to address the bare basics of tons of things and your post hits the hammer on the nail. Check out http://www.chickenscratchdiy.com. (Remember it is still in the building phases, but gladly take constructive criticism along the way. I am trying to figure out my menu structure and now I am struggling with getting my posts to show up on my pages. This tutorial made me really start to think about switching to categories for my menus, but I am not sure if I want to have a static front page or have new information every time I post on my home page. So many questions and decisions and each one seems to take a day or two sometimes. Any suggestions of which would be the best plan of attack?

      I am not sure why this particular area seems to be difficult for me and I refuse to higher someone to fix this problem. It’s a DIY website I am offering so I need to DIY for me!

  9. I love the social links menu, would be cool to have something like that in DIVI.

    Would also be nice to be able to add more social media links to the standard DIVI theme.

  10. Wow great! I had no idea I could do that with Divi! Looks like I have some work to do!
    Thanks
    Will

  11. This is a great piece of knowledge that you have presented. Thanks.

  12. You are a star, Brenda! My first website was created for me by a website designer and adding items to the Menu is a cinch. I’m working on my second website which does not require many bells and whistles and the menu so far has been simple with a focus on easy navigation.

    Your post is going to be useful as I plan my Footer menu and tweak the presentation. Thank you!

  13. My web person has left the business and I’m learning to manage on my own. I thought this was a terrific article and I even understood most of it! Thanks so much.

    • Nice Tutorials

  14. Hi Brenda
    Thank you for the guide of the menu.
    You write that your guide is from DIVI.
    I miss a guide for the menu in DIVI shown in your demo
    How do I get that menu?
    Do I need to install another plugin ?

    How do you avoid when your menu/submenu/submenu goes til the right and is hidden for the user?

  15. i am using the mega menu of Elegant Themes, it’s working great… you can even add some simple html code to implement pictures and / or videos. I haven’t tryed to add php code yet though…

    • Hi BuilderX

      Where do you find this Mega Menu of Elegant Themes

      Do you mean the Mega Menu who is free for WordPress?
      Regards

  16. Hi there, I am busy customizing my theme that allows 2 menu’s. When i select my primary and secondary menu it doesn’t save. When in the customize view, it changes the preview but as soon as i click out or select a different page then it falls back to the default and onto one menu. how do i lock this in or edit the css/php pages instead?

  17. Hi Brenda,
    Great tutorial. Can you tell how can I add CSS to any of these custom menus.

    Thanks for sharing your professional experience!

  18. Is it possible to change number of colums in mega menu? So, I want to use mega menu with just 3 columns.

    • That’s what I’d really like to know! I need 3 columns too.

  19. Great stuff! I’m first time site builder using Divi theme. Is there a way to delete the secondary menu and control where I want the footer menu to be located?

  20. I am using Twenty Fifteen Theme, and would like to have an extra menu, at the top of the page, to be fixed. The menu should contain in Icon, similar to the logo of the website, cart contents, my account etc.Any suggestions?

  21. Hi Brenda,
    I’m a newbie, using the freebie… I have two sites in two different languages. I put in a custom link and it shows up in the menu structure in the ‘edit menus’ page. But it doesn’t show up on the site. I want it to be in the navbar. I don’t like having a sidebar so all my pages are full width.

  22. When I add a page to the menu structure, I always have the same image associated to the menu structure on the home page of our site. Someone else set this up so I am not sure why it does this. I searched for the image in the files and media and cannot find it – does anyone have any advice to get the image I would like (associated with page) as the image for that menu item on the homepage? Thanks!!

  23. Hi there!

    Who can help please?! I am new to this field. I have my site a month ago. I created my menu repeatedly but for an unknown reason, click to the menu… “Oops! That page cant be found” is coming in all the page in my menu and I cant find the reason.
    Thanks for your help!!

    manny

  24. Dear all,
    I recently changed my website theme from The Style to Extra. Nevertheless, almost all of my posts don’t correspond now to my menu structure. For instance, under the Vinos menu you can get items that should be under Viajes, Novedades, Cafés and so on.
    How can I fix this problem since the themes’ integration did not take place?

  25. Please could you let me know if I can create a left sidebar with Divi?

  26. I really got help with my Divi installation from the free conditional menus plugin at https://themify.me/conditional-menus
    You can simply define what menu is the main menu on different pages.

    • Nathan B. Weller

      Looks like a pretty awesome tool Hannu, thanks for sharing.

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest