Home » WordPress Tutorials » You are reading »

How to use WordPress Navigation Menus

wp-nav-menu
In the past week, almost 40% coming from themes support thread and email support I’ve received were question about how to use the WordPress menus or how to set-up the menu with the descriptions.

Before i started digging deep into WordPress Navigation Menus tips and tutorials, here’s a brief history on the Navigation Menu. Navigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customised navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.

Today, i am going to offer some tips on how to use and mastered the WordPress Navigation Menu or better know as wp_nav_menu() for them code geeks out there.

1. How to create a new menu

First we need to check if the theme you’re using support the navigation menu. Go to
wp-admin->appeareance->menus.
If the ‘Menus’ sub menu existed then the theme is custom menu supported.

To create a new menu, navigate to top of the menus page and click the create a new menu.

  • enter your prefer menu unique name *no numeric character recommeded
  • once done, click the ‘create menu’ call action button in right hand side
  • you will now have a new menu for you to set-up by select or checked the check box in left meta box for categories, pages, tags and links. Click the ‘Add to menu’ button call to action.
  • save the menu location – after you set up the selection into the new menu you just created, choose where you want the menu to show in bottom of the new menu name ‘Menus settings’, there should be something like Primary menu, Secondary menu or Footer menu. Checked one of the location and save the menu.

2. How to disable a menu

In some cases, the theme you’re using allowed you to disable the navigation by creating and save an empty menu into the menu location. using similar step above.

  • enter your menu name ’empty-menu’ *without the quote
  • once done, click the ‘create menu’ call action button in right hand side
  • we do not need to add item into this empty menu
  • Choose the location you want to disable menu and save the menu.

3. How to add description for each menu item

If the theme support sub menu description, you can set-up the description with this step.

Step 1 – go to wp-admin -> appearance -> menu and click on the top right Screen Options and check (tick) the red description area
check-description

Step 2 – open any menu item and text into description box like below
description-text

Final Summary

That’s about it, you now know how to create new menu, disable menu and add menu descriptions. Check for more info on how to create a new menu location here.

Related Topics:

WordPress Tutorials
Building Your Website with WordPress? Learn How to Optimize it
WordPress Tutorials
How to Detect Mobile or Tablet Condition in WordPress
WordPress Tutorials
Designing and Protecting Your WordPress Site is Easier Than You Think
WordPress Tutorials
The Ultimate SEO Tips For Your WordPress Blog
How to use WordPress Navigation Menushttp://cdn.dezzain.com/1/2013/10/wp-nav-menu.jpghttp://cdn.dezzain.com/1/2013/10/wp-nav-menu-150x150.jpgRichie KS WordPress TutorialsMenus,WordPress TipsLearn how to use WordPress Navigation Menus to create and save new menu, how to disable a menu location and how to add menu description if the theme support it. DEZZAIN.COM
Enjoy This Article?, Follow us or Share it smiley
viral and buzz WordPress theme

11 Comments Already

  1. I’m using this theme now. How can I enlarge the fonts of the sub-menus? Thank you.

    Public CommentUserI'm using this theme now. How can I enlarge the fonts of the sub-menus? Thank you.
    • try add this to theme option->custom css

      #custom .sf-menu li li a { font-size:1.4em; }

      Member of DEZZAIN.COMAdministratortry add this to theme option->custom css #custom .sf-menu li li a { font-size:1.4em; }
  2. Hello, this theme is awesome! This runs through w3c validators. All is good but the only issue is with recent comments with avatar enabled. If avatar image is not enabled, this passes through w3c validators. It would be nice to display avatar image next to the comments…..

    Can you find what’s wrong with avatar image?

    Error Line 530, Column 190: & did not start a character reference. (& probably should have been escaped as &.)

    …ploads/avatars/5/1373585315-bpfull.jpg&w=32&id=5&random=1397666768″ alt=”Avata…

    Where does this id, random etc come from? Is it coming from some other site?

    Public CommentUserHello, this theme is awesome! This runs through w3c validators. All is good but the only issue is with recent comments with avatar enabled. If avatar image is not enabled, this passes through w3c validators. It would be nice to display avatar image next to the comments..... Can you find what's wrong with avatar image? Error Line 530, Column 190: & did not start a character reference. (& probably should have been escaped as &.) …ploads/avatars/5/1373585315-bpfull.jpg&w=32&id=5&random=1397666768" alt="Avata… Where does this id, random etc come from? Is it coming from some other site?
    • seem like the buddypress avatar, not sure if its full validate for buddypress avatar core.

      Member of DEZZAIN.COMAdministratorseem like the buddypress avatar, not sure if its full validate for buddypress avatar core.
  3. Sensational theme. I love it. It gives a really great opportunities to adapt to their needs. Even went to his partial translation into Polish. Thank you.

    Public CommentUserSensational theme. I love it. It gives a really great opportunities to adapt to their needs. Even went to his partial translation into Polish. Thank you.
  4. i love you,your theme is great!!!i love love love…

    Public CommentUseri love you,your theme is great!!!i love love love...
1 2

Write a Reply or Comment

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


You can wrap php, js or style css code with [PHP]..your code...[/PHP]