How to create Multilevel / Hierarchical menus in WordPress

guna.site- In WordPress you are able to create a multilevel / hierarchical menu via WordPress Menu System ( WordPress admin -> Appearance -> Menu ) as well as via Theme Customizer ( WordPress admin -> Appearance -> Customize ).

In this documentation we will be looking at the steps to create a multilevel / hierarchical menu.
We will start by looking at the WordPress Menu System.

WordPress Menu System
You can access the WordPress Menu System by logging into your WordPress dashboard, and navigate to Appearance -> Menu.

Set the screen Options
On the right hand, top corner of your screen, you can find the screen options tab.

1. Click on it to drop-down and show all available types and properties.
2. Check on all the available check-boxes, except the Description check-box.
3. Customizr and Customizr Pro Theme, does not support menu description. Therefore, you should leave Description check-box unchecked.

Create Menu

1. Click on the create a new menu link.
2. Enter your new menu name. In this documentation, we will name it Sample Menu.
3. Click on Create Menu button

Assign Menu Location

Next, we will need to assign menu to it's location.

1. Assign Sample Menu to Main Menu ( Theme locations ) by checking on the check-box.
2. Click on Save Menu button.

Types Of Menu Items Available

In Customizr and Customizr Pro Theme, there are 6 types of menu items available.

1. Pages - They are the pages that you have created.
2. Posts - They are the blog posts that you have created.
3. Custom Links - You can use this to create a menu item that links to any URL.
4. Categories - They are your available categories.
5. Tags - They are your available tags.
6. Format - They are your available post formats.

Creating Menu Item ( Parent Menu Item )

1. In this example we will assign a page, named Sample Page to the menu as a Parent Menu Item.
2. Check on the Sample Page check-box, and Click Add to Menu button.

3. You will see that it's automatically added to the right hand panel as a menu item.

Note: This is optional. Normally you do not need to use these steps.

• You can edit the properties of the Sample Page menu item, by clicking on the tiny drop arrow on the right.
• It will expand and show you some text inputs.
• You can enter a Title Attribute, this will only be visible on the front end, when you move your mouse pointer over the menu item and stay there.
• Open link in a new window/tab check-box. You can check on this check-box, if you want the page to open in a new tab or window.
• You can enter CSS Classes to enable special styling of this menu item using custom CSS.
• The Link Relationship ( XFN ) is for adding rel attribute to the menu link. You can refer to this documentation ( Defining relationships with XFN ) for more information on using XFN.

4. Click on Save Menu button to save all your edits.

5. Repeat steps 1 to 3 to assign pages, posts ... etc to the menu as Parent Menu item.

6. Important Notes: 

• Keep your menu as short as possible.
• Speaking from personal experience - Sometimes menu items get lost when you try to save a very large menu. This happen because your posted data is too much for your server to handle.
• A short and organized menu is easily accessible on mobile. Long menu is difficult to access in mobile, because it requires scrolling and not user friendly.
• Normally, we only assign pages to menu, because they are not accessible unless we tag it to the menu.
• We do not assign posts to menu, because they are accessible via your Home page or Posts page.

Create Sub Menu Items

1. Now we can proceed to create sub menu items. Looking at the previous screenshot, you can see that there is a page named Level 1. We will be adding a few sub menu items to it.

Select pages that you want to use as sub menu item and add them to the menu area. 

• In this example we will add Level 2a, 2b, and Level 3a, 3b pages.
• Check on their check box and click Add to Menu button.

2. You will see that they are added to the Menu Structure on the right.

3. WordPress menu system supports drag and drop. Therefore, you are able to click and hold a menu item, drag it to a new position before releasing the mouse button to drop it in place.

• You can start dragging the sub Level pages into their position.
• Drag Level 2a and place it under Level 1 and slightly to the right, this will indicate that it's a sub menu item of Level 1.
• Drag Level 2b directly underneath Level 2a, this will indicate that it's a sub menu item of Level 1, but on the same level as Level 2a.
• Now we can create a third level, by dragging Level 3a and place it under Level 2b and slightly to the right, this will indicate that it's a sub menu item of Level 2b.
• Drag Level 3b directly underneath Level 3a, this will indicate that it's a sub menu item of Level 2b, but on the same level as Level 3a.
• Look at the following screenshot to have a better understanding.

Tweet

Postingan terkait:

Ditulis Admin — July 29, 2019 — Add Comment — Wordpress