You offer users best content, rare photographs, super-helpful tutorials but what about navigation? Often place a large emphasis on the creation of an perfect design but without the same careful attention to the creation of the menu, navigate through the content, so your visitors may never to get all that your website has to offer. Meanwhile, WordPress offers us great tools to create custom menu.

WordPress menu creating is very simple but is also simple to make mistakes when creating the menu of your site and so instead of trying to help the guests of your website, a hastily created navigation will confuse them.

Planning Navigation Menu in WordPress

First, you need to plan your menu in WordPress. Ask yourself a few questions:

  1. What in fact is guests want will find on your website?
  2. You want to guest on your site made a what action?
  3. The structure logic of information on your website is the clear and simple?
  4. Respect for the human psychological rules: the perfect menu contains no more than three levels of nesting; hold the attention on the no more than 5-7 objects (the number of menu items should be 5-7)?

Here are some tips that can help you plan the creation of menus in WordPress:

In three clicks. Keep the minimum number of required clicks. Access to deep content on your website is better to keep not more than three clicks, so, ideally, there should be no more than two or three levels of navigation within a parent menu item.

SEO compliance. The names of the menus relate to the keywords, a list of which you received with the seo keywords research.

Truncation. It is ideal if the menu item name consist of 2-3 words, is better – one word. If you got a very large menu, consider possibility of using the hamburger menu or mega menu, into sidebar or footer locations.

Creating Your Custom Menu in WordPress

You can create menus in WordPress by clicking Appearance > Menus in your WordPress admin area. Also You can get settings with a live preview, go to the Appearance > Customize. You’ll then see a menu sidebar of the live preview, click on the tab Menus panel.

Let’s create your custom navigation menu in WordPress admin console.

create wordpress menu

As you can see in the screenshot, our training site has three theme locations labeled Primary, Secondary, and Social links. The location names and placements vary.


Next, you can to select the pages you want to add to the menu: select the pages listed on the left hand side and click on Add to Menu button.


After adding menu items, select the theme’s location where you want to display the menu and press Save Menu button.

Adding Custom Links to WordPress Menus

What if you want to add a link to your social media profile or other custom link? This case you can use the custom link option. Just click on the custom link tab in the left-hand column to expand it. There you will find only two fields. The first one is for URL where you will need to add the link you want to add. The second field is labeled link text where you will add the visible text for the link.

For example you can create a link to by entering:

Label DinevThemes

Social Links menu

To create a Social Links menu item (it’s works with our themes), use the tab Links (Edit Menus), example:

tab Links
Navigation Label Twitter

Fake Link

You can to create an empty link (a link that doesn’t go anywhere), enter:

Label Link Text

Add icon/class to menu item

You can add a class for the menu item to add an icon before the item or show the item as button. If the CSS Classes field is not visible: click Screen Options and then check CSS Classes.

icons menu wordpress

Some themes support classes of font icons, for example like our theme Corpobox. To add the icon, for example:

1) select the icon here

2) copy string class of the selected icon: fa fa-bullhorn

3) paste in the field CSS Classes

Some themes make it possible to automatically add icons before menu item. For example, in our theme Photoline, if to create a menu item used the tab Links (Edit Menus) for Top Menu theme location, will be automatically displayed icons Font Awesome.

Pattern links:

URL http://tel:+74956627390
Navigation Label +7 495 662-73-90

Theme Locations For WordPress Menus

The appearance and location of WordPress Menu is controlled entirely by your WordPress theme. The admin console provides a user interface to add and manage those menus.

Some themes may have more than one theme locations. For example, the Magazinex theme has three theme locations primary, secondary, and a social menu. Also note that the names of these menu locations would also vary from theme to theme.


It should be remembered that in some cases, the theme locations has a strict purpose, such as to display social media links. This is necessary in order, for example, to displaying icons of the social media links.

Add Custom Items to WordPress Menus

Please Note: the lines below expect that you know php/html/css and a fair understanding of how how to customize (to edit templates) WordPress themes. Also, you need to have ready custom menu before you can proceed any further.

Lets start. You can to add our own filter into wp_nav_menu_items hook. For example like this:

function prefix_loginout_link( $items, $args ) {
    if ( is_user_logged_in() && $args->theme_location == 'primary' ) {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    elseif ( !is_user_logged_in() && $args->theme_location == 'primary' ) {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    return $items;
add_filter( 'wp_nav_menu_items', 'prefix_loginout_link', 10, 2 );

So you give ability to log in/out by adding the custom menu items using filter. The snippet above showed how add log in/out links to your Menu into primary theme location.

Customizing WordPress Menu via Plugins

To empower the settings of the menu in WordPress, you can free use the following WordPress menu plugins:

Max Mega Menu: Easy to use drag & drop WordPress Mega Menu plugin. Create Mega Menus using Widgets. Responsive, retina & touch ready.

WP Menu Cart: Automatically displays a shopping cart in your menu bar. Works with WooCommerce, WP-Ecommerce, EDD, Eshop and Jigoshop.

Page Specific Menu Items: This plugin allows users to select menu items to show per page. One menu different menu items for different pages.

Menu Icons: gives you the ability to add icons to your menu items.