Create Frontend Dashboard with WP Ultimo and WP Multisite

TEXT GUIDE

Continuing with the creation of our multi-store platform, we show you how to configure the global settings of the front-end dashboard.

We will create a global dashboard shared by all the users. They will log in to the same page like dashboard.myapp.com and they will manage their sites from the same dashboard.

We’ll do this with the WP Frontend Admin plugin, which allows us to create frontend dashboards, web apps, and show any wp-admin page on the frontend.

1- Create the main and the frontend dashboard sites

Our online store platform will have 2 sites initially:

  1. The Main Site: Also known as the marketing site, here we have the landing pages, pricing page, etc.
  2. The Front-end Dashboard Site: Here we will set up the custom dashboard, users will use this site as the global dashboard to manage their own sites.

You can create the site manually by going to Network Admin > Sites and click Add New to add a new site to the multi-site network.

Once you hit the Add New button, you need to select the following values:

  • Site Address (URL): You’ll see a field followed by your multi-site network’s domain. We’ll enter dashboard, so our site URL will be dashboard.myapp.com, for example.
  • Site Title: Enter the site title in this field.
  • Site Language: Select the site language using the dropdown selector.
  • Admin Email: Enter the main site’s admin email here because you’ll manage this site.
  • Site Plan: Don’t select any plan as this site will be used by all users with different membership plans.
  • Site Template: Use the standard WordPress default blog
  • Add Site: Hit this button once you’re done entering the general data.

Once you create the two sites, you can proceed to set the general settings.

2- Set the dashboard general settings

Go to Network Admin > WP Frontend Admin > Settings.

Once there, go to General and select the following values in the WP Frontend Admin‘s settings:

  • Enable global settings on Multisite: On. You’ll manage WP Frontend Admin‘s options from the main site. All the settings applied here we’ll also be applied to all the sites in the multi-site network.
  • Disable the wp-admin notices when viewing on the frontend: On. Enable this option if you want to remove all the plugin notifications, update notifications, and annoying notifications on the frontend pages. Keep in mind that useful notifications will be removed as well.

  • Hide pages containing our shortcode: Yes

  • WordPress Multisite: Use this site ID as the dashboard for the entire network: Select the global dashboard in a dropdown of the existing sites
  • WP Ultimo: Remove disallowed pages from menus: This depends on your marketing. You can display pages in the dashboard and when they open the page, show an upgrade message or redirect to an upgrade page; or you can just remove those pages so they only see what they can use.
  • Click Save to apply the general settings.

3- Set the dashboard access restrictions

Go to Access Restrictions and select these values:

  • Access restriction: Frontend dashboard URL: Here you need to enter the URL of the dashboard site’s homepage like https://dashboard.myapp.com
  • Important. If you want to show the pages and redirect to a custom upgrade page, you can create the upgrade page in the marketing site, and add the upgrade URL in the setting “Wrong permissions URL” found in the current settings page. We will show you how to do it later in the course.

4- Set the dashboard appearance settings

Go to Appearance and select these values:

  • Hide admin bar on the frontend: On. By default, WordPress shows a black bar at the top of the page when a logged-in user views a frontend page. The bar lets you access the wp-admin, log out, edit the current page, etc. We will disable it because our users will use our frontend dashboard only. You can use the shortcode: [vg_display_logout_link] to display the logout link anywhere.

  • Loading Animation Style: Here you can select any of the available options. This loading style will be shown on the pages with our shortcode.
  • Loading Animation Color: Select the color of the loading animation. Just consider the contrasts; for example, if your page background is dark, the animation should use a light color.

  • Clean Admin Look: Primary color for admin content: Here you can select a color to change the design of the admin pages to make them look better and elegant. If you leave it empty, the admin content will use the standard colors.
  • Click Save to apply the appearance settings.

You’re ready to continue creating your front-end dashboard!

The global options have been set and the global dashboard site is configured, and you are now ready to continue building your front-end dashboard.