Add Menu Icons and Set Sub-items on the Dashboard Menu

At this point, we already created all the pages for the frontend dashboard and added the pages to the menu. Now we need to improve the look of the menu by adding icons to each item.

We will do this easily using the WP Menu Icons plugin, which allows us to customize our nav menus by adding icons to them.

You just need to follow these simple steps:

1- Open the dashboard site

Go to Network Admin > Sites, and click Dashboard to open the wp-admin panel of the dashboard site.

2- Add icons to the menu items

To add icons to the menu items, you need to first tick the type of icons you want to use for the menu items. You can do that in WP Menu Icons and click Save.

Once you select the type of icons you want to use, you can proceed to add menus to the menu items.

3- Add icons to menu items

  • Open the menu item you want to edit.

  • Select the menu icon you want to add to an item and click Save.
  • Repeat this for each menu item.

This is how the menu items will look once the icon has been added to it:

4- Configure the subMenus

To create sub-items, you need to drag the menu items and drop them under a parent item.

For example, you can convert the Categories, Attributes, or Tags into sub-items of the Products item.

Also, you can convert the Store Settings, Pages, Themes, Customize Store, and Menus items into sub-items of the Settings item.

This will make our menu look shorter and easier to understand.

Finally, you need to click Save Menu to save changes.

5- Change the header position

At the beginning of the course, we changed the header position from the left to the right side to be able to see the Quick Settings panel from WP Frontend Admin.

Now that we configured the pages, we won’t be using the WP Frontend Admin panel anymore and we can change the position of the header from the right to the left again.

  1. Go to Appearance > Customize.
  2. Once there, go to Header > Position and select Left.
  3. Finally, click Publish.

Done!

Now the front-end dashboard should be working correctly by now and look great!

This is how it’ll look after being completed: