How to Create Dropdown Menus with WordPress Pages

June 01, 2012 | Written by Ed Andrea

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.

Under Parent, set it to (no parent).
Publish your page.
Check your work on the site.

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.

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.

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

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.

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.

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

Comments

#1 JamesB 2012-08-26 21:37

Great, thanks for that. Any idea if you can make the top menu item (i.e. the parent) not clickable...?

#2 raaja 2013-01-03 07:03

i do the same thing but when i kept mouse on the menu the dropdowns are not appearing

#3 OwainB 2013-01-13 23:09

Thanks very much for this, but I share JamesB's question: is there any way to make the parent page not clickable?

#4 Abida 2013-02-20 15:12

I also share raaja's comment. When I kept Mouse on the menu the dropdown are not working

#5 setu 2013-03-01 07:56

Hi, first of all let me thank you for the amazing post. But I have a question.I want the sub menu to be dyanamic.suppos e 'Do It Youself Beauty' is a menu. The submenu would be 'Hair','Nail', 'Skin' etc. Now I would like to make new posts in each sub menu which will change displaying the latest post rather than a static page. It would be great fi you could help me here. Also I do not see the 'Parent' option when I publish 'Posts', I see 'Category' rather. What is the difference.

#6 y3 world 2013-04-15 20:43

this is nice tutorial, but what if the theme doesn't support dropdown menu. hope you can make a tutorial on making the theme function as the dashboard been configured to have a menu and sub-menu. Thanks for sharing!

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

How to Add Video or Audio to a Joomla Article
Comment by t1m1976
You don't need an extension to play YouTube videos. Simply copy the "embedded" script ...
JPrc Cronjobs Provides Cron for Joomla
Comment by Gosling Cools
If want to run on your 'local' website. Can you leave out www.domain.com/index/php?
10 Options for Multi-Vendor Shopping Carts
Comment by Dinesh
I just tried Magento before a year of time for one of my website and currently I was in ...
400 Joomla and Drupal Classes
Comment by shah kash
Hi Steve I'am beginner in drupal I make a simple quiz using webform and radio button but ...
10 Drupal Commercial Theme Companies
Comment by Christopher V
Grateful to see ThemeBrain in your list. We also have our themes price updated, not ...

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

WordPress Tutorials and Blog Posts