Last updated on

In this video, you will learn how to create navigation menus. I show you how to add, delete, and organize menu items in WordPress websites.

 

It can be unsettling the first time you create a new page, eagerly hit ‘publish’ to show your creation to the world, only to discover that when someone visits your site they cannot readily find your masterpiece.

In a panic, you go to the WP dashboard,  Pages > All,  and breathe a sigh of relief when you see it in the list.  Your content is safe.  But why is your content not readily visible to visitors?

The blogroll appears automatically when you visit the main domain URL, but what about that great About Me page you published,  how do visitors find that?   You probably missed an important step – adding your new page to the navigation menu.  Whew!  You’ll know better next time.

To learn more about adding and controlling the navigation structure and items for your website, I recommend that you watch the above video first, then continue reading for further clarification and tips.

The Process of Creating Menus

The placement or location of navigation menus in WordPress depends on the theme.  Some themes provide only one menu location, while others enable adding different menus in multiple locations on your site – headers, footers, sidebars.

WordPress provides tools to work with to refine the process of creating custom menus on your website.

These tools give you full control of your website navigation, whether it is in the header area, in the sidebar or in the footer of your site.  You will be able to add posts, pages, categories and custom links with ease in locations on your website that your theme allows.

navigation menus in wordpress
Image 1
nav menu locations
Image 2

To add a menu, follow the basics steps outlined below. I list them here to reinforce the information included in the video; therefore, I recommend that you view the video first and read the summary as a reminder.

  • In the WordPress dashboard, go to Appearance > Menus.
  • Check the drop down list to see the menu names and locations provided by the theme. (Image 2)
  • Create a new Menu or use one provided by the theme.
  • From the left column, choose the items that you want in the nav menu and click “Add To Menu”.  This will add the menu items to the list in the right column. (Image 1)
  • Drag and drop to organize menu items and sub items in the order that you want them to appear in the navigation bar.

You can only add menu items from content that you have published on the site.  If you have not created and published the content, you won’t see anything in the left column to add to the menu.
  • When adding items to a drop down list, first create a non-clickable title (as shown in the video).
  • The title label will be the non-clickable “parent” and underneath it will be the indented clickable “child” items.
  • Add child items by ticking the items in the left column and clicking on the Add To Menu button.
  • Tick the box at the bottom of the menu area to choose the display location for that menu (header, footer, sidebar widget)
  • Remember to save the menu after modifying it.
  • View the site on the web to check that the items are listed in the desired order.

Home Menu Button – Is It Necessary?

WordPress by default has a “Home” page link to the blogroll.  Instead of “Home”, I changed mine to “Blog”. You can name the blogroll anything you want.

For a new website the blogroll is recommended as the default landing page for visitors. This is because the blogroll is a dynamic page that is updated each time you add a new post.

Search engines give priority to crawling dynamic content.

Later you can consider changing the page that visitors land on when they first arrive on your site to a static page instead of the blogroll.  This depends on your niche and the purpose of your website.

For example, you may want visitors to land on a features page that highlights specials and discounts of the day, week or month. On a more complex website you may want to explain what visitors will find “inside” the various sections of your site and you may want to give them tips for navigating around the site.

Most site visitors know that clicking the Site Title or Logo will take them to the home page or main URL (e.g. yourdomain dot com).  In this sense, it is not necessary to have a “Home” button.  But I recommend having a “Home” button when using a Static front page display, in which case you would create another page for the blogroll.

Bear in mind that when a website has many repeat visitors, unless the front page is update regularly, it can get boring for regulars to see the same page over and over, especially if they are coming to the website to read the latest content.

A way around that is to feature a few of your latest blog posts on the static front page but most themes do not provide this out of the box.  You will need to do this with code or the use of a plugin.

Image and Icons in Menu Navigation Labels

icons-in-nav-menusShould you want to get fancy and add images or icons to menu labels, unless you are using a premium theme that provides this option, it will be necessary to add this functionality into the functions.php file of your website (preferably in a child theme).

If you are not technically minded to work with code, you will find plugins that do this.

This can jazz up the look of a website and works well for adding social media buttons. But when used for main internal navigation links, make sure that adding images or icons in the navigation bar does not slow down the loading speed of the site or its responsiveness on mobile devices.

 Using WP Customize Panel To Manage Menus

 

When initially creating and setting up menus, I recommend using the main navigation section as shown in the video and screenshots. Later as you build out the website and add content,  you may prefer to quickly add or delete menu items via the Customize option.

Go to  Appearance > Customize > Menus and the customize panel appears on left side of the screen as show in the above image.

Working within the customize option has two benefits.  The changes will appear in real-time on the right side of the screen. You will be able to see what it looks like on your website before hitting the publish button.

A second benefit is that when making custom code or CSS style modifications in the customize panel, the code is retained during WordPress and theme updates.  Before WordPress implemented the Customize feature,  if one was not using a child theme the changes were not saved and had to be redone for each update.

Learn How To Create Your Own Income Website

Have you been waiting a long time to start building a website that generates income for you?  Today is the day you are going to get started.   Maybe you tried before but were missing vital pieces of knowledge.  To learn at your own pace in a friendly and safe environment, click on the blue banner below to check us out.

Check us Out - Start Learning

 

You may also like:

Siterubix Video Tutorial
Baby Steps to Affiliate Income

 

Return To Blog

 

Navigation Menus WordPress Video Tutorial

Jude Banks

Avid online marketer and blogger, here to share internet marketing tips and insights. I'm on a mission to bridge the gap between knowledge and profit. If your goal is to secure your future with online marketing, we are like-minded! I hope my blog will help with your journey. Thanks for dropping by and visit again soon! Let's connect! ~ Jude

11 thoughts on “Navigation Menus WordPress Video Tutorial

  • March 7, 2018 at 12:11 pm
    Permalink

    Hi Jude!

    Like your blog post. It is handy and practical tutorial.

    Menus are very important part of the website and proper creation helps a lot. Your tutorial can help newbies and other more advanced users of WordPress to have a reference place when it comes to learning how to create the proper menu.

    very good work. keep it up, wish you success with your blog.

    Regards,
    Igor

    Reply
    • March 7, 2018 at 5:18 pm
      Permalink

      I agree, getting the navigation right is important, which is why I created this tutorial. WP makes it easy but then most things are easy once we know how it works. Until then a tiny piece of missing information can cause a lot of wasted time and frustration.

      Thank you, Igor, for your kind feedback about the tutorial. I appreciate your taking the time to read my post and sharing your thoughts.

      All the best,
      ~Jude

      Reply
  • March 7, 2018 at 8:35 pm
    Permalink

    This is such an important and informative piece of work you have provided here Jude.
    So often navigation around a website is put to the back of peoples minds in an attempt to produce quality content, but it is such an important factor for user experience.
    You have laid out perfectly how important this issue is with explicit instruction.
    Good work.

    Reply
    • March 7, 2018 at 9:06 pm
      Permalink

      I’m glad you found the post informative.  Fortunately WP provides us with custom tools to help us give users an easy navigation experience.  

      I was chatting with someone the other day who who told me she spent hours figuring out how to add a page to the nav menu. She couldn’t believe how easy it was once she learned how to do it.  Trial and error works too, eventually, but it can be time consuming.  

      Thanks for visiting and sharing your thoughts. Much appreciated.   ~Jude

      Reply
  • March 10, 2018 at 6:55 am
    Permalink

    This is a great post because so many people have problems with the wp navigation menus. The fact is that the navigation menu is important to website visitors.

    When I visit a website the navigation menu is one of the first things I look for so I’ll know what the site is about and how it’s arranged.

    Thanks

    Reply
    • March 10, 2018 at 4:50 pm
      Permalink

      You’re right, I see some new WP bloggers struggle with setting up their navigation menus.  Usually the issue is something simple that has been overlooked, such as the need to actually add the menu item to the navigation bar…lol. 

      Thank you for stopping by, Mike. I appreciate your input.   ~Jude

      Reply
  • March 10, 2018 at 10:54 am
    Permalink

    Hi Jude,

    Excellent post about WP Navigation Menus, very detailed and informative.
    You noted several new ideas that I was not aware of regarding menus.
    One of those is the Customize feature and how it saves custom code or CSS style modifications without using a child theme.
    Maybe you could write another article explaining this in more detail?

    Thanks,
    Ed

    Reply
    • March 11, 2018 at 2:55 am
      Permalink

      Glad you found the post informative, Ed.  Always good when we can pick up a new idea!

      That’s a great suggestion to do a post on the Customize function in WordPress.  I’ll add that to my list.

      Thank you for stopping by and sharing your thoughts.  ~Jude

      Reply
  • March 18, 2018 at 7:51 am
    Permalink

    Hi Jude!

    Thanks for the video. Keep up with your good work.

    Reply
  • June 29, 2018 at 5:28 pm
    Permalink

    Another very concise tutorial that we can put to work straight away.
    Have you had any experience with the Gutenberg interface?

    Reply
    • June 29, 2018 at 5:54 pm
      Permalink

      Hi Tony, thanks for stopping by and your feedback on my WP menu tutorial.

      Regarding Gutenberg, I’m waiting until after the WP 5.0 beta releases, which I understand will include the roll out of Gutenberg into the WP core. I’ve heard it will happen in August. Then it will take a while for theme and plugin developers to create Gutenberg compatible themes and plugins. It’s about time WordPress had its own drag and drop editor. I’m looking forward to using it. ~Jude

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *