The Toolbar Module

The Toolbar Module allows you to edit the admin toolbar that appears at the top of both the WordPress admin screen and front-end website view.

As with most of the modules, this one is based on "Views". A view is simply a saved menu configuration. You can save as many Views as you'd like.

Creating Your First Toolbar View

  1. To get started, you'll want to name your first view by typing something into the View Name box.
    Name your View
  2. Then click the Save View button to save that view name to the database.
  3. Choose the area you want to edit. Each view has both a back-end and front-end area that you can configure separately.
  4. Now choose the rules you want to apply to this view in the Add Rules column on the left. Learn more about adding rules here.
  5. Next, under Menu Configuration, you can edit the menu as you see fit. We go into detail about this in the next section of this article.
  6. Once you're done configuring your menu for one area (front-end or back-end), click Save View before editing the other area, just in case something goes wrong.
  7. Your custom toolbar configurations should now appear based on the rules you've assigned to it.

Menu Configuration 

The menu configuration section displays a list of the menu items as they appear in the toolbar. They are shown top to bottom in the configuration screen, but will appear left to right in the toolbar. 

You can edit the menu configuration in the following ways:

Reorder Menu Items

NOTE: Currently you cannot move or reorder menu items that appear on the far right of the toolbar. We plan on implementing this functionality in the future.

Reordering menu items is as simple as dragging and dropping a menu item to a different position. If you drag the menu item slightly to the right it will become a submenu of the menu item above it.

Rename Menu Items

You can change the name, aka navigation label, of any menu item by simply clicking on the name. A text box will appear and you can type in anything you want. 

Certain basic HTML tags are honored in the navigation label field, such as <em> and <strong>. It's best to enter these via the "Navigation Label" box under settings by clicking the gear icon on the menu item.

Change the Icon of the Menu Item

Much like renaming a menu item, you can change the icon of the menu item by simply clicking on the icon itself.

When you do so, a box appears with icons to choose from.  Currently you can choose from the complete library of WordPress Dashicons.

You may also choose an empty box so that no icon appears.

Hide Menu Items

You can hide menu items by clicking the Eye icon. When a menu item is hidden, it will appear light gray and the eye icon will have a line through it.

NOTE: When you hide a top-level menu item, all of it's submenu items will be hidden by default.

Create a New Menu Item

You can click the Add Item button to add your own custom menu item.

You can then choose to add a custom link to an external page, make the link act as a user to log out, or choose an available WordPress screen to link to.