Without a menu on your website how are visitors supposed to navigate around your content? It’s good to have a few main navigation items at the top of the screen that’s easily accessible to users as they navigate your website.
A good general rule of thumb for the main navigation is no more than 3-5 items including a call-to-action. On our website, for example, we only have a few items in the navigation and then the call-to-action button.
That is a general rule of thumb, though and isn’t going to apply to all websites. If you’re running a blog with several categories that visitors will be looking for then you may have a categories menu item with the categories nested within the top navigation. That would mean when users hover over that menu item then more menu items will show up.
Menus in WordPress are for more than just the main menu, though. You can create different footer menus, menus for a widget, or even menus that you can place above the main header in a top bar area. Menus have multiple uses for any grouping of pages in a specific topic.
Check the footer of a few of your favorite websites. My guess is that you’ll find a topic and then a menu under that topic in more than one column in the footer.
Take HubSpot or instance, this is the footer of their website which contains four columns each with a heading and then a menu.
If they used WordPress rather than the HubSpot CMS (I’m assuming they are) then they would create a separate menu for each of these footer menus. Parts of this help article will cover what you need to do in order to create more complex menus such as that on the HubSpot website.
Table of Contents
- Create A Website Main Menu
- Create A Website Footer Menu
- Manage Menu Locations
- Assign Menus In Your WPHubSite Theme
- Switching Active Menu To Edit
- Advanced WordPress Menu Properties
- Manage Menus In The WordPress Theme Customizer
- WPHubSite Theme Pro Mega Menu
- Video Walkthrough of Creating A Menu
So, let’s get started creating your first menu for your WPHubSite WordPress website!
Create A Website Main Menu
Step 1: You need to log into the admin area of your website if you haven’t already. You can do this by typing in your website URL and adding a /login/ at the end of it. So, it might be accountname.wphubsite.com/login/ or domain.com/login/.
Step 2: Hover over the Appearance item in the side menu and click Menus.
Step 3: Name the first menu you’re creating which in this case is the main menu.
Step 4: Click on the Create Menu button.
Your menu is officially created and saved but there’s nothing in it. You have to add items from yoru website into the menu.
Step 5: Select this Manu as the Primary Menu by selecting this box. This will ensure your menu is placed in the main navigation spot of your website. If you already set up the primary menu when customizing your WPHubSite theme then it will show up automatically.
Note: If you want this same menu to show up as the primary menu and the footer menu then you can select the Footer Menu box also.
Step 6: Select the box next to each item you would like to add to this menu. You can use the tabs under each section (Most Recent, View All, and Search) to find more pages to add to your navigation. You can also add Posts, Custom Links (type in your own URL and name), or even Categories from your blog.
Tip: If you’d like to create a top-level menu that isn’t functional and nest functional pages under that menu item you can. To do this you would create a custom link with the name you’d like and then just type in # for the URL.
Step 7: Click the Add to Menu button to add the selected items to the menu. They will immediately move over to the menu without the screen reloading. You can continue to do this for each section (Pages, Posts, Custom Links, and Categories).
Now that you have items in the main menu, it’s time to format them.
Step 8: Click one of the items that you added to the menu, preferably one with a long name. This will expand a box.
Step 9: Type in a new name for the menu item that’s shorter and more concise. WordPress will initially use the title of the page but that name is often too long. You’ll want to change the name to something that’s one or two words, no more.
Step 10: Drag any menu item up or down to order items and you can even drag them left or right to nest them. Tallowsllow you to nest menu items within another item or even within an item that is already nested. In the example above on the website, the blog will not show up on the main menu but instead only show up when a user hovers over the Home menu item. For mobile the user must tap on the Home menu item.
Step 11: When you’re done renaming, organizing, and nesting menus items then click Save Menu to save all your settings. Once your menu is saved then it will either show up on your website in the spot you’ve set or you’ll have to set it up in the WPHubSite theme customizer.
Create A Website Footer Menu
You created the primary menu for your website, now it’s time to create a separate menu for your footer. Keep in mind that you can also use the same menu for the primary and footer (instructions above).
Also, you might be setting up a lot more than just one footer menu so this is only the start. Instead of naming it “footer menu” you’ll likely name it something that makes sense to that group (such as “Company”). Oh, and you’ll also keep at this same process until you end up with the number of footer menus you’ll be placing in your footer.
Now for creating the footer menu!
Step 1: Click the create a new menu link.
Step 2: Name the new menu you’re creating to something that you will recognize for the footer, it doesn’t have to be Footer Menu as shown here.
Step 3: Click the Create Menu button. Either the top button or the bottom button will do the same thing. This button also turns into the Save Menu button which is also available at the top and bottom or your convenience.
Step 4: Select the items you’d like to add to the footer. Remember from above, you can add Posts, Custom Links, or Categories too. Just click into each section to find new items to add to your menus and don’t forget about the tabs too (Most Recent, View All, and Search).
Step 5: Click the Add to Menu button.
Step 6: Select the Footer Menu item so when you enable a footer menu in your WPHubSite theme (if you haven’t already) then it will show up automatically.
Step 7: Click on the box of the longest name you have.
Step 8: Rename the long name to something that’s either one or two words long.
Step 9: Click the Save Menu button.
That’s it! Now you have a footer menu that you can set in the WPHubSite theme customizer if you haven’t already.
Manage Menu Locations
This section is a duplicate functionality of some settings in the edit menus tab. It allows you to quickly set what menu you’d like to use for the primary menu and the footer menu. These are similar to the boxes you can select when you’re editing each menu.
It’s a bit more convenient in here because switching menus in the edit menus tab is a bit more cumbersome. Here’s how to access these options and change the assigned menu for each location.
Step 1: Click the Manage Locations tab in the Menus section of the admin dashboard.
Step 2: Select the menu you’d like to assign as the primary menu.
Step 3: Select the menu you’d like to assign as the footer menu.
Step 4: Click the Save Changes button.
That’s it! Now when you assign what menus you’d like to show up and how you’d like them to show up in the your WPHubSite theme, you’re all set.
Assign Menus In Your WPHubSite Theme
When you assigned the main menu of your website it likely showed up somewhere in your WPHubSite theme unless you disabled the menu. WordPress placed the menu for you automatically because you set the primary menu in the menu settings.
Since WordPress places the primary menu, the options you have is to configure where your primary menu shows or to disable it altogether.
The opposite is true for the footer menu. It’s disabled by default and you have to actively enable it in the theme. Once you enable the footer bar and select where to put the footer menu, the menu you selected for the footer will show up (like magic!).
Step 1: In the Appearance menu on the sidebar, click Customize.
This will open up the WPHubSite Theme customizer which gives you tons of customizations options. Your’e here looking for just one part, though.
Because the header will use whatever menu you set as the primary menu, there’s no setting to choose a different menu. Just make sure you’ve selected a menu as your primary menu. That means you’re going to choose to turn on a footer menu so that the menu you chose for your footer will actually have somewhere to go.
Step 2: Click the Footer option in the customizer.
Step 3: Click on the Footer Bar option. After we do this you’re welcome to go back into the Footer Widgets option and turn on the widget columns in the footer. That way, you can place widgets in the footer and yes, there is a menu widget that lets you choose any menu you’d like. You could have one just like HubSpots that looks like this:
Step 4: Choose one of the two options for the footer bar. One on top of the other or side by side. When you select one, more options will automatically appear below the layout choice.
Step 5: Choose where you’d like to place your footer menu. You’ll need a menu that’s set as the footer menu in order for your menu to show up. You can also configure a few other visual settings below the section choices.
Note: You can also add anything else you’d like to the other section or leave it empty. This is a good place to put a copyright box or perhaps terms of service and privacy policy. Whatever you want can go in here including custom HTML.
Step 6: Click the Publish button once you’ve set everything the way you’d like it.
That’s it! You’ve assigned the footer menu to the footer of your website.
Switching Active Menu To Edit
This one is easier to do in the customizer but if you’re working with menus in the admin dashboard then it’s a bit trickier.
Step 1: Choose the menu you’d like to edit next.
Step 2: Click the Select button.
We’ve deemed this one tricky because when you select a menu from the drop-down menu it doesn’t auto-refresh. Other places in WordPress do auto-refresh so it makes it a bit jarring. You have to manually click the Select button which is a bit odd.
It functions this way because this menu editing screen is a remnant of older WordPress versions whereas the ability to edit menus in the customizer is relatively new.
Advanced WordPress Menu Properties
There’s a lot more to links than you might think.
- Do you want the link to open in a new tab/window?
- What about accessibility of links?
- Can you customize links with custom CSS in WordPress?
- How about a description when someone hovers over a link?
All that can be changed in menu links with WordPress. In fact, there’s more control of links in the menu than anywhere else in WordPress. This section will help you turn on the advanced menu properties so you can update a lot more menu item properties.
These options only show up if you’re in the Menus section of WordPress. You should already be there if you’ve done anything in this section. Also, you can turn on these settings in the admin dashboard or in the Menu customizer.
In The Admin Dashboard
There are two places you can enable and update the advanced menu properties, in the admin dashboard and in the theme customizer.
First up, updating the advanced WordPress menu properties in the admin dashboard.
Step 1: Click on the Screen Options tab at the top of your WPHubSite WordPress admin dashboard. This menu changes depending on the section of the dashboard you’re in so be sure you’re in the Menu section.
Tip: This tab has lots of useful features you can turn on and off for every screen in the admin dashboard you’re in. It’s unique for each section of the dashboard so check out what’s in there.
Step 2: Select the options you’d like to add into the menu items options. They’re all useful to add and you don’t have to fill them all in. Here’s what each one does:
- Link Target: Allows you to select a box whether the link opens in a new tab/window or not. this will add target=”_blank” to the link’s HTML.
- Title Attribute: When visitors to your website hover over a link with a title attribute, a box with the value will pop up which adds more clarity to the link.
- CSS Classes: This is an advanced option that lets you specify an exact CSS class for this link. You can then use that CSS class to format the link however you’d like with CSS.
- Link Relationship (XFN): This option specifies the relationship between your page and the page being linked to. You wouldn’t use it for links to your own website but if you linked to an external website, it’s a good idea to use this. Some of the most common values you would put in this field are nofollow, noreferrer, or noopener. When you place items in this field there should be nothing in between them. So, it would look like this rel=”nofollow noreferrer noopener” in the HTML code this inserts. You can learn more about all the fields this option can take from W3 Schools.
- Description: This one isn’t supported in the WPHubSite theme so don’t worry about putting it in. Some WordPress themes support it for one reason or another but there’s no reason for it in most circumstances.
Step 3: Click the Screen Options tab again to close the drawer.
Step 4: Click on any of the menu items in one of your current links to expand its options.
Item 5: Selecting this box will make the link open in a new tab/window. This is only good if the link is to an external website, not so much for your own website.
Item 6: Put any additional descriptive content that will help lend context to the link for users who hover over the link for long enough.
Item 7: If you’d like to do advanced formatting on this link, include a custom CSS class in this box. You must be comfortable with editing CSS if you’re going to use this option.
Item 8: Put any link relationships you’d like in this box separated by nothing but a blank space. See more values you can place in this box from W3 Schools.
Item 9: If you even turned this one on, leave it blank. It won’t do anything for you and there’s no reason to bother with it.
In The Theme Customizer
All the same advanced menu properties can go into menu items when editing the menu from the WPHubSite Theme customizer. You can even turn items on and off similar to how the options drawer is used in the menu screen.
Here’s how to do the same thing in the customizer once you’re in the Menus section.
Step 1: There’s a gear icon in the top right of the customizer pane. Click that to expand a section that allows you to turn on and off advanced menu properties.
Step 2: Select all the properties you’d like to turn on for menu items. It’s recommended you turn on Link Target, Title Attribute, and Link Relationship (XFN). If you want to do advanced customizations with CSS then also turn on CSS Classes.
Step 3: Click the gear icon again to minimize the advanced menu properties.
Now the options show up when you expand any of the menu items in any of your menus.
Manage Menus In The WordPress Theme Customizer
Yes, this is different than assigning menus in your website theme. How you ask?
The process of creating menus, moving items within the menu, and removing menu items can be done in the admin dashboard but it can also be done within the WPHubSite theme customizer.
This is how.
Add A Menu In The Customizer
Step 1: From the WPHubSite WordPress admin dashboard click the Customize link under Appearance.
Step 2: Click the Menus option.
Step 3: Click the Create New Menu button (if you’d like to create a new menu) or you can edit a menu you already have (that will be covered more below).
Step 4: Name the menu whatever you’d like but make sure it’s something you will recognize when you need to use the menu.
Step 5: Click the Next button.
Step 6: Click the Add Items button.
Step 7: Click the items you’d like to add to the menu. You can click into any of the categories to find what you want from pages and posts all the way to categories and tags.
Note: As you add items they will show up under the menu name. You can then reorganize the items by dragging them up and down, and left and right (to nest menu items).
Step 8: This is optional but you can also assign the menu to the primary menu spot or footer menu spot. If you already have something set in either of these places it will show up in parenthesis. If you select an option then it will replace your current setting.
Step 9: Click the back arrow button when you’re done. All your changes will be saved and you’ll see the menu you just created highlighted.
That’s it for adding the menu item, now onto editing a menu item in the customizer.
Edit A Menu In The Customizer
This section will continue where we left on from the last section but you can also start from right here.
Step 10: Click the menu you’d like to modify.
Step 11: You can drag menu items up and down or left and right or even add new items with the Add Items button. It’s just like creating a new menu in the customizer.
Note: Notice how item 11 is nested under Home? When the cursor hovers over Home then the nested item(s) show up. You can nest several items if you’d like or even nest items inside of a nested item for more complex (and difficult to use) menus. Can you tell we don’t like nests inside of nests?
Tip: Be sure to click the Publish button if you make any changes. You can tell if you’ve made changes whether the Publish button is filled with color or gray.
WPHubSite Theme Mega Menu Pro Module
A regular menu is great for most websites but sometimes a menu calls for more information than a menu can hold. This is precisely the reason the mega menu was created.
What’s a mega menu? It’s a menu that when items are hovered over a larger menu of items pops up to allow for more information to be placed into a menu. You can place many links, maps, images, or more in a mega menu whereas a regular menu only allows for a few items while still looking good.
Here’s an example of a mega menu.
This is a simple mega menu built with the WPHubSite Theme Nav Menu pro module. It’s a way to build a mega menu with many different formatting options. You can even build a mega menu with a part from the WPHubSite Site Builder.
This is a mega menu built with the Site Builder. It can use menus, forms, maps, or any other Site Builder module.
The WPHubSite Theme has a mega menu built right in to let you create amazing mega menus with lots of information.
You can learn all about creating a mega menu with the Nav Menu WPHubSite Theme pro module.