WizardPanel - Customizing Menu2

Menu2 is the newer WizardPanel main navigation system. It uses the standard WordPress menu editor together with dedicated WizardPanel fields for dropdown types, Font Awesome icons, highlights, cards and content panels.

For general information about accessing menus and assigning menu locations see the Navigation & Menus guide. If you are using the original menu system see the Customizing Menu1 guide.

Selecting Menu2 In WizardPanel

Important: Before using Menu2 go to WizardPanel > Header and set Menu Design to Menu2. Menu2 is the first/top option. The Mega and Dropdown options underneath it are both Menu1 designs.

The settings in the Setup section below assume Menu2 is selected and that the Main2 WordPress menu is available.

Menu2 Setup

The supplied Main2 menu provides around 70% of the completed Menu2 used on the demo. The remaining Menu2-specific settings are added manually using the steps below. This section focuses only on completing the supplied Main2 menu so that it matches the demo.

1. Getting The Main2 Menu

Fresh v3.1 installation - If WizardPanel for WordPress v3.1 was installed as a fresh installation, the Main2 menu will already be included and ready to configure. Continue with the setup steps below.

Existing product updated to v3.1 - Download the full WizardPanel for WordPress ZIP and locate:

content-import/menu2/menu2-import.xml

To import the base Menu2 menu go to WordPress Admin > Tools > Import > WordPress and upload menu2-import.xml. When prompted select your administrator account and allow WordPress to adapt the URLs to your domain.

Once complete you should have a new menu named Main2. The steps below assume Main2 has now been imported.

2. Assign Main2 To The Main Location

Go to WordPress Admin > Appearance > Menus > Manage Locations and assign Main2 to the Main menu location.

Confirm once more that WizardPanel > Header > Menu Design is set to Menu2.

3. Set The Main Dropdowns

Edit the Main2 menu and set the Dropdown field on the following top-level items:

4. Enable The Panels

Set the Panel field to On for the following second-level items:

5. Setup The Panel Content

Two of the enabled panels contain their own feature content. Open each item and enter the following Panel settings.

Hosting > Fast Shared Hosting

Extras > Website Security

6. Set The Menu Icons

Finally set the Icon field on the following Menu2 cards. These values use Font Awesome classes.

Save the menu when complete. Main2 should now contain the remaining Menu2 settings used by the demo.

Customizing Menu2

The setup above recreates the supplied demo configuration. The sections below explain how Menu2 works when you want to customize the menu further.

Menu2 Structure & Depth

Menu2 settings change depending on the depth of the menu item. Drag menu items to the right within the WordPress menu editor to make them children of the item above.

Top Level - These are the main links displayed in the header. Top-level items can use no dropdown, a Mega dropdown or a Basic dropdown.

Second Level - Items directly underneath a top-level item. In a Mega dropdown these items can be converted into content panels.

Third Level - Items nested inside a Menu2 panel. These display as Menu2 cards.

Standard WordPress Settings

Menu2 continues to use the standard WordPress menu fields. Select a menu item to edit its settings.

URL - The destination of the menu item. The supplied Main2 menu uses Custom Links so URLs can be imported without WordPress needing to match page objects.

Navigation Label - The visible name of the menu item.

Title Attribute - Optional text that may be displayed when the link is hovered over.

Open link in a new tab - Opens the link in a new browser tab/window.

Description - Used underneath Menu2 card titles. This is the standard WordPress Description field rather than a separate Menu2 field.

If Description or Link Target is hidden, use Screen Options at the top right of the Menus page to enable the required WordPress fields.

Top Level Settings

Top-level Menu2 items include the following additional WizardPanel fields:

Dropdown - Controls the dropdown used by the item. Select None, Mega or Basic.

Highlight - Adds a small badge next to the top-level menu label. Enter the text you would like to display, for example Popular or New. Leave blank to disable the highlight.

Icon - Stores a Font Awesome icon class where the item display supports an icon.

Mega Dropdowns

Select Mega from the Dropdown field of a top-level Menu2 item to create a Mega dropdown.

Second-level items inside a Mega dropdown can be enabled as Panels. Panels can contain their own content or third-level cards.

Menu2 Panels

When a second-level item is placed underneath a top-level Mega dropdown a Panel setting will be available. Set this to On to turn the item into a Menu2 panel.

When Panel is enabled the following settings are available:

Panel Icon - Set a Font Awesome icon class such as fas fa-server.

Panel Heading - Set the heading displayed at the top of the panel.

Panel Text - Add supporting text displayed underneath the panel heading.

Panel List - Add one list item per line.

Panel Link Text - Set the text for the optional panel link displayed at the bottom.

Panel Link URL - Set the destination of the panel link.

Third-level children placed underneath a panel display as Menu2 cards.

Menu2 Cards

Third-level items placed inside a Menu2 panel display as cards. Cards use the following fields:

Navigation Label - Displays as the card title.

Description - Displays underneath the card title.

Icon - Enter a Font Awesome icon class such as fas fa-server.

URL - Sets the destination of the complete card.

Basic Dropdowns

Select Basic from the Dropdown field of a top-level Menu2 item to display a traditional dropdown menu.

Basic dropdowns use the standard menu hierarchy. Drag items underneath the top-level parent to add them to the dropdown.

Software Integration URLs

Menu2 supports WizardPanel Software Integration URLs. URLs starting with #software_url_ are automatically converted to the correct URL for your selected software integration.

For example:

#software_url_domainregister
#software_url_submitticket
#software_url_websitesecurity

These should be entered as Custom Link URLs. WizardPanel replaces them automatically on the front-end.

Adding & Removing Items

Add new items using the Add menu items section on the left of the WordPress Menus page. You can add Pages, Posts, Categories or Custom Links and then drag them into the required Menu2 hierarchy.

To remove an item open the menu item and click the Remove link at the bottom of its settings.