A typical WordPress site is made up of posts and pages. To access these, a user can enter their URL into a browser’s address bar and then hit ENTER. This make work if a site has little content. It wouldn’t be that difficult to remember all those addresses after all. But what happens when a site has a lot of content? It becomes tedious to keep track of the URLs of the site’s content. Visitor’s need a way to navigate the content easily.
If you’re new to WordPress (or just need a refresher), you may be asking how.
The answer isn’t difficult – create and add “Navigation Menus”. Navigation Menus are simply an organized collection of links. Navigation Menus help a visitor to navigate a WordPress site with ease. Just click on a menu link and you’ll be redirected to the post or page. In addition, the links may also point to 3rd party sites. If a user clicks on an external link, they’ll be redirected immediately.
Navigation Menus are an essential part of a good WordPress site. Thus, it’s essential to learn about them.
In this tutorial, we will do just that. We will be learning how to add, modify and delete WordPress navigation menus.
Creating WordPress Navigation Menus
In this section we will be learning how to create Navigation Menus. We will also be learning how to add items to these menus.
We will first learn to create a Navigation Menu. We will place links inside the Navigation Menu to our WordPress site’s pages
On the WordPress admin dashboard. Hover over “Appearance” and click on “Menus”.
You will be redirected to the “Menus” page. This is where we can add, modify and delete menus. This is also where we add, modify and delete menu items.
We will now be creating a Menu. Under the “Menu structure” section, fill in the “Menu Name” field. In this tutorial, we will name our menu as “First Menu”. Click “Create Menu” to create the menu.
Once, we’ve created the menu, we can see that a new section – “Menu Settings” – has been added under “Menu Settings”. We can also see that the “Add menu items” section is now enabled. We can now add items to our menu.
Adding a WordPress Page to a WordPress Navigation Menu
We will now be adding a page. Under ‘Add menu items”, click on the arrow on the “Pages”subtab. (Note: When you create a new Menu, this subtab is expanded automatically). You will see more subtabs – “Most Recent”, ‘View All”, and “Search”. These subtabs help you find the pages you will be adding to the menu. In this tutorial, we will be adding “Sample Page” under “Most Recent”. We will click on the checkbox beside it and then click “Add to Menu”.
We have now added an item on the menu. We can see that the page name of the added page has been itemized inside the “Menu Structure” section.
We can choose to rename the menu item (or any menu item in general) by clicking on the arrow beside the menu item’s name within the “Menu Structure” section of the “Menus page”:
We will now choose where to display it. From “Menu Structure”, focus on “Menu Settings”.
Choose a location. For this tutorial, we will choose “Primary”. Click “Save Menu” to apply the setting. It will display the Menu on the Display Location. (Note: Where your menus may appear is dependent on the WordPress theme)
Alternatively, we can choose where the menu is displayed through the “Manage Locations” subtab under the “Menus” heading.
Here, we can assign menus to a Theme Location (this is another name for “Display location”).
Take note that if we do not choose a location, the Navigation Menu will not be displayed.
Below is an image of the site without a menu.
Below is an image of the site with a menu. Here we can see that the page we added can now be seen and accessed easily.
Adding a WordPress Post to a WordPress Navigation Menu
In this subsection, we will be adding a WordPress post to the Navigation Menu.
The steps to adding a WordPress post custom link, or category to the navigation menu is similar to the steps of adding a WordPress page to a Navigation Menu.
Navigate to the “Menus” page and focus on the “Add menu items” section. Click on the arrow beside “Posts”. Select the WordPress Posts to be added on the menu. Browse the subtabs and click on the check box beside the post you want to include in your menu. Once you’ve chosen the post click ‘Add to Menu” For this tutorial, we will select the “Hello world!” post. The post should appear itemized within the “Menu Structure” section of the page.
Adding a Custom Link to a WordPress Navigation Menu
Similarly, we can also add custom links to a Navigation Menu. From the admin dashboard, navigate to the “Menus” page. On the”Add menu items” section, click on the arrow beside “Custom Links”. Type the URL of the link inside the “URL” field and add it’s display text inside the “Link Text” field. In this example, we will the fields so that they link to Google. Click “Add to Menu” when done.
Adding a Category to a WordPress Navigation Menu
We can also add categories to a Navigation Menu. Categories are used to group various WordPress posts. They are created when a user creates or edits a WordPress post. To add a category, navigate to the “Menus” page and focus on the “Add menu items” section. Click on the arrow on the “Categories” subtab. Select the category to be added by clicking on its respective checkboxes. Click “Add to Menu” when done.
Adding Multiple Items to a Menu
We are not limited to adding a single item or kind of item to a Navigation Menu. We can place multiple items, of different kinds if necessary.
In the image below, we can see that the items have been added to the Menu
Using Nested Menus
We can also create nested menus. For this to work, there has to be at least two menu items. The child item has to be dragged to the right under a parent item.
We can also nest items under sub items. (Note: The sub items of sub items may not render properly on some themes)
Adding a WordPress Navigation Menu to a Widget.
We can also add a WordPress Navigation Menu Widget to a widget area. From the admin dashboard, hover over “Appearance” and then click “Widgets”.
You will be redirected to the “Widgets” page. On the left side are the available widgets. On the right are the widget Areas. (Note: The theme in this tutorial only has one widget area – “Footer”. If you use a different theme, there would be more widget area)
Once there, look for the “Navigation Menu” widget dropdown.
Click the arrow beside “Navigation Menu”. Select a widget area. For this tutorial, there is only one widget area – “Footer”. Click “Add Widget” to add the Navigation Menu to the widget area.
(Note: Other themes have more widget areas as was previously said.)
After selecting an area and clicking “Add Widget”, the widget will be placed under the specific widget area’s section. In this example, the “Navigation Menu” widget was placed under the “Footer” widget area.
The widget would appear in the footer area (Note: These are all the items in the footer not just the widget we added.
Modifying WordPress Navigation Menus
In this section, we will be learning how to modify WordPress Navigations Menu. If you know how to create WordPress Navigation Menus this should be easy. Modifying a WordPress Menu is like creating one.
From the WordPress admin dashboard, navigate to the “Menus page”. If you only have one Navigation Menu, you can proceed editing it.
If you have more than one WordPress Navigation menu, the first menu created will be displayed.
We can choose a different WordPress Navigation menu on the “Select a menu to edit” dropdown.
For this tutorial, we will choose a different WordPress Navigation Menu – “Second Menu”.
Renaming WordPress Navigation Menus
We can rename the WordPress Navigation Menu. Type a new name on the “Menu Name” then click “Save Menu”. The Menu will have a new name. For our example, we will name it “Edited Menu”. “Second Menu” is now “Edited Menu”.
Renaming WordPress Navigation Menu Items
WordPress Navigation Menu items can also be renamed. Click on the arrow beside the WordPress Navigation Menu item. Type the new name on the “Navigation Label” Field. Click “Save Menu” to apply the changes
Rearranging WordPress Navigation Menu Items
We can rearrange the menu items by dragging them to the position we want.
Alternatively, we could have used the “Move” option of the Navigation Menu Item.
We can also transfer a nested sub item to a different parent item.
Click “Save Menu” to apply changes.
Removing WordPress Navigation Menu Items.
We can remove menu Items from a WordPress Navigation Menu. In the “Menu structure section”, click the arrow next to the item we want to remove. When the item expands, click on “Remove”.
Changing WordPress Navigation Menu Locations.
We can also change the display location of the Navigation Menu. From the “Menus” page, select a Menu. Change its display location under “Menu Settings” found in the “Menu Structure” section. Alternatively we could have changed it through the “Manage Locations” subtab of the “Menus” page (as discussed in the “Creating WordPress Navigation Menus” section of this tutorial.
Deleting WordPress Navigation Menus
In this section, we will learn how to delete WordPress Navigation Menus.
It is easy to delete a WordPress Navigation Menu.
From the WordPress admin dashboard, navigate to the “Menus Page”. If you only have one menu item, you can proceed to deleting it. Click “Delete Menu” under the “Menu Settings” section.
If you have more than one WordPress Navigation Menu you need to select the WordPress Navigation Menu that will be deleted.
(Optional) Managing WordPress Navigation Menus with Live Preview
We’ve already learned what we need to know. However, this is good to know.
We can also add, modify or delete WordPress Navigation Menus using the “Manage with Live Preview” feature. This feature allows us to see changes on our site in real time while configuring our WordPress Navigation Menus. To access this feature, navigate to the “Menus” page from the WordPress admin dashboard. Once there, click on “Manage Live Preview”. We will be able to see the changes we do.
In the image below, we can see how “Manage with Live Preview” works
We’ve learned the WordPress Navigation Menu Basics.
We now know how to create, modify and delete WordPress Navigation Menus.