Menus

Depending on your theme, you may have multiple menus in different areas of your pages/posts. Pages can also have different menus. Posts inherit their menus and sidebars from the page set to display “posts.”

We’ll cover how to make and structure menus in WordPress, and then discuss the specifics of where the menus may appear in your particular theme, and how to format them, as well as a few additional classes that can be added to modify your menus.

General Guidelines for Menus

4-7 Top-Level Items

Menus are meant to help users find things easily, they look through a list of items and click the one closest to what they are looking for. The catch is that the average person can only hold 4-7 items in their short-term memory, so your menu should be the same size. If your menu has more than 7 top-level items, users will forget what their options are by time they reach the end, which leaves them feeling frustrated and annoyed. Keeping your menus simple will keep your users happy.

Simplify Menu Titles

Avoid long titles for menu items. Users are scanning your menus for key-terms, so give them what they’re looking for. For instance you make have a page titled, ” Spring 2017 Web Team Meeting Schedule,” but a better menu label might be “Web Team Meetings” or “Web Team Schedule.”

More Small Menus is Better than Less Big Menus

If you have a section of pages that are related and take up a huge section of your menu, consider moving them to their own menu, with a link at the top to get back to your homepage.
comparison of single menu to multiple meus

Use Hierarchy to Show Relationships

If pages have parent-child relationships, use them to structure your menu. You can “nest” a child item inside a parent item by dragging it to the right. This helps users understand how your site is structured.

Creating & Editing a WordPress Menu


Choosing a Menu

The WordPress Menu screen


The WordPress Menu screen

You can create and edit menus through the “Menu” screen, which is access by hovering over “Appearances” in the WordPress dashboard and then clicking “Menus.” If your site already has menus created, it will pull up the last one saved for editing. If you would like to create a new menu, click “create a new menu”; if you would like edit an existing menu, use the drop-down to select the one you wish to edit and click “Select.”

From here you may select the menu you wish to edit or choose to create a new menu

From here you may select the menu you wish to edit or choose to create a new menu


Adding Items to the Menu

You can choose from Pages, Posts, Categories or Custom URLS to add items to your menu

You can choose from Pages, Posts, Categories or Custom URLS to add items to your menu

To the left of the Menu screen, you will see a series of drop-downs. These allow you to add pages, posts, categories or custom URLs to your menu. To add a post or page, click the checkbox next to the item(s) you wish to add and click “Add to Menu.”  They will now appear at the bottom of the menu on your screen.


Reposition Items in the Menu

click and drag to reposition

click and drag to reposition

If you want to change the order of menu items, first click the menu item you want to move. Then drag it to its new location. Click “Save” to save your changes.


DSU Theme-specific Menu Locations

On most themes, the base Dixie-S15, the Dixie-S15 plus Posts, and the Dixie-S15 Blog only have sidebar menus. They require no special formatting, and check “Main Menu” and “Mobile Menu” for whichever menu you wish to appear on mobile screens. The Dixie-S15-schools theme & the Dixie-S15-portal theme both have special use cases.

Dixie-S15-Schools Theme

In addition to the standard sidebar menu, this theme allows for a custom top menu. It requires very specific menu formatting to to work correctly, so you may want to ask the Web Team or your Web Intern to assist you with this. View the images below to learn how these menus are generated.

The parts of the Schools Menu top Menu

The parts of the Schools Menu top Menu

The required structure and classes for the Schools top-menu

The required structure and classes for the Schools top-menu

Dixie-S15-Portal Theme

Choose the display location of your menu

Choose the display location of your menu

In addition to the standard sidebar menus, this theme uses WordPress menus to generate the content for several sections of the front page. Neither of these menus require special structure, but do have some rules. The Quick Links menu should contain 3-5 items total, with no nesting. The Resources menu can have as menu items as you wish, and can have one level of nesting. By default, the Resources menu will divide up the links into three columns. If you have a list you do not want broken up, add the class “break” to the parent item and save. The list should no longer break. You can choose which menu you would like to be the “Quick Links” or “Resources” menu by checking the box that appears when the Dixie-S15-Portal Theme is activated.

The Quick Links menu on the DSu-S15 -Portals theme

The Quick Links menu on the DSu-S15 -Portals theme

The Resources Menu on the DSU-S15-Portals theme

The Resources Menu on the DSU-S15-Portals theme