WordPress Menu System

The next part of WordPress that I want to talk about is the menu system. I briefly mentioned creating a custom menu widget before - this menu system is what is used for those widgets. Beyond being used for custom menu widgets, this menu system can also be used to control the main menus displayed on your public website.

By default, most WordPress themes will add all of your new pages to the main menu of the site (often shown directly below the site title/logo).

For blog-style sites, that design may work just fine, since most of their content is created in posts. However, since I am building sites entirely out of pages, I simply don't want all of those pages to show up in that menu. The menu will actually take up multiple lines on the site, which isn't very useful or attractive for your site visitors.

To use the menu system, look for the Menus link in the Appearance menu:

Here is the Menu page - nothing is going on here yet because we have not created a menu and there aren't any pages on the site.

WordPress has actually changed this menu system recently, so it may be slightly unfamiliar, even to experienced users, if you have not used it in a while.

To get started, enter a Menu Name, then click on the blue Create Menu button on the far right (that button isn't pictured above).

I like to call this menu Top Menu, because it is the menu that I use at the top of the public website.

Once you give the menu a name and click the Create Menu button, you'll then need to build the menu. On the left-hand side of the page, you can simply select existing pages on the site or even add your own custom links.

I will often add the main pages of my site to this menu. However, since I don't have pages on this site yet, I'm just going to create a custom link for now.

I've shown this custom link being created below, which is for my home page. I could ordinarily create this home page link by simply selecting the home page from the Pages list but again, there are no pages on this set yet (even a home page technically). Provide the custom URL and the text for the link here, then click the Add to Menu button.

This immediately adds the menu item, which is reflected in the main screen on the right. Here, you can set the main settings for the menu and even edit existing menu items.

If you click on the down arrow for the menu item you just created, you can see the URL and Navigation Label text boxes already filled out with the information you provided. However, the Title Attribute box is still blank. I actually like to go back through my links and provide text here.

The Title Attribute is text that the website visitor will see when they hover over your link, so I use this to explain the link a bit more. If you can rephrase the title of the page or the link text here without getting spammy with your keywords, I feel like this is the best choice.

However, with the home page of the site, I try to avoid keywords completely here - I think this is a key sign of a keyword spam site and even Google may look to make sure your Home links aren't spamming keywords.

At the very bottom of the page, look for the Menu Settings. There are two sections of settings here.

The first, Auto add pages, has one setting. This setting makes the menu behave like a default WordPress menu - where new pages (not posts) added to the site will automatically get added to the menu. This was actually the setting I wanted to avoid by creating my own custom menu, so I definitely do not want to select this.

The next set is called Theme locations. The three settings here control where the menu is displayed on the site. Depending on the theme you are using, the settings available here may actually be different. However, all themes should have a Primary Navigation setting, which allows you to override the default main menu on the site.

I want to select Primary Navigation for this menu, to get it to become the main menu of the site. The picture below shows my entire menu at this point. When you get done with yours, be sure to click the Save Menu button.

If you visit the live site after this change, you may notice that the main menu isn't that different. I still have a Home link that goes to the front page of my site. However, if I hover over that link, I can see the text Home Page being displayed.

The real difference becomes apparent when new pages are added to the site because they will not automatically show up in this menu - I'll have to add them myself.

I can simply return to the menu page at any time during my site construction to add new links to this menu. Just look in the Pages list to find the page you want to add as a link. As I begin to build pages on my site, I will be revisiting this menu system with you to show you exactly what I do for my menus.