Adding DropDown Menu to WordPress

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

In this tutorial, we will show you how to add drop down menus to the top primary menu location in the default WordPress “Twenty Fourteen” theme.

When you add new pages to the site, the menu automatically appear in the top primary menu.

default top menu

default top menu

Here you see the two menus “About Us” and “Sample Page”.  The “Sample Page” was already present when we installed WordPress. The “About Us” page, we had just added by going to “WordPress dashboard -> Pages -> Add New”.

But these are just regular menu and not drop down menu.  If we want better control over this menu, we have to add a new menu by …

1.  going to  “WordPress Dashboard -> Appearance -> Menus”.

2.  Click link “create add new menu”

3. Type name “Top menu” and click “Create Menu”.

4. In the Pages panel, under “View All”, checkmark the pages we want to add to our menu.

5.  Click “Add to Menu”.

adding top menu

adding top menu

6.  In the menu structure, drag the “sample page” item to be a second-level sub-menu under the “About Us” menu item…

second-level drop menu

second-level drop menu

See how the menu is indented?  This causes that item to be a dropdown menu item.

7.  Click “Save Menu”.

8.  Then you have to go to the “Manage Locations” tab and assign your newly created menu to the “Top primary menu” location.

assign menu

assign menu

9.  Click “Save Changes” and view the dropdown menu on the site…

dropdown menu

dropdown menu