UW Brand

Setting a site-specific menu

Site menu panes are located on the left-hand menu bar and can be accessed under Appearance > Menus (Figure 1). The following examples were taken from the CCRI site.

This image highlights that Menu is located under appearance on the left hand menu bar.

Figure 1. To edit the site’s menu pane, go to Appearance > Menus.

I. Changing out of the default UW menu

Prior to creating a new custom menu, most sites default to the UW’s main menu (Figure 2a). This is mostly so there is something there in the menu pane location when drafting a site page.
 

This is a screenshot of the main UW page, showing the default menu.

Figure 2a. This example visualizes the main UW menu, set as the default menu on all UW sites.

 
To create a site-specific menu, just click create a new menu located on the Menu page. (Figure 2b).
 

This is a screenshot of the menu page on wordpress showing the layout of the default UW menu.

Figure 2b. All site menus are set as the main UW menu by default, as shown above. It can easily be changed to site-specific menus by choosing to “create a new menu”.

 

II. Maintaining a menu pane

When editing a specific menu you’ve already made, you should land on the specific menu when entering the Menus page. But if not, simply click the dropdown next to the label Select a menu to edit and then select the menu you desire. As shown in figure 3, for the CCRI page that would be the menu titled “CCRI (White Bar)”
 

This is a screenshot of the menu page on WordPress and shows the dropdown next to select a menu to edit

Figure 3. This image visualizes how to view the menu options catered to the CCRI site. Choose the menu named “CCRI (white bar)” next to “Select a menu to edit”.

 

III. Editing menu organization

The organization of menu items, such as the order of information and page hierarchy levels, can be manually structured. A thorough instruction is depicted in Figure 4. Drag and drop the pages from the left column (highlighted in green) into the right column, marked Menu Structure (highlighted in yellow).

Two of the four menu item categories, in the left column, were used for the CCRI site: Pages and Custom Links. Pages list all the site pages created, and Custom Links allow users to navigate to external links outside of the site and/or to add (unlinked) top level menu items used as section labels.
 

The image is a screenshot of the Menu page under Appearance in WordPress and highlights the left column in green and right column in yellow.

Figure 4. The screenshot above depicts a demonstration to manually structure the menu order. Drag and drop menu items from the green highlighted column into menu structure, highlighted in yellow.

 

IV. Arranging menu hierarchy

To arrange the hierarchy of menu items, place sub-menu items below each top-level item. In the CCRI menu (Figure 5), labels CCRI, Research, and Research to Practice are top-level (yellow) while their respective subpage items are placed below them (green).
 

This image is a screenshot of the Menu page under Appearance and highlights sub-level menu items in green and top-level menu items in yellow.

Figure 5. The graph above displays the hierarchy menu items. Sub-level menu items (green highlights) are indented just below each top-level menu items (yellow highlights).

 

V. Unlinked menu labels

Custom Links were used to set the top-level labels in the CCRI menu pane. The menu items were dragged from the Custom Links category and placed into Menu Structure. They can be used to add external links in the menu pane, but in the case of the CCRI site, they were marked with placeholders without their own landing page.

Specifically, top-level categories in the CCRI site, Research and Research to Practice, were placed as custom links so they are unclickable and have a dropdown of their subpages on the menu pane, shown in Figure 6a.
 

This is a screenshot of the CCRI homepage and shows the three submenu items under 'Research' which is displayed on the top menu bar and is unclickable

Figure 6a. In the CCRI menu pane, ‘Research’ is unclickable and drops down to its submenu items

 
To make these menu items unclickable, place a “#” in the URL section (Figure 6b).
 

This is a screenshot of the Menu page under Appearances in WordPress and highlights the top-level menu dropdown for research in yellow and highlights the URL box are the top of the dropdown in green where a "#" is placed to make the menu option unclickable.

Figure 6b. An example of unclickable menu labels is shown in the case of the CCRI ‘Research’ category. In the area marked green, a “#” is placed in the URL section to indicate the menu item is unclickable.