Build Your Own Business Website header image

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.

Menus are obviously a critical aspect of your site and before you can tell what your site will look like you need to have a menu. And so well first thing we’re going to do is create the menu.

Where to Find “Create Menu”

Creating the menu is found under Appearance and Menus. Please note that different themes have different menu locations and a different number of menus available. When I imported everything over I imported a couple of menus that I’d already created. And that’s what you see here in this list.

Add a New Menu

I’m still going to create a new menu here. So select create new menu and the name is going to be crash course. And, create the menu. You don’t want to use the choice of “automatically add top level pages to the menu” that you see here.

Select Pages

What you want to do is go through the list of pages and decide what you want to go on the menu. I’m going to pick a whole bunch of these pages from the list and add them to the menu.

Order the Pages

What I’ve got here is too many menu items but that’s okay because some of them are going to become child pages. Actually, I need to add the agility templates page here too. Okay, add that to the menu. You can move the pages around by clicking and dragging. That gives you the order you want and allows you to move them into position for being child pages.

Create a Drop Down Menu

We’ll take our agility 3 templates and move it up to the top. Then we’ll take our no sidebars template and make it a child of that and also make our front page template a child of that.

This is how you make a drop down menu. The first level is the first level and then when you hover it these other levels drop down. Let’s see. Agility custom boxes – so you’ve got the related post box and enhanced query box under that.

Adding Categories and Tags

So that’s how you can layout the menu. It could be that you want to add a category to the menu. To do that all you really have to do is come over here to categories and add it. You can just click on it and move it over. You can add as many categories on as you want.

The same thing is true for tags although that’s not automatically obvious to you. You have to open up the screen menu and then say show me the tags. Once you’ve got the tags up you can go add the tag you want to the menu.

Add Custom Links

So you can add tags categories and custom links. Custom links are, generally speaking, a link to some place other than just a standard WordPress post or page. It can also be a link to a place further down on the page.

In the seminar we did recently on converting a static HTML site to WordPress we used custom links in the menu. We did that because the site has a very long front page. The menu items then linked down to sections below it. So, you can use custom links for that.

If you want specific posts to be on the menu you can do that. It is a little unusual to do that but you can. We should put Home on the menu. And we may as well add News to it. It’s probably going to be too big like this but we can make changes to it after we take a look. Let’s just save the menu first.

Specify a Menu Location

We haven’t yet specified the menu location. In the 2017 theme there are two locations. There’s a social links menu and there’s a top menu. This one’s going to be our top menu. Hit save menu. And now let’s come over and look at the site. There’s our menu.

Shorten Names of Pages in Menu Label

You can see the menu is way too big. One, let’s shorten the name of the home page which currently reads like a sentence. Go back over to the menu and we’ll simply call this Home. We are just changing the navigation label. It doesn’t change anything else other than just the label for the menu item.

Now we have home, agility three templates, custom boxes let’s see…we can shorten another one here. Take custom media queries and let’s call it just media queries. And then move it over one. Now, I’ll bet you it all fits on one line which is kind of the goal here when you’ve got a drop down menu. And, yes, it all fits on one line now.

0 Comments… add one
0 comments… add one

Leave a Comment