• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(406) 662-1123

WordPress Tutorial: How to Add Menu Items


Written by tim on August 22, 2013

A Comprehensive How-To Guide for Adding Menu Items into WordPress

In this tutorial we will be describing the process of adding Menu Items into WordPress in an easy to follow, step by step format geared towards new users.  Please login to the dashboard of your WordPress site and follow the Steps below:

Step 1.)  How to define your Menu

The first step is to define or create the custom menu you want before you can start adding items to it.

  1. Login to your WordPress dashboard with your username and password *if you are not allready.
  2. On your Dashboard locate the “Appearances” menu on the left side of the screen.  Once located hover your mouse over it Appearances and click the “Menus” option.  This will bring up the Menu Editor screen.Screenshot of step one defining a menu in wordpress, locations of Appearance and Menu section
  3. Look for the underlined link that says “create a new menu” and click itScreenshot of step one defining a menu in wordpress, locations create new menu link
  4. Now locate and enter you new custom menu name into the Menu Name Text Field, where it says in grey “Enter menu name here”.Screenshot of step one defining a menu in wordpress, location of create new menu
  5. To finish and save  your new menu click the Create Menu button.

Your new custom menu is now created!  In the next step we will be defining your menu items.

Step 2.) How to create Menu Items

In this second step we will be adding items to your new custom menu created in step 1.

  1. To start this section, locate the pane entitled Pages on the same page you created your menu.
  2. Within the Pages pane, select the “View All” tab to view a list of all the available currently published pages on your site.
  3. Choose the pages you would like added to your menu by checking the box next to each page’s title.
  4. Now click the Add to Menu Button that is located at the bottom right of the pages pane to add your selected pages to the menu you created in the previous section.
  5. You will see the pages under your menu to the right of the pages pane.  You can click on the individual pages under your menu now and by dragging and dropping while clicked down on you can adjust the order of the pages for how it will display on your site.
  6. Once your satisfied with your new menu’s content of menu items and their order, you need to click the blue Save Menu button to retain your changes.

Step 3.) How to delete a Menu Item

In this third step we will cover how to delete one of the newly assigned menu items from your menu.

  1. Within the Menu Editor pane, locate the menu item you want removed.
  2. Click the grey arrow icon on the right side corner of the menu item’s box to expand it.
  3. Once expanded, Click on the Remove link.  This will immediately remove the menu item box from the menu.
  4. To save your changes click the blue Save Menu Button.

Step 4.) How to Customize your Menu Items

To customize your menu we will be discussing to settings for your menu items.

  • The Navigation Label – This is the field that determines the name of your menu item as it will be displayed in your custom menu to your visitors/users of your site.
  • The Title Attribute – This filed is where you set your Alternative (Alt) text for your menu items.  The Alt text is what shows up when you hover your mouse over an item in the menu and is also used for those who are using screen readers for accessibility to the site for the visually impaired.
  1. To set assign values to these two fields, click the arrow icon in the top right corner of the menu item to expand it.
  2. Next type in the values for both the Title Attribute and Navigation Label that you want to be assigned to the menu item.
  3. To retain your changes click the blue Save Menu button.

 

Step 5.) How to Create Multi-level Menus

This section will discuss how menus can be hierarchical by making your Menu have multiple levels to its menu items. When planning your menu system out it can help to sketch it down on paper into an indented list of the titles for each menu item based on how you want your menu drop down structure to look.  Think of your custom menu we created in step one Level 1 headings as the furthest to the left.  Next would think of your menu items you created as the Level 2 headings being off set to the right of level 1.  Now under these menu items you can place your level 3 subordinate menu items which are off set even further to the right of level 2.

WordPress allows you to set the the hierarchy of your menu items using a simple drag and drop system. You can drag the menu items up or down to alter their ordering position in appearance of the menu but you can also drag them right or left to create sub-levels within your menu.

In order to make one menu item become a subordinate of another menu item follow these steps:

  1. Place your cursor over the menu item you would like to make into a subordinate menu item.
  2. While holding the left mouse button, Drag the position of the “child” menu item underneath its “parent” menu item and then to the right slightly and release the mouse.
  3. You can repeat this process for all of your menu items you wish to be sub-menu items.
  4. Once you like the order and hierarchy of your menu items, click the Save Menu button to retain your changes.

Step 6.) How to add your Menu to your site

If you are using a theme that supports custom menu’s you will be able to add your new menu to one of the theme locations listed.

  1. Within the Theme Location pane, use the dropdown to select your new custom menu.
  2. Click save to retain your changes.

If the theme you are using dose not support custom menus, you have to add your new menu item through the Custom Menu widget located in the Appearances Widgets Screen.

 

Thats it, Congratulations! Your new custom created menu and menu items should now be added to your site and operating as you set it up through following these steps.  Remember if after finishing, saving, and publishing your new menu that you can always change and adjust your menu, menu items, and orientation. Simply revisit the steps above and make the necessary changes in the dashboard.

Posted in WordPress

Featured Clients


David Rochkind Photography

Epic Steel

Take the first step


Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!


Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802


Phone:
(406) 662-1123

5
523 N Higgins Ave, Missoula
5
5
Allen Ratta a month ago
These guys are amazing! Gabe knew exactly where to go in the code and want to fix and had all our issues repaired in minutes! As a previous owner of a software company I would give them the highest rating possible!
5
Sprinkler Maniac a month ago
Had some updating issues with our website and Gabe provided an expedited response to our situation so we could keep the site up and running smoothly. Additionally, he tweaked a few things he noticed weren't correct so the site would have better SEO. Thanks so much!
5
Rebecca Shoemaker a month ago
Gecko is the whole package! Gabe is responsive, reliable, skilled, and affordable. thanks for all your help, i wish i'd found you sooner :)
5
Jenni Fuller 2 months ago
Gabe at Gecko helped me not only with my business site, but also with my business in general, helping me imagine and re-imagine the user-experience. He sat with me for an hour, two different times, as I talked through what I wanted my site to be capable of, and then pointed me in a direction of how to make it happen. I am not entirely tech-savvy, and he gave me the tools I needed to take the next steps...and I always know I can call on Gecko if I get stuck or need a second look at what I've created. I highly recommend Gecko!
5
Bob Rock 2 months ago
WOW! It was a pleasure working with the team at GECKO. Easy to work with and the final product is better than I imagined. Looking forward to a long term relationship.