- /
- /
- /
All About WordPress Menus
Menu is a powerful tool in the WordPress that allows you to add different menus to a location that your theme provides. You can create new menus and then assign location to it, if your theme provides more than one location.
In this article we will be discussing different features of the WordPress Menu and for that you need to be in the Appearance -> Menus screen of the WP admin panel.
Creating a New Menu
A menu can be created by clicking on the create a new menu link, give your menu a name, then click Create Menu. Once a menu is created you can add different types of menu items(modules) like Pages, Posts, Categories etc which is on the left side of the page and following options will be visible to you to set up the recently created menu.
- Auto add pages: Automatically add new top-level pages to this menu
If you check this option, whenever a new top-level page is created then it will automatically added to this menu. - Display location
If your theme supports more than one location then those locations will show up here as check-boxes and you can assign your menu to a desired location. - Save Menu
Click this button to save the menu. - Delete Menu
Click this link to delete the menu.
The following screenshot is of the Appearance -> Menus screen of the WP default Twenty Seventeen theme where a menu named Header Top Menu is created.
Theme Location
In the top left of the page you can see another tab named Manage Location, which as the name suggests is for assigning location(if the theme supports more than one) to the created menus. You can select the menus for each location provided by the theme from the dropdown.
The following screenshot shows the Manage Location tab of the WP default Twenty Seventeen theme which supports two menu locations namely Top Menu and Social Links Menu.
Menu Items
In the left side of the menu editing screen you can see different menu item groups like Pages, Posts, Categories, Custom Links, Tags and Format. And if you have registered any custom post type or taxonomies then you will be able those too. By default Tags, Format, custom post types and its taxonomies and hidden so, to make them appear you need to click on Screen Options button on the top left corner and then under Boxes you can check the respective field.
Pages
You can add links to the pages in the menu.
- This group has three tabs as mentioned below:
- Most Recent
Displays the list of most recent pages. - View All
Displays all the pages. - Search
Search for a page.
- And has following elements:
- Checkbox
Select a page to add in the menu by checking the checkbox next to the page title. - Select All
Click this link to select all the pages displayed in a tab. - Add to Menu
Click this button to add the selected pages.
Posts
Links to a single post can be added in the menu. All the components and functioning are similar to Pages as mentioned above.
Categories
Links to a specific category page can be added in the menu. All the components and functioning are similar to Pages group except for the fact that Most Recent tab is replaced with Most Used which shows the list of most used categories in your WordPress.
Tags
Links to posts tags can be added in the menu. Its functioning and components resembles to that of Category group.
Format
Links to post formats can be added in the menu and is similar to Categories and Tags.
Custom Links
Customs links can be added to the menu from this group, links that doesn’t fall under other menu items can be added from here.
-
It has following elements:
- URL
Enter the link URL. - Link Text
Enter the text describing the link. - Add to Menu
Click this button to add to the menu
The following screenshot shows the menu item grouping.
Rearranging and Configuring Menu Items
Once the menu items are added to the menu, the items can rearranged. And clicking on the down arrow at the right end of the module will expand the menu item and various fields of the menu item can be seen. Similarly the rearranging can be done through drag-n-drop feature provided by the WordPress. For dragging a menu item you need to hover it until a cursor changes to a 4-arrows structure.
By dragging a menu item slightly to the right of the menu item above it, a parent-child hierarchy in the menu will be created.
A menu item(module) has different choices/properties for configuring itself, if you are not able to see all the choices then click on Screen Options on the top right corner of the page and make sure those boxes under Show advanced menu properties are checked.
-
The different menu properties are mentioned below.
- URL(only for Custom Link)
URl of the menu item. - Navigation Label
Label for the menu item. - Title Attribute
The title attribute of the menu item, it is generally displayed when the menu item is hovered. - Link Attribute
Check the Open link in a new tab checkbox to open the link of the menu item in a new tab. - CSS Classes
Enter the CSS class for the menu item so that it can be styled differently. - Link Relationship (XFN)
Relation to the author of the site which the menu item is linking to. - Description
Description of the link, it will be displayed in the menu only if the current theme supports it. - Remove
Removes the menu item from the menu when clicked. - Cancel
The expanded menu item is collapsed when clicked.
