Home > Help Center > Applications > WordPress > Manage WordPress Menus

Manage WordPress Menus

In this article we'll show you how to create and manage menus in WordPress using the built-in menu editor.

We are going to enable menus that are shipped with twentyseventeen theme.

  • Login to the WordPress Dashboard.
  • From the 'Appearance' menu select the 'Menus' option.
  • Select Create a new menu link at the top of the page
  • Enter a name for your new menu in the Menu Name box
  • Click Create Menu

wordpress menus

Adding Items to a Menu

You can add different link types into your menu, these are split between panes left of the menu you're currently editing.

Locate the pane entitled Pages.

Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.

Select the Pages that you want to add by clicking the checkbox next to each Page's title.

Click the Add to Menu button.

Click the Save Menu button once you've added all the menu items you want.

wordpress menus

Note: The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Tags are hidden by default.

Deleting a Menu Item

Locate the menu item that you want to remove in the menu editor window. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.

Click on the Remove link.

wordpress menus

Click the Save Menu button to save your changes.

Customizing Menu Items

Navigation Label This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.

Original A link to the original source of the menu item (e.g. a link to view the post or page).

Following items are hidden by default. Use Screen Options to show the required fields.

Title Attribute This field specifies the Alternative ('Alt') text for the menu item. This text will be displayed when a user's mouse hovers over a menu item.

Link Target Select "Same window or tab" or "New window or tab" from the pulldown.

CSS Classes Optional CSS Classes for this menu item

Link Relationship (XFN) Allows for the generation of XFN attributes automatically so you can show how you are related to the authors/owners of site to which you are linking. See Link Relationship for details.

Description Description for this link. The description will be displayed in the menu if the current theme supports it.

Click on the arrow in the top right-hand corner of the menu item to expand it.

Enter the values for the required fields that you want to assign to the item.

wordpress menus

Click the Save Menu button to save your changes.

Creating Multi-level Menus

The WordPress menu editor allows you to create multi-level menus using a simple drag and drop interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the child underneath its 'parent' and then drag it slightly to the right. Position the mouse over the 'child' menu item.

Whilst holding the left mouse button, drag it to the right.

wordpress menus

Release the mouse button.

Repeat these steps for each sub-menu item.

wordpress menus

Click the Save Menu button in the Menu Editor to save your changes.

Adding Your Menu to Your Site

If your current theme supports custom menus, you will be able to add your new menu to one of the Theme Locations.

Click Manage Locations tab and in the section titled Theme locations, click the check box for the location where you want each menu to appear:

wordpress menus

Click Save menu once you've made your selection.

Visit the site to see how does the menu looks like:

wordpress menus

Creating the social menu

Click create a new menu link to create another menu (we can give it any name) and we'll associate it with the theme Social Links Menu:

wordpress menus

Click Save Menu to save the changes.

But what about Social Menu Links?

Let's show you how to read the theme files.

Go to Appearance > Editor and click on Theme Functions (functions.php) link.

Click within the text box and enter Ctrl+F from your keyboard to select search option of your browser - enter social:

wordpress menus

Using the arrows we get precious information:

wordpress menus

But there is no information about the links, and are these all available options?

Now enter in the search field icon and while checking all highlighted matches we found the needed information:

wordpress menus

Let's check the contents of this file /inc/icon-functions.php:

wordpress menus

Within the file we found all supported social links icons in the $social_links_icons = array() paired with the associated URLs:

  $social_links_icons = array(
    'behance.net'     => 'behance',
    'codepen.io'      => 'codepen',
    'deviantart.com'  => 'deviantart',
    'digg.com'        => 'digg',

The theme design allow us to use only five of them, if we select more icons this will break the design.

We suggest you copy the whole array in an empty file and use it to refine your selection in functions.php file (below you see the changes we made):

'social' => array(
        'name' => __( 'Social Links Menu', 'twentyseventeen' ),
        'items' => array(
          'link_facebook',
          'link_twitter',
          'link_linkedin',
          'link_instagram',
          'link_pinterest-p',
        )

Now let's go back to Appearance > Menus to create the social menu links.

Click on Custom Links and enter the URL and Link Text:

wordpress menus

Click Add to Menu.

Repeat this step for the remaining four links:

wordpress menus

Click Save Menu.

Refresh the Browser and go to the Footer section of the website:

wordpress menus

Our menu is displayed correctly and all links work fine.

Conclusion

We hope this information will help you to create easily menus in WordPress sites.

#management #content

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support