Creating Navigation Menu

Creating WordPress Navigation Menu

Understandable and extensive navigation is essential for any website. It is very easy to create menus in WordPress that help website users to obtain what they need. Menu elements are not limited to pages; practically any item in WordPress – posts, categories, authors, tags, and more – can be added to the menu. Using CSS and JavaScript we can manage the design of our menus that can change the look and feel from the norm.

You can create your own menus and identify places in the theme where the menu will appear. Using menu editor you can create various menus and then place them in desired menu locations in different parts of the theme.

Understanding and Creating Menu

In WordPress there is strong built in system for making basic menus. It’s easy to organise and it can be handled by just drag-and-drop menu items. You can construct numerous menus and select which menus to utilise in which menu area. By just changing the name of the menu in a specific area will automatically load all the items of that menu. Different themes allow different number of menus to be used, the most common ones are header menu, footer menu, sidebar menu, social links menu.

Let’s create a menu. Select Menus under Appearance on the left.

Creating a new menu in WordPress

Click on ‘create a new menu’ link and add a name in ‘Menu Name’ field. Menu Name is not displayed publically, it is only for you to remember the purpose of your menu. Click the ‘Create Menu’ button on the right. After you are done you will be able to include items to menu. On the left side you will have your links, pages, and categories. Your taxonomies and custom post types will also be displayed in categories.

To select pages for your menu, click ‘View All’ on the left to see the list of all the pages.

Tick the checkboxes for the pages you want to add to your menu. Select All if you want to add all pages. Now click ‘Add to Menu’ button.

Menu Structure

The menu structure is hierarchical. By default all the pages are listed as the main items of the menu without a submenu item. To add a submenu item as a drop down or any other format that loads the submenu items, move that item to the right by dragging and drop it below its parent menu item, it will be positioned in sub item location. You can have multi sub items by adding sub items as the children of another sub items.

Organizing the Menu Structure

If you want to create menu structure, drag and drop the menu items and place them where you want. You can add menu elements as a page or as a sub page.

Deleting a Menu Item

As we can notice in the previous screenshot that there are two home pages, the first one is created by WordPress by default and the second one is created by me to show you how we can delete any page.

To delete any item from the menu, click that page and it will load the options of that page, click “Remove” button to delete that item and finally click the “Save Menu” button.

Renaming Menu Items

In this guide I have two pages “Sample Page” and “Sample Page 2”. If you would like to rename these pages then click that page and it will load the options of that page. Change the text for “Navigation Label” and click “Save” button.

Creating Multi-level Drop Down Menu

To add a hierarchical menu you need to add sub items in a super item that is adding child item to parent item. To do this, simply drag and drop items on the right of other items and it will automatically become the children of a parent item.

Adding Custom Links

Static links can also be used to create menu items. Click “Custom Links”, add a static URL to it and add anchor text for this URL in the “Link Text” textbox (this is the text that will appear to the end user for this link) and finally click “Add to Menu” button.

After adding the link it will work like any menu item, so you can simply move and change its position or you can drag and drop items to change its position.

Adding Categories to Menu Items

Categories can also be used as menu items. They will work like a normal menu item that goes to a specific category page, to do this you need to click the “Categories” item of the accordion on the left, it is the last item of the accordion.

Menu Settings

The menu settings are located at the end of the menu framework. From here you can choose to add or not to add new pages automatically to the menu. If you want to keep menu items static to then leave this “Automatically add new top-level pages to this menu” unchecked else check this checkbox then it will add automatically all newly added pages to the website. You can also select where you want the menu to appear in your theme. In order to display your menu on the site you must select an option otherwise your menu will not be shown on the website. I’m selecting this as primary menu. The second option is for social links menu, you can have a single menu in both places.

Before closing this screen do not forget to click “Save Menu”.

Examining the Menu

In the above screenshot we can see all the changes that we implemented throughout this article.

In this image it shows the menu is working the way I wanted. Note! If you change a page’s default text in the menu item, this will stop loading the page title as the menu item text because we have passed static text in that menu item text.

Using the WordPress Menu Widget in Sidebar

By creating a custom menu widget you can also add custom menus in sidebar. Simply drag the custom menu widget to your chosen sidebar and select the menu from the available menus list that you want to show.

The links of the menu you selected will appear vertically in sidebar. Like other widgets, you can also add a title to it. Menu widgets can be added as many as you require. It’s a lovely way to construct a navigation menu structure into your custom menu sidebar.

WordPress Menu

Different WordPress themes have a different framework for menus. Let us look at the WordPress menu framework for the Twenty Fifteen theme.

Twenty Fifteen theme contains two menus: Primary Menu and a Social Links Menu.

The primary menu is the major form of navigation on your website. It should comprise the essential navigation menu structure that your audience will expect: a link directing to your homepage, services, contact us, about us, blog, etc. It mainly depends on your visitors and the objective of your site. Try to keep it simple, user friendly, and consistent.

Creating the Social Links menu, I made a new menu structure called Social Links. I added the URLs and desired names of every social network in the left navigation structure. Lastly, I picked Social Links Menu and saved it.

Conclusion

The menu section of WordPress is surprisingly simple and user friendly and to use it once you will become habitual to it.

Main menu are mostly used as the main source of navigation on any site, as they are the great way to direct your guests to the different pages of your website.

Always keep to the main menu simple. Use dropdown menus as to remove clutter but don’t use them again and again as they may look alike and untidy or overwhelm. Try to keep your item subject detailed and your guests must be able to find exactly what they want after landing at your website.