How to Create a Custom Navigation Menu in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

After you add the menu feature to your WordPress theme (or if you’re already using a theme that has the menu feature), building menus is easy — just follow these steps:

  1. Click the Menus link in the Appearance menu in your Dashboard.

    The Menus page opens in your WordPress Dashboard.

  2. Type a name in the Menu Name box and click the Create Menu button.

    The Menus page is reloaded with a message that tells you your new menu has been created.

  3. Add links to your newly created menu.

    WordPress gives you three ways to add links to the new menu you just created:

    • Pages: Click the View All link to display a list of all the page(s) you have published on your site. Select the box next to the page names you want to add to your menu. Then click the Add to Menu button.

    • Custom Links: In the URL field, type the URL of the website that you want to add (https://www.google.com). Next, type the name of the link that you want displayed in your menu in the Label text field (Google). Then click the Add to Menu button.

    • Categories: Click the View All link to display a list of all the categories you’ve created on your site. Select the box next to the category names you want to add to the menu. Then click the Add to Menu button.

  4. Review your menu choices on the right side of the page.

    When you add new menu items, the column on the right side of the Menus page populates with your menu choices.

  5. Edit your menu choices, if needed.

    Click the Edit link to the right of the menu link name to edit the information of each individual link in your new menu.

  6. Save your menu before leaving the Menus page.

    Be sure to click the Save Menu button under Menu Settings on the right side at the top of the Menus page. A message appears, confirming that the new menu has been saved.

    The Custom Menus options on the Menus page in the Dashboard.

    The Custom Menus options on the Menus page in the Dashboard.

You can create as many menus as you need to for your website. Just follow the parameters for the menu template tag to make sure you’re pulling in the correct menu in the correct spot on your theme. Pay attention to either the menu ID or menu name in the template tag.

You find more options for your navigation menus by clicking the Screen Options tab at the top-right corner of your Dashboard. From there, you can add things like Posts and Custom Post Types to your menu options, as well as add descriptions for menu items.

The HTML markup for the menu is generated as an unordered list, by default, and looks like this in the sites source code:

<ul id=“menu-main” class=“menu”>
<li id=“menu-item-1” class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-1”><a href=“/”>Home</a></li>
<li id=“menu-item-2” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-2”><a href=“http://localhost/wpdemo/blog/”>Blog</a></li>
<li id=“menu-item-3” class=“menu-item menu-item-type-post_type menu-item-object-page menu-item-3”><a href=“http://localhost/wpdemo/about/”>About</a></li>
</ul>

Notice in the HTML markup that the first line defines CSS ID and class: <ul id=menu-main class=menu>. The ID in that line reflects the name that you gave your menu. This assignment of menu names in the CSS and HTML markup is why WordPress allows you to use CSS to create different styles and formats for your different menus.

When developing themes for yourself or others to use, you want to make sure that the CSS you define for the menus can do things like account for subpages by creating drop-down menu effects. You can do this several different ways. The example below is a block of CSS that you can use to create a nice style for your menu (this CSS example assumes that you have a menu named “Main”; therefore, the HTML and CSS markup indicate menu-main).

#menu-main {
width: 960px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-size: 16px;
color: #FFFFFF;
margin: 0 auto 0;
clear: both;
overflow: hidden;
}
#menu-main ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu-main li {
float: left;
list-style: none;
}
#menu-main li a {
color: #FFFFFF;
display: block;
font-size: 16px;
margin: 0;
padding: 12px 15px 12px 15px;
text-decoration: none;
position: relative;
}
#menu-main li a:hover,
#menu-main li a:active,
#menu-main .current_page_item a,
#menu-main .current-cat a,
#menu-main .current-menu-item {
color: #CCCCCC;
}
#menu-main li li a,
#menu-main li li a:link,
#menu-main li li a:visited {
background: #555555;
color: #FFFFFF;
width: 138px;
font-size: 12px;
margin: 0;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
position: relative;
}
#menu-main li li a:hover,
#menu-main li li a:active {
background: #333333;
color: #FFFFFF;
}
#menu-main li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
}
#menu-main li ul a {
width: 140px;
}
#menu-main li ul ul {
margin: -31px 0 0 159px;
}
#menu-main li:hover ul ul,
#menu-main li:hover ul ul {
left: -999em;
}
#menu-main li:hover ul,
#menu-main li li:hover ul,
#menu-main li li li:hover ul, {
left: auto;
}
#menu-main li:hover {
position: static;
}

The CSS you use to customize the display of your menus will differ. After you get the hang of using CSS, you can try different methods, colors, and styling to create a custom look of your own.