Build Your Own Business Website header image

WordPress 3.9 Crash Course – Part 18 – Creating Menus in WordPress

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next in this WordPress 3.9 Crash Course we’re going to create menus. Notice how we’ve got all these WordPress pages that I created showing up here in the menu area but they don’t look like they are really part of a menu. Well, WordPress has this totally fancy menu system. Because we haven’t created a menu it just automatically added the pages I’ve created to the menu.

Create the First Menu

I want to clean it up so let’s go to Appearance and Menus and we’ll create a menu. Let’s call this one Main Menu. It doesn’t matter what you call it just as long as you understand what it means to you when you look at the name of the menu.

Add Pages

Now that we’ve created it, the first thing that we’re going to do is add some pages to it. I’m going to add Optimizing Your Content, Adding Text from Google and…let’s view all.

“Home” Page

Notice that I have two Homes. I’ve this Home and I have this Home. The Home at the very top is your front page regardless of what you called it. The Home at the bottom turns out to be my front page too but this is actually the name I gave it. I’m going to click on this Home and Adding Text from Google Docs, Adding Text from Word, Blog and Optimizing Your Content with Formatting. I’m going to add those to the menu. So now I have these things on my menu.

Change the Arrangement of the Menus Items

Let’s say I don’t like this arrangement. Well, I can just drag one thing to another place and drop it there and that changes the arrangement. I can also change the navigation label so it doesn’t have the name of the Page but whatever I want to call it. I can say Google Docs and then Microsoft Word and then Optimizing Your Content and hit save menu. Now that I’ve done that, this actually changed the menu labels.

Assign a Menu Location

One other thing I want to do is assign a menu location. Menu locations are different for every theme. This theme has two locations, it’s got a sidebar menu and it’s got the top primary menu. We’re going to assign this to the top primary menu. Hit save menu and when we come over here and refresh this, now here’s what we’ve got. We’ve got Home, Google Docs, Microsoft Word, Optimizing Your Content. As you can see we’ve changed this up.

Creating a Drop Down Menu Item

Let’s say we want to make this into a drop down menu. I’m going to just take the sample page and add it to the menu. I’m going to rename the sample page as “Add content from Various Sources”. We’ll pretend that’s the name of that page instead. Then I can take that, drag it up above Google Docs and then I can drag Google Docs so it is indented and Microsoft Word so that it’s indented. Now what I’m going to have is a drop down menu.

Let’s save this now and refresh it. Now I have Add content from Various Sources as a menu item and below it are Google Docs and Microsoft Word. And that’s how you create a drop down menu simply by taking a menu item and indenting it under another menu item. If I indented this one more, I would have another flyout menu.

Creating a “Dummy” Menu Item

Let’s say that I don’t want this to be a link to a page. You can create a dummy menu item for a top level menu item that doesn’t open anything. You do that by adding a custom link. Hit pound sign (#) and let’s say “Content from Various Sources”. Add that to the menu, now we can drag that up here and we can take these and put them under it. Let’s save this menu, refresh it, now it says “Content from Various Sources”.

But when I click on it nothing happens because the pound sign (#) means “go to the same page”. So if I go to Google Docs I can click on this and it doesn’t take me anywhere. There may be times when you want a dummy menu item that doesn’t actually take you anyplace but that has drop down items below it. This is the easy way to do that.

Adding a Custom Link

You can also add links to other websites. I’ll add a link to my website. Come over here to this custom link, add that, “Start Here”. Add it to the menu, drag it up and save the menu. Let’s refresh it and now “Start Here” links off to another site. It takes me back to BYOBWebsite.

Add Product Categories to the Menu

Ray asks, “Should you set up all your menu items to match your shop categories?” Well, as it turns out Ray, if you open up your menus you’ll see that you have a product categories tab down here. You can simply add the product categories that you want to your menu here.

So, yes, it is absolutely possible to add your product categories to your menu. In your situation I think it probably is a good idea to put your main top level product categories on your menu. That makes a lot of sense to me. Again, you don’t have to do it in pages because you have this tab down here that says product categories that will let you do that.

0 Comments… add one
0 comments… add one

Leave a Comment