How to Create WordPress Menus
To access the WordPress menu so you can either create a new menu or make changes to an existing menu, go to your WordPress Admin area, scroll down the left hand menu until you come to Appearance. Hover over the menu and then click on Menus from the pop out.
Alternatively, if you’re logged into WordPress and over on the live site, you can go and hover over your site name in the black Admin bar at the top, then drop down to Menus from there.
When you first access the Menus page, it will look something like this:
To start, you’ll want to give your menu structure a name. Typically I tend to name them with where I want them to be displayed just for easy reference. For example, I named this one “Top Navigation” because I’m working on the menu that I want to appear across the top of my site. Note however that simply naming it this will not make it appear where I want it to – I have to assign this menu to that location. To do that, I have to check the “Top Menu” box you see below. Depending on what theme you’re using, it might say something slightly different in Display Location. I also typically check the box for “Automatically add new top-level pages to this menu” as a way to shortcut things when I am creating new pages. (You can select if a page is a parent page or not when you’re creating a new page.)
Now you’re all set to start adding links to your menu. The four types of links you can add are pages, posts, custom links (i.e. linking to another website), or post categories. Under each drop down on the left of the work screen you’ll see the four types listed. When you click on the names it will open up options for each type of link and have a “Add to Menu” button. Simply configure the link you want to add, and hit “Add to Menu” and it will appear at the bottom of the list on the right as a movable box. You can edit those settings you created for the link by clicking the down arrow on the right of that movable box. As a workflow option, I tend to click on “View All” when I’m looking to build a menu because it shows all the site pages or posts in one spot instead of the ones most recently used.
Adding Custom Links (links to outside sites – in this example, Google):
Adding blog post categories – helpful if you have a type of article you post regularly that gets a lot of traffic, or should be featured:
Here I would recommend you go ahead and save, and then click on the “Manage Locations” tab there just above your menu work space. To save, hit the blue “Save Menu” button – either one works. There’s no difference in functionality. I believe the reason they put in the second one was for those who have extremely long or complex menu structures – to save them from having to scroll up. Once you’re on the Manage Locations tab, under Top Menu, go ahead and make sure your menu is selected. In my case, my menu named “Top Navigation” needed to be selected. Once done, hit “Save Changes.” Yours may already be filled out, and if so you’re all set. Just head back to the “Edit Menus” tab when you’re all done.
Manage Locations tab:
Now that you’ve created the menu and saved it, head over to your live site to make sure things are looking the way you expect them to.
Once you have all the links in, you may decide you want to arrange them differently or create submenus/drop down menus. This is where the movable box item I mentioned before comes in. Those boxes you added can be clicked on and dragged to other locations in the menu. You can also drag them to an indented location. This means that the item you’re dragging will become a submenu under the parent item (the item you’re dragging it under). See below for an example of what a submenu would look like. Don’t forget to “Save Menu” to see your changes on the live site.
Submenu on the live site:
And that’s about it! To make changes in the future, just log back into the Menus page and make your adjustments. The interface doesn’t change at all once you’ve saved this version.
As always if you have any how-to questions, please leave a comment below or reach out on Twitter at @creationdepot. Always happy to help!
Have a good one!