You are new to WordPress with a fresh clean install and have just finished writing your first page.
You have done all of your research, proof-read the content to correct any errors and added a couple of images.
Wanting everything to be perfect, you hit the publish button.
At this point, you eagerly navigate to your homepage to see how your new masterpiece will look from the front end and then panic sets in.
Where is the page? what did I do wrong?
This happens to almost everyone when they are first starting out so, in this WordPress Beginner Series Tutorial, I will be showing you how to set up the custom navigation menus on your website.
What You Will Learn
- How To Create A Primary Menu In WordPress
- How to Create A Dropdown Menu
- How To Remove A Menu Item
- The Navigation Label
- Adding Categories To Your Menu
- How To Create A Custom Link
- How To Add A Placeholder Menu Item
- How To Add A Social Links Menu
- Adding A Menu To The Sidebar or Footer
How To Create A Menu In WordPress
First, in your WordPress dashboard, click on Appearance -> Menus
Alternately, you can also bring up the Menus option by clicking Customize.
This will bring you to the Menu administration area where you will be able to configure your menus in many ways.
First, you will need to give your menu a name.
I normally put something like Main Menu but, you can name it anything you want then, click Create Menu.
Notice that everything is very light gray but once the menu has been activated, it becomes darker.
- The next step is to click the drop-down arrow next to Pages to reveal all of the pages you have created.
- Then click the checkbox next to each page you wish to include in your menu
- Click Add To Menu
- Since this will be the main menu that appears at the top of our website, be sure to check the box Primary Menu
- Click the Save Menu button
The menu structure now appears in the center and from there you can drag and drop each page to be displayed in your preferred order.
Now when you view your homepage, you can see your primary navigation menu at the top of your website.
How To Create A Dropdown Menu In WordPress
To create a Dropdown menu, simply drag the menu item so it is slightly indented to the right of the one on top of it as shown in the image below.
Always remember to save your changes when updating anything on the menu.
Notice the arrow next to the About Me menu item which indicates there is a sub-item underneath.
Some themes allow 3 or 4 levels of sub-menu items but not all themes support this feature.
In the test site that I am using for this tutorial, which is the “Twenty Sixteen” theme by WordPress, I was able to add 5 levels before I stopped trying but, this is something you would want to use sparingly as it just gets ridiculous after awhile and you don’t want to take away from the user experience (UX) of your site.
How To Remove A Menu Item
To remove a menu item, click the arrow to the right of the item name, to open the menu options.
Then click the remove link and the menu item will be removed from the main menu structure.
The Navigation Label
The Navigation Label, as seen in the last image above, is the name of the menu item that will appear on your site.
By default, it will be populated with the title of the page or post but, you can change this if you want.
For example, you may have a page titled “The 10 Best Ways To Train Your Dog By Using Yummy Treats” but of course, this is too long to be listed as a menu item so, you may want to change the Navigation Label to something much shorter like “Dog Training”.
This is the technique I used on this website.
If you look at the primary menu above, you will see an item titled “Build A Website” but clicking that item will take you to a page titled How To Create A Website In WordPress.
[Update: Since the original writing of this post, my navigation menus have changed]
Adding Categories To Your WordPress Menu
One of the many great things about WordPress is the amount of control it gives you with regard to the navigation.
While you are able to add Posts to the primary menu, this is another one of those things that I feel should be used sparingly.
The reasons for this are that as you build out your site, you most likely will be writing many more posts than pages and, if you add too many to your primary menu, things get too long and cluttered.
I feel it is best to keep your menu structure as simple as possible in order to maintain a good user experience (UX) so, with posts, you can add them to a category and then, if you have a category that you really want to call attention to, you can add it to your primary menu.
Doing this will add a blogroll of the selected category to your primary menu and every post you assign to that category will automatically be added, without the need to add the individual posts themselves.
This will make your primary menu structure much less cluttered than if you had 50 Dropdown items in your menu, for example. Makes sense, right?
I used this technique with the WordPress Tutorials menu item at the top of this site.
To add a category simply follow the same procedure that you did for pages.
Click the Dropdown arrow next to categories to reveal all of the categories you have created then, choose which one to add to the menu then, simply drag and drop to position it where you want it placed within the structure.
How To Create A Custom Link
There are a couple of things you can do with Custom Links in WordPress.
First, you can create a menu item that links either to another page on your website (internal linking) or an external link to another website altogether.
You can also use them to create a “placeholder” menu item that is not clickable and is used to add sub-menu items underneath it.
Personally, I don’t like to link out to external websites in this way so I never do this because I want my users to feel that when they are clicking on items in my menu, that it is taking them somewhere on my site.
I have been to other sites in the past where they have put their affiliate link within a menu item and was surprised to be immediately taken off-site, without warning and, to be honest, I didn’t like it.
There are better ways to link out to affiliate products that won’t alienate your visitors.
However, since it falls within the scope of this tutorial, I will show you both ways to use custom links.
Just like in previous examples, click the arrow to the right of Custom Links to reveal the options.
From there, add the URL to the page you want your menu item to link to.
Note: if you are copy and pasting the URL, it will add a second instance of http:// and you don’t want that so, be sure to get rid of one of them.
I normally just highlight the first one before I paste, to automatically write over it.
Also, if you are linking to a secure page, make sure you change the http:// to https:// if you are typing the link instead of pasting.
The “Link Text” field is your “Navigation Label”, it is the name that you want to give to the menu item then, click add to menu and again, you can drag and drop to your preferred location within the menu structure.
To add a placeholder menu item, place a hashtag into the URL field and whatever navigation label name you want into the link text field.
This, of course, will place a non-clickable heading within your menu structure called “Dog Training” that you can use to place all of your related articles underneath, as a sub-item Dropdown menu.
How To Add A Social Links Menu
There are many themes that support a social links menu but, some do not and, those that do, usually handle it in a different way so, for this tutorial, I will be showing you how to add a social links menu to the Twenty Sixteen theme, which is the theme I have been using for this tutorial.
By social links, I am not talking about social shares and for those you would normally need a plugin.
These are menu items that will link to your social media profiles where visitors can view your page and follow you if they wish.
To add this menu, click “Create New Menu” at the top of the menu structure, just like you did when creating your primary menu.
Name it “Social Links” or whatever you want and click the “Create Menu” button.
Be sure to check the “Social Links” box under “Menu Settings” as shown below.
Next, create a custom link as shown in the previous paragraph and paste the URL into your social media account.
In the “Link Text” field put the name of your social media account, Facebook, for example.
Be sure to click “Save Menu” and your social link icons will appear on the lower right-hand portion of your website.
As you can see from the image above, in this case, I linked to my Facebook and Twitter accounts.
The Twenty Sixteen theme supports many different social media sites and automatically adds the proper icon once you have linked to it as explained in the previous step.
As stated earlier, other themes handle it differently and with some, if you access the social links from Appearance -> Customize, it will already have designated fields for each of your social media URLs with some displaying the icons on the top of your site rather than at the bottom or, in a sidebar.
Adding A Menu To The Sidebar or Footer
The Primary Menu at the top of your website is prime real estate so, you may not want to clutter that area with pages that are less important so, many webmasters choose to place some of their pages in a sidebar or footer.
Some of those types of pages include:
- About Me
- Terms of Service
Again, what can be done here is dependant upon what your specific theme supports unless you know how to code which, is beyond the scope of this tutorial.
For example, some themes only support 1 menu and don’t allow anything to be placed in the footer.
Unfortunately, the theme I am using for this tutorial only supports 2 menus with nothing in the footer so, in order to place those types of pages on my sidebar, I need to do without the social links menu.
To do this you would first have to create your menu as outlined previously in this tutorial, however, once you have clicked the “Create Menu” button, do NOT click on either the Primary or, the Social Links checkbox under “Menu Settings”, just leave both of those boxes unchecked.
Clicking the Social Links checkbox will, in this case, cause weird little icons to be displayed on the bottom right of your website so, only check that if you are actually posting social media links.
Then add the pages you want to the menu and save the menu.
Next, navigate to Appearance -> Widgets.
On the left side of that page, you will see a listing of all the widgets that are available to you.
Click on the “Custom Menu” widget and it will reveal what your placement options are.
In this case, I can add the widget to the sidebar or to 2 locations on the bottom of my content for pages or posts.
With the sidebar selected, click the “Add Widget” button.
Next, click the arrow next to the “Select Menu” option, choose the menu that you created in the previous step, give it a title if you wish and, click the “Save” button.
Now you will be able to see the sidebar menu from the front end of your site and as you can see, I gave it the title of Important Pages.
The same procedure applies when adding a menu to the footer, if the theme you are using supports footer widgets, simply add the widget to one of the footer areas.
To get all of the training, tools and, support you need to start and grow your online business, check out the review of my #1 recommendation so you can see why I’m so passionate about it.
Need Any Help?
I hope you have found this WordPress Beginner Series Tutorial useful. If so, feel free to share it with your friends and if you have any questions or comments, please leave them in the area below.
To Our Success!!