How to create and add menu bar to your WordPress site

5
(1)

Providing a good user experience is a critical success factor for your site. An ease of use menu bar will make users more engaged and consumed contents of your site.

Menu bar is the foundation of site navigation

Menu is especially important for Mobile

Due to the limitation of screen size, menu is especially important for Mobile. It is good idea to pay extra attention to the usability and try to create better site navigation.

Here is an example of mobile menu. Mobile menu button is usually located in the top side of screen. Make sure the location of menu button is easy to find for users.

Menu button location on mobile

When you click (tap) the menu button, menu items will be displayed. It is important to make sure each menu item is easy to read and understand for users.

Menu items on mobile

The above example image of this site has currently very small number of pages, so category items are just two. It will become much more important for sites with more pages and categories to have better organized and easy to tell navigation items.

How to set up menu bar for WordPress site

From WordPress Dashboard, click “Appearance” and then select “Menus”.

Click Menus from WordPress dashboard

Menus setting page is displayed. WordPress menu setting page

Menu items consist of “Pages”, “Posts”, “Custom Links”, and “Categories”. You can select an item, and add to menu by pressing button.

In this post, the following items will be added to the menu.

  • Pages: “Home” and “Contact Us”
  • Categories: “AdSense” and “WordPress”

Add “Pages” to menu

  1. Click “View All” tab.
  2. Select items to add to the menu
  3. Press “Add to Menu”

Add pages to menu

Home and Contact pages are added to the menu.Home and Contact pages added to the menu

You can also add “Posts” to menu like “Pages”.

Add Custom Links to menu

Click “Custom Links”, and enter URL and Link Text. Press “Add to Menu” button.

Add custom links to menu

Add Categories to menu

  1. Click “Categories”.
  2. Select category items to add to menu
  3. Press “Add to Menu” button

Add Category items to menu

If you did not see category items you want to add, please click “View All” tab.
WordPress and AdSense category items are added to the menu.

WordPress and AdSense categories are added to menu

Arrange the orders of Menu Items

In this example, we are going to change the menu order as below.

  • Home
  • AdSense
  • WordPress
  • Contact

You can arrange menu items orders by drag and drop. Or, select the item, and click move navigation item.

Moving menu items navigation

Now, we changed the order of menu items.

Changed the order of menu items

Change the menu item name (Navigation Label)

You can change menu item name if you want. The following is an example. We changed navigation label from “Contact” to “Contact Us”.

Editing navigation label

Set Menu Display Location

This is the final step. In WordPress, you can select multiples places for menu. The selections differ by Theme. Some theme provides many location options such as header and footer for each mobile, desktop, and AMP.

In this example, there are two selections. One is header, and the other is footer. You can choose both if you like.

We select header, and then press “Save Menu”

Select menu location to the header

Menu bar is now added!

Menu bar is added

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

Sponsored Links


Share

  • Add this entry to Hatena Bookmark

Follow Me