Set Up the Frontend Dashboard Design

TEXT GUIDE

We’ve already configured the global settings for our front-end dashboard with WP Frontend Admin. In this entry, we’ll show you how to configure the theme for the new dashboard and define the pages architecture.

Just follow these simple steps:

1- DEFINE THE ARCHITECTURE OF THE FRONT-END DASHBOARD

To define the architecture of the front-end dashboard, you just need to think about the features you want to display and how you want to distribute the features in the pages.

  • TIP: Think of a logical ordering of the admin pages on the front-end dashboard menu.

We suggest a schema like this:

  • Reports (homepage of the dashboard)
  • Products
    • Categories
    • Tags
    • Attributes
  • Coupons
  • Orders
  • Customers
  • Users
  • Settings (Site General Settings)
    • Store Settings (WooCommerce settings)
    • Pages
    • Themes
    • Customize Store (customizer)
    • Menus
  • Account (WP Ultimo)
  • Membership (WP Ultimo)
  • View my site (Shortcode)
  • Logout (Shortcode)

This schema is simple and logical, and this is how our menu looks:

2- CREATE A NEW NAVIGATION MENU ON THE DASHBOARD SITE

To create a new navigation menu on the dashboard site, go to Admin Network > Sites, and open the wp-admin of the dashboard site.

After that, go to Appearance > Menus.

Once there, enter the name of the new menu in Menu Name and click Create Menu. We will leave the menu empty because WP Frontend Admin will add the menu items automatically when we create each dashboard page.

Now we’ll configure the OceanWP theme in just a few steps.

3- CONFIGURE THE THEME FOR THE FRONT-END DASHBOARD

By default, OceanWP has a different look than what we need, so you’d have to manually customize the theme in the customizer. Basically, we need to change the logo, header style, etc.

Normally, this would take you some time. But, OceanWP comes with the Ocean Extra plugin, which works as a theme panel and allows us to import settings.

So we have prepared a file that you can import into your site to make it look exactly as our dashboard.

Use the button below to download the “OceanWP 1” template.

Once you download the file to your computer and unzipped the file, you will have a .dat file and you can import it to your site.

  • Go to Theme Panel > Import/Export.
  • Click Choose File and select the file from your computer.
  • Click Import Settings.

After that, all the settings will be imported, so the theme will look just as we have shown you. These are some characteristics that you’ll notice once the file is imported:

  • Vertical menu at the left side
  • No cart button
  • No search form
  • No page titles
  • Montserrat typography
  • Content separate from the menu
  • Content background
  • No theme credits

You are free to customize the dashboard layout and color scheme however you want, you just go to Appearance > Customize.

WHAT IF YOU DON’T WANT TO USE THIS DASHBOARD DESIGN?

We have created many dashboard designs that you can import to your dashboard. Some designs are created using OceanWP or Elementor.

You can view the full library of designs and download them.

Here’s a quick preview of the designs available that you can download and import on your dashboard site.

Close