• 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


The Luv U Project

Montana History Foundation Bifold Brochure

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
Michelle Levitus 5 months ago
Gecko Designs was a pleasure to work with while building out a brand new website. They understood what we were after and had creative and useful ideas to help us reach our goals for the website and for our organization. Communication was friendly and reliable throughout the process and they were available to troubleshoot any issues that arose before we went live, and after. Highly recommend!
5
Eric Halverson 3 months ago
Gabriel at Gecko Designs has proven over and over again that he and his team offer an incredible product to their clients (me!). I've been thrilled by his communication, the products they offer, and their responsiveness to my requests. Anyone looking for a website, logo, etc.. would be making a no-brainer decision to do business with Gecko Designs.
5
Martin Judnich 7 months ago
From intro meeting to final website, this was a great experience. Gecko created exactly what I was looking for, and was very timely and affordable. Great collaboration, lots of changes, and they made me feel comfortable every step of the way. I could not recommend more.
5
Lincoln Mansch 10 months ago
Our non-profit organization can't find enough adjectives to describe the top-notch, professional, and amazing work Gabe and his team provides. They have been amazing supporters of our organization from answering simple quick questions, to volunteering at our events, to helping us with graphic designs and website updates for our biggest event, to helping us with the mother of all projects....redesigning our very outdated website. We are always amazed at how quickly and efficiently they work despite us coming back with little nit-picky changes and requests. We often wonder if we're their only client because they are so quick to respond....but that is exactly how they want you to feel - as if you are their only/most important client. They are always willing to do whatever it takes to get the job done right by taking very careful consideration of their clients' needs, wants, and desires, and end up producing work that is nothing short of brilliant.
5
Jaycie Loney a year ago
Gabe and his team did a great job helping us with our fundraiser. They were the most affordable, easiest to work with place in town! We couldn't have been more pleased with these guys!! Highly Recommended!