Start a FREE 7 day trial! Get training videos and books, plus expert support:  

WordPress Tutorials and Blog Posts

How to Create Dropdown Menus with WordPress Pages

No matter what CMS we're teaching, when we come to talking about themes and designs, one question always comes up quickly: "How do I make a dropdown menu"?

This tutorial provides one answer to that question in WordPress.

It's important to know one thing before you begin:
 
You can only easily use dropdown menus with themes that support them. Fortuantely, most themes now include a dropdown menu feature. The default 2010, 2011 and other basic themes include this feature. Older themes may not.

Option 1: Creating Dropdown Menus With Pages

We'll start by creating a menu in the 2011 theme. When you first install WordPress it has a page called "Sample page". When you view the site, you'll see that it is one of the two menu links: Home and Sample Page. We're going to add a third menu item.

  • Go to your admin dashboard.
  • Click Page > Add New.
  • Add a title and some content.
  • Take a close look at the Page Attributes section.
tutuploadsmedia_1337712219388.png
  • Under Parent, set it to (no parent).
  • Publish your page.
  • Check your work on the site.
tutuploadsmedia_1337712352340.png
By adding a new page at the top level (no parent) you automatically create a new menu item. The menu items appear in alphabetical order. To change the order go back to the Page Attributes and changer Order from 0 to 1.
tutuploadsmedia_1337712491356.png
You've reordered the menu. The items will appear alphabetically unless you manually change the order. The lowest number is 0, not one. If all the menu items are set to Order=0 then the default is to show them alphabetically.
tutuploadsmedia_1337712668774.png

Now let's add a dropdown link. The process is identical except this time when we choose the parent, choose Sample Page.

tutuploadsmedia_1337712966111.png

I'll create some additonal pages and show you the result.

Mousing over the Sample Page shows the three pages I added on the second level of the menu. To create more levels, you repeat the process, choosing the proper parent each time.

tutuploadsmedia_1337713010840.png

I created three levels of pages. Each time you create a new page, just be sure you have it on the proper level by choosing the proper parent.

tutuploadsmedia_1337713168291.png

Here is what the fully expanded, three level menu looks like:

tutuploadsmedia_1337713294185.png

 

 

Start a FREE 7 day trial! Get training videos and books, plus expert support: