Last week, I got an inquiry from a good friend and regular reader of this site. My friend is involved in setting up a site of his own. I believe this is his first time to set up a site using WordPress, so he had a few questions for me.
One of the things that my friend asked was how to set up menus like what I have here on WP-StepByStep. If you look on any page here on this site there is an orange bar across the top of the page, just under the header. Along this orange bar is a menu that gives readers access to different parts of this site. My friend was particularly interested in how to set up a drop down menu. If you don’t know what a drop down menu is, just hover your mouse over the word “categories” along the menu bar, and a list of categories will drop down for you to choose from. This is a drop down menu.
Drop Down Menus on WordPress
So, the question is, how do you set this up using WordPress. Really it is quite easy once you know what to do. So, let’s have a look at how it is done, and I am sure you will then be able to create a drop down menu yourself.
How to set up a custom menu in WordPress
Appearance Menu
The first thing you need is to be using a Theme that supports custom menus. Not all themes do, but most of the newer themes will support custom menus.
Now, if you go to the Appearance Menu in the Admin area of your WordPress site, you will see that there is a sub-menu item called “Menus,” you will want to click on Menus and go to that page. When you do that you will arrive on the page where you can create custom menus.
The first thing you need to do is to create a menu. To do that, you will decide on a name for your custom menu. You can name it anything you wish, even just “1” or “2” etc would be fine. Once you choose a name, just enter than name in the box at the top of the page where it says “Menu Name” and then click “Save Menu.” After you do this, you will need to assign that menu to a space on your blog theme. On the left side of the menu page there is a box that says “Theme Location” and in that box it will tell you how many custom menu locations your theme can support. You can create as many different menus as your theme supports! Next, use the drop down boxes in that “Theme Locations” area to assign the menu you created to the area where you wish it to be seen. For example, on this blog, I have assigned that menu on the orange bar to a location called “Primary Navigation Menu.” Because every theme is different, you will need to play around with these settings and test them out to see where the menu ends up on your particular theme.
Now to set up the actual menu
To set up the actual menu, you will use the boxes along the left column of the Menu page, and select the items that you want to put on the menu. For example, you can see on the left, there is a box that lists all of the Pages that you have on your WordPress Installation. Click in the check box of each page that you wish to see on the menu. After selecting each item you wish to place on the menu, then you can click the “Add to Menu” button. Once you see the items over in the menu area, you can drag and drop them into any order that you desire. It is highly customizable!
How do I get the drop down effect?
OK, OK, I know you are waiting to find out how to get the drop down effect on your menus, don’t worry, that is our next step! Take a look at the image below.
Look in the area that I have put in a red box in the image. See how some menu items are indented from the others? The indented ones are drop down menus. All you have to do to indent these menu items is to grab them with your mouse, and drag them a bit to the right to indent them. In fact, you can even have drop down menus within drop down menus by indenting some items further than others. You can have a bonanza of fun by playing with this and setting it all up just the way you think it should be. In fact, you can have multiple drop down menus across the menu bar too! Just add more than one drop down menu. For example, in the image the next main menu item after categories is “Services I offer” I could add multiple pages to this using the drop down method, and then would have two drop down menus in my Primary Navigation Menu.
It’s all very easy, and very functional! Have fun setting up menus! Next week, I will share with you another way you can place menus on your site, even if your Theme does not support custom menu locations!
Keep on blogging!