Topic Progress:

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

5: Adding A Drop Down Menu

Running Time:  4:27

Creating a drop down (aka sub-menu) is the way to group related pages. Watch the way I do something that’s really useful and a little different.

Just a word to the wise. Try to keep you’re site’s menu to as few links as possible. What’s the most important content your users MUST have easy access to?

Transcript Of This Video

I need to have some more fun. Now, I’m going to show you how to do a drop down. In this case, the way I have this drop down working is I’ve got three pages that I’ve already created, and the word “Gallery” here, that is not a page. That’s what I call a “Label.” So, how do I do all this? Again, we’re looking at the prototype site. If I look at the site that we’re working on, here it is. We have the three different links here. OK. That is, each one of these represents a page, “WP Standard” and the “Lightbox” and the “Videos.” But I want to organize this correctly into a drop down, so I’m going to go into– Now, this time I’m going to go straight into menus. Let’s not waste clicks. All right, this is the menu that we’re working with, and we’ll see we have those three links here. Let me get them in the order first that I want them to go into, so I’m just going to drag this into place. I don’t want that, OK. You notice it says “Sub item” over here, so that would be a drop down. This would be a drop down, but I don’t want that. I want to have “WP Standard” first. Sometimes this can be a little weird to work with, and you’re seeing me prove it to you. You’re going to go up to “Lightbox–” No.

Let’s get it this way. OK, now I’ve got my three right over here, so this would not be a drop down of any kind. OK, how do I get the drop down to work? How do I get that “Label” thing going? Ther e’s a little trick that I discovered. It wasn’t anything that I read somewhere, and it was just one day I stumbled on it.

Go over here to “Custom links,” and I’m going to just–

Right over here it says “HTTP://” just put something in. Let’s don’t put something in. I’ll show you what the problem is. Let’s just put the link text as “Gallery.”

Now, I’m going to then “Add to menu.” I can’t do it. The reason why is I get this little warning here and WordPress wants me to put in something, OK, a link. I’m going to trick it. This is the thing that I discovered quite by accident, and I’m just going to put in a hashtag over there. Now when I do “Add–” OK, so now it did. The wheel spun, and it did get added, and it’s not a page it’s a custom link, and I’m just going to move it right up into here. OK, and I am going to move this over here. So all I’m doing is just dragging and dropping, and now you can see in each case these three pages are sub items. These are drop downs off of “Gallery.” The way I have it set up, currently, it’s a link, and I don’t want that. Let me show you what I’m talking about, so let’s save the changes that I made and let’s go look at the website. Now see, my mouse pointer turns into a hand, and if I click on “Gallery” it’s going to do nothing. That’s not a good experience for the user, so we are going to have to make a change here. All these are pages, OK, so here’s what I mean. “Lightbox,” fine. All right, back to “Menu,” we go to make a slight adjustment, but a very important one. I’m going to go over here to “Gallery,” click on the chevron and take all of this out. Now before I do, could you create a URL here to a link to another website or a link to your website, or–? Yes, absolutely. But remember I said I didn’t want the word “Gallery” to be clickable. I just wanted to use it as a label, so I have to take all that out.

Now there’s nothing to save other than save. If I jump out to the front end of the site, now you’ll see it is no longer clickable, the word “Gallery,” which is perfect. That is exactly what I want. So now I have a drop down menu, and it’s of a certain kind, in that the word “Gallery” is just a label and not a link itself.

All 6 Modules In This Course

  • All Free Access

    To see all the videos in this course just fill this out to create your free account.

  • Please Read This

    You're about to subscribe to my WordPress Big 3 newsletter and that's a good thing!

    I'll keep you up-to-date with WordPress news, resources and advice delivered to you almost every Sunday.

    My newsletter is commercial free except for an occasional announcement of a discount for one of my services.

    No worries. Your email address will be kept safe and sound with MailChimp. I will never use it for any reason other than sending the WordPress Big 3 Newsletter to you. I value you and your privacy.

    If you don't want my newsletter you will still be able to see many videos in this course.

Illustration of 2 people talking

Get A Free 60 Minute Screen Sharing Consultation From Bud Kraus, Experienced WordPress Site Developer and Instructor