Last Updated on
When you have built a bunch of content, of posts and pages, you want to show the content you created on your main page. This is done through the creation of a menu. It is not too difficult to create menu’s in WordPress, but it requires some time.
Today I am going to teach you how to create menu’s in WordPress, where to place them and how to show them to your readers.
Menu’s In WordPress
Menu’s are in a way a list of buttons or links for your site. It can be nicely organised by category or easy to understand names so that people know what type of content you are offering on your site. You can also get extra attention to the content that you feel deserves more attention.
A good example is to make a menu for your best products (or reviews of products) or services, so that it will be easy for your customer to find the products you are offering or suggesting to them.
In the same way if you are creating a website for a brick and mortar business, you would have a menu item for “about the company” with the mission statement, vision, history, job offers and contact form.
You would have a products item for all the products you are selling, you would have a services item for all the services you are offering. It would give you an option to link to your blog, forum or shop if you have a content focussed website and want to link to these other parts of your firm.
You could even link to departments of the company through an item link.
For affiliate marketeers this is the excellent place where you can put your best scoring product reviews, your how to guide or tutorials and more. The options are endless.
To get a menu on your site there are however a couple of requirements. More about them below.
Content Comes First
Of course, before you can create a menu you will need to have content on your website. Content you create through the use of pages and posts in WordPress.
Pages are the more static variant of content – they are excellent for a business’ mission statement. Posts are for the typical blog type of content or news articles.
Want to learn more about content creation? Read my tutorial about content creation within WordPress here.
Requires A Theme
The theme of a WordPress website defines where menu’s are displayed on a site. When you have a chosen theme, you can then select the individual menu’s and put them on the places that the theme has designed them for.
Is the whole themes business still a confusing story to you? Read my tutorial on choosing different themes here.
If your page and theme doesn’t have the option for a menu, you have the wrong theme and need to choose a different theme. Choosing different themes is very simple within WordPress. You find it in your WordPress Dashboard, through the menu options: Appearance – Themes. A lot of themes are available for free.
Let’s Create A Menu In WordPress
So now that we got the content for the menu and a theme that supports the usage of menu’s, let’s look at how the menu system works in WordPress. I have to agree with you, the interface looks a little daunting to say the least. I wish that WordPress had actually done something about the way the menu designer works, but we got to work with what we got.
It is essentially not too difficult to understand so I will try to explain it at my best effort.
You will find the WordPress menu editor under:
Appearance – Menus
What follows next is that you will see the menu’s you already created there. If you haven’t created anything yet, it is time to first create a menu by going through the link create a new menu.
On the next screen you just need to give the new menu a name. Don’t worry too much about what name you give it. The name of the menu is not visible to your visitors, it is just for you a name to identify the different menu’s when you have multiple menu’s in your website.
I will create a new menu to show you how it is done. I named mine “testmenu” for the sheer purpose to show you how it is done here. After I filled in the name I clicked on the button Create Menu, to save it.
Each menu can have several menu items and sub items if you would want to go that far. Let’s get started!
On the left side you will find tabs with the names “Pages“, “Posts“, “Custom Links” and “Categories“. When you click on the different tabs, you will find the content you created for each of them, except custom links.
Within Pages, Posts and Categories, you will always see the “Most Recent” first, so if you do not see all of your content that you would like to use in your menu, you need to click on View All. If you got a lot of content, you are even better of clicking on Search, so that you can search for the right content.
It works pretty simple, you check off for the content that you want to get in your menu and then you click on the Add To Menu button.
As you can see, I added Own Online Boss – my welcome page, Blog – a special page for displaying my blogs – and Contact Me – a page where I have a form displayed to let people get into contact with me.
The same way we just added pages to our menu, we can also add Categories to our menu.
If you have already created some categories, you can link them to your menu and when people click on the link they will see all the content you have published for that category displayed.
As you can see above, I linked my Reviews category to my menu.
Sub Menu Items
Below categories I often link some top content part of that category as sub-items. These sub-items will be displayed when I hover over the menu “Reviews”. So I will now show you how you create sub menu items.
Sub menu items are displayed also as a sub to another item within your menu. You can drag items around to fix the sorting of your menu and when you drag and drop an item slightly to the right, it will become a sub menu item.
In that way you can create very deep menu’s with several sub menu’s and sub menu items in it. It is however advised to not make it too deep of a menu. Usually 1-2 levels deep is the most useful for your visitor.
As dragging and dropping isn’t as easy a technique for everybody, I’d like to go into detail on that for you here.
Drag & Drop Explained
You can drag and drop the items in the menu around. Dragging and dropping is a method used often with computers and the use of a mouse. Here are three easy steps to do a successful drag and drop:
- Have your cursor above the item you want to drag
- Press the left mouse button and keep it pressed in
- Drag the item to the position you want to have it and let go of the left mouse button
Edit and Delete
To edit an existing menu item, you need to click on the down arrow on the far right of the item. It will then unfold the editor for that item, like shown below.
You can change here the name of the link that is displayed in the menu. It will by default take the title of your page, post or category, but you can edit it and for example make a too long title smaller. You can also use the Move Down One / Up One links to move the item up or downwards in your menu. Note that moving around items can also be done with a drag & drop movement.
On the bottom left of the editor is a link to remove the item from your menu. It will not delete any content from your site, just the link within the menu you created.
Be sure to save your menu after making any changes you did.
Location Of Your Menu
When you are done with adding menu items, there is one more thing you need to fix before we are done and can look at the result. The menu needs to be linked with the website’s theme, so that it will be displayed and clickable for your visitors.
As you can see from the image above, there is a menu settings part below the last item on your menu. Under it you will find Display Location. The text and options displayed there differ from theme to theme, but it will be something similar to my website.
In my case there is a Before Header Menu and an After Header Menu. As you can also see, there are currently already menu’s set to those positions (FooterMenu and TopMenu – note that the FooterMenu is a tad bit confusing, but that is because I changed menu positions between two different themes a while ago).
You should choose one of the display locations / positions and then we are done with the menu, so then you should definitely not forget to click the Save Menu button.
Now it is time to check out how your menu is displayed on your website. You can browse to your website or alternatively click this menu item to view your website:
When there are things not optimal or you want to add more, you can simply go back to the menu editor in WordPress and edit your menu.
Before I forget, there is also an option called Custom Link within your menu editor. Here you can add external URL’s to content outside your website, link files from your site, such as downloads or create so called numb menu items.
Adding A Custom Link
It is not so difficult to add a custom link and it goes pretty much the same way as with pages, posts and categories, but here you need to type the full URL to the content you want to link.
You could for example link to a product of a different seller you want to have in your menu. When people click on the link, they will be directly go to the product website. For the example, I will show you how to link directly to Amazon.com
In the box URL you add the URL of the content you want to link towards. I added https://www.amazon.com there.
In Link Text you put the actual name of the menu item that will be displayed in your menu. I typed Go To Amazon so when they click on Go To Amazon, they will end up on the amazon website.
When you are done with this, you click on the button Add To Menu and the item will be added to your menu.
Numb Menu Items
What I mean by that is that the menu item will actually not lead to anywhere and be clickable. The advantage of that is that you can create a menu item just for the purpose of displaying menu items below it.
You do that by using the custom links option from before, but instead of writing a full URL at URL, you only place a ‘#’ symbol there. That tells that you want to link to content that is within the same page at the same location.
Sidenote: The ‘#’ actually refers to anchor linking and is a technique you can use with a bit of more advanced html coding, to link between segments within the same page. I will write a tutorial on that as well some day.
Just as before, you can give the new menu item a name and then you can add the new numb menu item to the menu. Now you should place links to different pieces of content below this numb menu item, so that when visitors hover over the numb menu link item, they will see the sub items displayed and can follow them.
In this tutorial you learned how to create a new menu for your website. Menu’s being displayed are depending on the theme you have installed and activated. To link items to your menu, you need to have created content on your site.
There are a couple of different methods you can link different types of content with and you can reorder, edit and delete items. It is important to save your menu after every change.
If you have any sort of troubles with the creation of your menu, please leave a message in the comments below. I will answer them all.
Want to learn how to get started with your website and get 1-on-1 coaching by me? Check out how to get started now!