As your WordPress sites grow in content and complexity, building out navigation menus offers a way to make it easier for your site visitors to navigate your site. The WordPress menu editor provides a lot of flexibility for setting out a fine menu.

The ways menus are used will depend on the theme you are using. In general you always get one place to add a menu, but some themes may offer a different menu for the footer, or a special menu for social media links. The menus can be a mix of links to blog categories, static Pages, or links to external sites. You can also make them hierarchical.

To start, you might want to have items to add to your menu. Perhaps create a Category structure for your blog posts. Use WordPress Pages to create an About page, or a Contact page, or a Bio page. Collect some external URLs you would like to provide as links (course sites, social media, other web sites that you want to provide navigational links to).

Let’s make menus! Log in to your WordPress Dashboard, and look for Appearance -> Menus. Depending on your theme, you may see a default menu just with your Pages, or ut might be blank (as it does with the Twenty Seventeen Theme). This is what the Mad Scientists found on their Thoughts blog:

The first thing they did is to create a name for their menu. This is just used internally so you know what it is- it could be “Main” or “Navigation” or “Fred”. Then click Create Menu.

Next, they are prompted to add menu items from the sections to the left, but before doing that, a key step is to indicate which location in the theme the menu should appear; this theme has two locations. They choose to put this main one in the Top location (if you forget this step, your menu will never show up, a common mistake).

Now they can start using the boxes on the left to select menu items to add. They start with Pages, where they have three Pages already made. Since all the Pages are wanted, the Scientists click all three boxes and then Add To Menu

These appear on the right. They can re-arrange the order by dragging. There is one item with a long name, which will take up to much room. Toggling the editor open, they can edit the menu label to be shorter.

What else can they add? Why not links to all their blog Categories? This is done in the same way. Select, Add to Menu, and arrange.

But what if you have a lot of categories? This might end up cluttered. Here is a place to make them sub-menu items, that appear when you hover over a main label. Here is a nifty trick for creating an organizer menu item. Open the Custom Links editor on the left, and replace the URL field with just # and enter the Link Text as “Blog” (this creates a link that just stays on the current page).

Now the Scientists add this to the growing menu, and move it above the three categories. They than drag the categories to the right, so they become indented. These are now sub-menu items.

They can also add menu items that go to any URL. Maybe there is a special place to send visitors to see the lab, maybe a YouTube video. Enter the URL, and it’s link text in another Custom Link menu editor. Add this to the menu, and drag it to the place you want it to appear.

Now the main menu is shaping up! See it in action at http://thoughts.extendlabs.ca

What about that other menu location? Themes like this have a way to add links to social media sites that are generated as icons. We create a secodn menu called maybe… Social? And set it’s location to Social Links Menu

For these kinds of menus, we use Custom Links to add the URLs for our Social Media urls.

When saved, and viewed on site, the links are automatically turned into icons (on this theme, they appear in the footer)

Build out your site’s menu structure, experiment with it.

See also:

Example for "Setting Out Your WordPress Menus":
http://extendlabs.ca/stuff/screens/menu-on-site.jpg

Complete This Activity

After you do this activity, please share it so it can appear with other responses below. If your response exists at a public viewable URL, you can add the information directly to this site.

Add A Response

2 Responses Completed for this Activity

  • What's on the menu? (Irene Stewart, @IrenequStewart)

    Menus –  what to put on them, where to have them – has been a bit of a puzzle. My procaffination.ca webspace is the landing page of my domain that is the front door for the subdomains I have set up. I messed around a bit with the theme but I am still not satisfied…. Read more »

  • Menus & Themes (Lisa Koster, @lkoster)

    I have previously played around with menus before so this started out as a review.  It’s probably one of the most tricky things to learn in WordPress, especially if you are trying to use as a static website rather than a blog.  I had to learn the difference between posts and pages. Adding a custom… Read more »

Creative Commons License
This work by Alan Levine is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *