How to Add and Customize Your WordPress Navigation Menu

How to Add and Customize Your WordPress Navigation Menu

Usually navigation menus let your visitors view the most popular posts and pages with little effort. Since the WordPress 3.0 release, there will be 1 to 2 menu bars for you to create custom menus. However, the type of navigation menus would vary greatly along with each theme.

In the following, we will explain how to register a new navigation menu and then customize it in WordPress. This tutorial also covers the steps to display this navigation menu in different theme locations and widget areas.

Wait! Let’s Back Up Your WordPress Site Firstly

To create a new menu in WordPress, you need to edit the theme files. In case something goes wrong during the process, you’d better back up the whole website ahead of time. It’s possible to back up your website via an FTP program and phpMyAdmin, which requires more or less technical knowledge.

Back Up WordPress Site

If needed, you can turn to a 1-click installer or a handy backup plugin such as “Simple Backup” and “BackUPWordPress” instead. Be sure to store both your files and database in a location that is separate to the current site.

How to Register a Navigation Menu?

By default, WordPress includes a navigation menu system where anyone can create and manage menus easily. Depending on your theme, the location of menus will be different, and only a few WordPress themes support multiple menu locations. Following are the steps to register a new menu to place your navigation menu.

Step 1: Log onto the WordPress dashboard and go directly to “Appearance” > “Editor”. Then, locate and open the functions.php file from the right “Templates” section. From the cPanel interface, you can also access this theme file by opening “File Manager” and choosing the very site within “Document Root”.

Access Theme File

Step 2: Next, drop down to the bottom of this file and paste the following configuration code over there.

function register_my_menus() {
	register_nav_menus('nav-menu' => __( 'Main Navigation Menu' ));
}
add_action( 'init', 'register_my_menus' );

From above, the register_nav_menus function will create a menu, and the init action hook will let WordPress run your function properly. Besides, this “Main Navigation Menu” is the name that would be viewed from the “Menus” admin screen; while this “nav-menu” name determines the way that WordPress will understand your code. Note that only menu name includes capital letters and spaces and will be called whatever you like.

Step 3: If you want to add more menus such as “Footer Menu” and “Sidebar Menu”, just refer to the following code.

function register_my_menus() {
	register_nav_menus(
		array(
			'nav-menu' => __( 'Main Navigation Menu' ),
                        'footer-menu' => __( 'Footer Menu' ),
			'sidebar-menu' => __( 'Sidebar Menu' )
			
		)
	);
}
add_action( 'init', 'register_my_menus' );

With this method, you’ll be able to add as many new menus as needed. Remember to click “Update File” to save changes. Now, all there’s left is setting up your navigation menu as follows.

How to Set Up Your WordPress Navigation Menu?

From the backend of WordPress, move to “Appearance” > “Menus” so that you can create and edit the existing menus as below. As this menu may include links to your published content, it’s best to create essential pages in advance.

Create a New Menu
As shown, the “Menus” page is sorted into two columns. The column on the left hand contains your “Pages”, “Links”, “Categories” and “Format”; while the column on the right hand is the place where you can set up and customize menu items.

Name the Navigation Menu

If you are running a new WordPress site or just want to get started with a new menu, click this “Create a New Menu” link to begin. This will prompt you to name this menu, such as “Navi Menu”.

Add Pages to Menu

After that, you should add pages to the menu. To do so, check the box next to the item and then press the “Add to Menu” button. To display posts or tags within the menu, you only need to expand the “Screen Options” tab and select them there.

Add WordPress Posts & Tags

Add Your Custom Links
In the same way, you can add both external and custom links to this menu. This may include links to social media profiles or recommended blogs. It’s at your option to use social media icons to get connected with your social networking platform. Be sure to enter the “URL” and “Link Text” before clicking the” Add to Menu” button.

Add Custom Links

If you prefer to open this link from a new browser or tab, just check this “Link Target” option from the same “Screen Options” area.

Check Link Target Option

Edit Menu Options
Having finished adding your menu, it’s time to do more customizations to make them visually attractive. Clicking on each menu item would display its properties. Generally there are four important areas you need to edit.

Edit Menu Options

  • Navigation Label – This is derived from the title of your page but won’t affect the page title. Think seriously about this label before putting it onto the navigation bar.
  • Title Attribute –This is just what will appear in the yellow box when you take mouse over one navigation item. It determines how search engines “see” your content.
  • Move Down One – This lets you organize the order of menu items. As newly-added menu items won’t be moved, it’s best to save your menu firstly.
  • Original – This helps you know the original name of your page.

Also, it’s possible to specify menu image, image size as well as title position. The bottom “Cancel” button lets you undo the changes.

Re-arrange the Menu Structure
To make the added menu items appear in any order you like, just drag and drop them to adjust the position. A good practice is to put the pages you’d like to promote at the first place.

Arrange Menu Structure

Create Drop-Down Menus
Drop-down menus (or nested menus) are navigational menus with child and parent menu items. When visitors mouse over a parent item, those nested sub-menus will appear automatically. To achieve this outcome, just move the menu item below the parent item and then drag it to the right.

Create Drop-Down Menus

Even though you can create multiple layers of sub-items, not all WordPress themes support multi-level drop down menus. For better usability, one-layer structure is more enough.

Select Menu Location
If done, select the menu location that you’d like to display this newly-created navigation menu. In this example, there are up to four theme locations to choose from, including “Primary Menu”, “Main Navigation Menu”, “Footer Menu” and “Sidebar Menu”. In most cases, this “Auto Add Pages” option is left to be unchecked as it may disrupt your carefully-organized menu structure.

Select Menu Location

Display Your Navigation Menu in WordPress Sidebar
Apart from the menu locations, you can add navigation menus to WordPress sidebar or other widget-ready areas. To do this, go to “Appearance” > “Widgets” and then drag this “Custom Menu” widget to the right-hand sidebar or “Footer Widget Area”.

Add Navigation Menu to Footer