Learn How To Customize Your WordPress Menu

Learn How To Customize Your WordPress Menu

About This Lesson

In this lesson you’ll learn how to customize your WordPress menu.

I’ll show you how to,

  • Include – select what links you want to include in your menu
  • Re-arrange – choose what order your links get displayed in
  • Customize – choose the text that gets displayed
  • Expand – create a drop down menu (sub menu)
  • External – you’ll also see how to create links to external sites, i.e. your Facebook account or Google Plus account, if you want
Prerequisites

To be able to customize your menu, you’ll need to have,

  1. Installed WordPress
  2. Installed a WordPress theme
Course Navigation

How To Create A Website Course

This is Step 5 Part 2a – See the full course here!

How To Use WordPress Course

This is Step 5 Part 2a – See the full course here!

Read All About It

Before We Begin – What You Need To Know

Before you start setting up your WordPress menu, there are three things I want to make you aware off.

1) – Styling Your Menu

The menu feature in WordPress lets you choose what links get displayed in your menu, but it doesn’t allow you to style the links, i.e. set what color they are, what color they are when you hover over them, etc.

This is set by your theme.

Some themes will allow you to customize this, but this will depend on the theme you’re using.

2) – Where Your Menu Is Placed

Where your menu is placed on your site is also determined by your theme.

Some themes might give you multiple locations for where you can insert a menu (see below), but this is decided by your theme.

3) – Multiple Menu Areas

Some themes will have more then one area where you can insert custom menus.

So for instance, you might have the normal navigation menu somewhere near the top of your site, but you may also have a footer menu, or a sidebar menu, or you may even have two menus near the top of your site.

But again this will depend on the theme you’re using.

How To Setup Your Menu

To setup your menu, or make any changes, you’ll need to be logged into the admin area of your site. Then in the navigation menu, go to Appearance > Menus.

WordPress Menu

Step 1/3 – Create A New Menu

When setting up your menu for the first time, you’ll need to,

Create A New Menu

  1. Click the “create a new menu” link
  2. Give the menu a name
  3. And finally click the “Create Menu” button

Now you can add the links you want to include in your menu. There are two different ways you can do this.

1) Add A Link To A Page You’ve Published On Your Site

You can add a link to any page you’ve already published on your site, by simply ticking the pages you want to include. So to do this,

Add A Link To A Page

  1. Simply click the pages you want to add
  2. Then click, “Add to Menu”
  3. If a page is not listed in these options, use the “Search” link, to look for a page

2) Add A Custom Link

If you want to create a link to somewhere other then a page you’ve created, for instance a post or a category/tag, or maybe even another website, you can use the “Links” option.

Add A Custom Link

  1. First, you’ll need to choose “Links”
  2. Then enter the address that you want to send people to when they click the link. In this example I’m using www.google.com but you can link to anywhere within your site, or any other website.
  3. Enter the text that you want to be “clickable”, in the “Link Text”
  4. And finally click, “Add to Menu”

Step 3/3 – Set Theme Locations

Once you’ve added the links you want to have in your menu, you then need to active the menu. To do this,

Theme Locations

  1. Scroll down to where the “Menu Settings” are
  2. Then under “Theme Locations”, choose where in your theme you want to insert this menu (this is decided by your theme, some themes will have more then one area)
  3. Click “Save Menu”

Which, in this example gives me this menu on the live version of my test site.

Live Menu

Other Things You Might Want To Do With Your Menu

Change The Order Of Your Links

If at any time you want to change the order of the links in your menu, here’s what you need to do,

Change The Order Of Your Links

  1. Make sure you’re within the menu that you want to edit
  2. Click, then drag, the link you want to change and move it into its new position. In this example I’ve dragged the Homepage link from the middle to the front
  3. Then click save menu

Which then gives me this menu on my test site.

New Live Menu

Create A Drop Down Menu

With WordPress menus you can easily create drop down or sub menus. To do this,

How To Create A Drop Down Menu In WordPress

  1. Like before make sure you’re within the menu that you want to edit
  2. Click, then drag the link that you want to have under your main link. Then move it below, and to the right of the main link. So in this example I’ve dragged the “Google” link and placed it below, and to the right of my main, “Latest News” link
  3. Then click Save Menu

Which, if we then look at the live version of my site, you’ll see that the “Google” link is only visible when I hover the “Latest News” link.

How To Create A Sub Menu In WordPress

If you want more links as part of the “Latest News” drop down, simply repeat the above process.

If at any time you decide you no longer want a link in your menu,

Remove A Link

  1. Like before, make sure you’re within the menu that you want to edit
  2. Click the arrow to expand the link that you want to remove
  3. Click remove

Change The Text That’s Clickable

You can also change the text that’s clickable. So for example let’s say I want to change the link that’s currently “Sample Page”, to “About”. To do this,

Change The Text Thats Clickable

  1. Like before, make sure you’re within the menu that you want to edit
  2. Click the arrow to expand the link that you want to change
  3. Delete the old text in the “Navigation Label” and replace it with “About”
  4. Finally click “Save Menu”

Which then gives me this menu on my live site.

Live Version With Link Text Changed

If you want to make it so that when someone hovers over one of your links, it displays some additional text, here’s what you need to do,

How To Create Hover Text

  1. Like before, make sure you’re within the menu that you want to edit
  2. Click the arrow to expand the link that you want to edit
  3. Fill out the “Title Attribute”, with what you want the hover over text to say
  4. Finally click “Save Menu”

Which then gives me this effect when I hover over my “About” link. It’s pretty small in this image, but hopefully you can see the little yellow box with some text.

Hover Text

Make The Link Open In A New Tab

You can make it so that when someone clicks on one of your links, it opens in a new tab within their browser, to do this,

Open Link In A New Window

  1. First, you need to go to “Screen Options”, which is in the top right hand corner of WordPress
  2. Then make sure “Link Target” is ticked (by default it’s not)
  3. Like before, make sure you’re within the menu that you want to edit
  4. Then click the arrow to expand the link that you want to make open in a new window
  5. You’ll now see an option where you can tick a button that says “Open link in a new window/tab”. Tick it
  6. Finally, click “Save Menu”

Delete A Menu

If at any time you want to delete the whole menu,

How To Delete A Menu

  1. Like before, make sure you’re within the menu that you want to delete
  2. Then click delete menu

And that’s all you need to know about WordPress menus.

Next Steps

This lesson is a part of Step 5 in creating your website and learning how to use WordPress. Step 5 is all about installing and setting up your WordPress theme.

I’ve broken this step into two parts.

In the first part, we cover the basics of WordPress themes, which you can see in these four lessons,

Then we move on to the second part, setting up your theme.

Now because there are 10,000+ different themes, all with different options, it’s impossible for me to show you how to set them all up.

However I can show you how to setup the following,

  • WordPress Menus: – See how to change the links within your navigation menu and also see how to create a drop down menu
  • WordPress Widgets: – Learn how to use widgets to customize what gets displayed in your widget areas, such as your sidebar and footer
  • WordPress Plugins: – See how to add extra features and functionality to your site, such as a contact form, a slideshow, a coming soon page, etc