fbpx
The Admin Bar

Building a Minimal Client Dashboard in WordPress

May 19, 2021

By: Matthew Sebert

Filed Under: , ,

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode

I recently decided to build my own minimal dashboard for the clients on my care plan for added value. In the past I’ve shared access to my Google Analytics with clients, but I found that although they were excited about the prospect of being able to keep tabs on their website’s stats, that excitement quickly faded.

For the majority of my clients, Google’s out-of-the-box Analytics setup was just too much—and I  totally get it, there’s a LOT of data in there and it’s not the easiest thing to navigate! 

This complexity resulted in them rarely, if ever, checking in on their analytics to see how things were going which in turn resulted in many of them becoming a bit more apathetic to their website. Updates to content slowed down, new content wasn’t being added as frequently, and their sites began to run the risk of stagnating. No good! 

Knowing they were interested in the concept of viewing their analytics, I decided to pare down the data they had immediate access to on their own minimal dashboard and try to simplify as much of it as I could in hopes that they’d be more inclined to check more frequently. This made it easier to quickly see a broad overview of their sites performance, track their top pages, content, and get an idea of how well their marketing efforts were fairing. 

To add an extra benefit and further personalize their dashboard, I also added downloadable logo and font files for their business; so long as I had those files on hand. I do, more than occasionally, get emails from my clients asking if I would be able to send them X version of their logo in Y color, so why not add these to an easy to access page as well? Adding a downloadable version of their WOM might not be a bad idea either (This idea came from a member of the The Admin Bar FB group...  thanks Morten, I can’t believe I didn’t think of this!)

The Tools You’ll Need

To build this dashboard I used a few different plugins and a tiny bit of code to get it to work the way I wanted it to. 

Tools & Plugins Used:

So, with those plugins downloaded and installed, let’s get to work! 

How to Build Your Own Minimal Client Dashboard.

Step 1: Add Your Clients as New Users

For each of your clients you’ll be adding, you’ll want to create accounts for them. 

Users > Add New > Fill out your clients information and set their user role to Subscriber. 

TIP: Don’t forget to uncheck the “Send User Notification” when creating these so once it’s built you can send them an announcement yourself when it’s ready.

Once the user info has been added, click Add New User. Now that the user has been added click “edit” on their account and uncheck the “Show Toolbar when view site” under Personal Options to keep the front end of their dashboard looking clean. 

Step 2: Create Your Client’s Dashboard Page in Google Data Studio

We’re using Google Data Studio to display the analytics on your client’s dashboard. Head over to your Data Studio account and create a new report. 

When you choose the blank report you’ll be greeted with a collection of data sources and tools you can use. Choose Google Analytics

From here choose the user account, property, and view for the client you’re building the dashboard for. 

Once selected, click the blue add button. You may be notified that “You are about to add data to this report”, click the blue “Add to Report” button in this notification. 

Now your blank canvas is ready to design! The page will already have one, let’s call it a card, of information, but you can delete that if you don’t want to use it. Set up your report page by choosing the elements you’d like displayed on the dashboard by clicking the Add a Chart option found in the toolbar. 

There’s a lot of choices here, but for my report I primarily used Tables, Scorecards, Time Series, Geo Charts, and Pie Charts. Feel free to experiment and use whatever you feel would work best for you and your clients. 

For this example, let’s set up a Scorecard that will show the client’s bounce rate. Choose the Scorecard option from the list and place it anywhere on your report. 

By default it will be set to show New Users, but we want to show the bounce rate. While the card is highlighted, you’ll see your data options on the right hand side of the screen. 

Change the Metric from New Users to bounce rate. You can edit the default date range, and even add a comparison to a previous period of time to help demonstrate the data changes over time. 

Now your info card is ready to roll! Repeat these steps to create the other info cards on your dashboard. 

My dashboard includes Organic Searches (scorecard), Users (scorecard), Paveviews (scorecard), Average Time on Page (scorecard), Bounce Rate (scorecard), Users (line graph), New Users (Line Graph), User Regions (Geo Chart), Traffic Sources (Pie Chart), Top Locations (Table), and Top Pages (Table). 

You may notice that my chart looks different than yours at this stage, so let’s get to styling it to match your agency or your clients business.

To customize the style of these cards, click on one of them and in the same right hand panel where you choose what data to display is an option to change the style. 

Here you’ll be able to choose the colors, fonts, and other visual aspects of your cards. 

Once you’ve customized the look of your report, you’re ready to add it to your client dashboard. Click the Share button at the top right of your screen to open the Share Settings.

 A popup will open to set the sharing permissions of your report. Click on Manage Access and make sure that “Anyone with the link can view” is checked. 

For my reports, I also ticked “Prevent editors from changing access and adding new people” as well as the “Disable downloading, printing, and copying for viewers”. This may be different for you depending on what you’d like your clients to be able to do.

Save your settings and close the popup and click the carrot right next to the share button to see your sharing options. Choose “<> Embed Report”. The first time you choose this, you may need to tick the “Enable Embedding” box. After you’ve done so, it will give you the embed code.

You can now make copies of this report to keep all your styling intact for your other clients. File > Make a copy > Copy Report. Since this is a copied report it has the same data from before. To swap out the property analytics you want click on Resource in the top bar > Manage added data sources > Edit > Choose the new Account, Property, and View you would like to swap it out with and click Reconnect in the top right corner and then Apply in the popup. The new clients data is now shown and you’ve kept all the hard work you spent on the style and layout. 

Now we’ll create your client’s dashboard pages on your site and use this embed code to display it, so let’s build that page next!

Step 3: Create Your Client’s Dashboard Page

Create a new page in WordPress. I named these pages using the clients name and used their abbreviation as the slug. 

The client dashboard page is made up of four sections in total. The header, the analytics section, the downloads, and a login notice “backup”. 

The look and feel of the page is up to you, however keeping it simple is most likely your best bet. My header simply contains the client’s name, and option to log out, and a jump link to get them to their downloads.

The next section is only intended to display if the client finds their page while not being logged in. Add a bit of copy letting them know that to view the content on the page that they’ll need to be logged in and give them that option. Set your title and add a button that will link to your login page. Easy peasy. 

Next, create a new section that we’ll add your clients analytics to. Inside this section you can add your title. I used “Website Overview | Last 30 Days”. Give your section a bit of padding, around 75px top and bottom should be good. 

Under your title add an HTML widget and paste the Embed Code you got from your GDS report from the last part of the tutorial. Once pasted, you should see the report showing on your page.

Now, we don’t want just anyone seeing this information so we need to hide it for anyone who’s not this particular client and anyone who’s not currently logged in. That’s where Dynamic Conditions plugin comes in, this is a free, yet powerful plugin that does exactly what its name implies.

Once installed, you’ll see a new option inside Elementor (if you’re using Oxygen this functionality is baked in). 

To show this section to only the client the page is meant for, we’ll need to set up some rules. Right click your section and choose edit. Under the Elementor ‘Advanced’ Tab you’ll notice that there’s a new Dynamic Conditions option. 

Setting this up is really straightforward. Choose User Info in the Dynamic Tag section. Click the wrench icon to view its settings and in the field section choose ‘Email’. 

Once that’s set, choose ‘Show When Condition Met’ in the Show/Hide Options, Condition should be set to ‘Is equal to’, compair type is set to ‘Text’, and your conditional value should be the email address associated with the user that is allowed to view this content. 

And you’re done! Now this section will only show to the specific client who’s meant to see it. 

We’ll want to do the same thing with the login warning we just built, but opposite. 

This should be set up the same way, however choose HIDE when condition is met. 

Now, when a user who’s email address matches your rules views the page they’ll see their dashboard but the “please login to view this page” will be hidden. 

If you’d like, you can also create a file download section like I did for my clients and set its visibility the same way you set up the dashboard section.

TIP: Something I learned while working on this project is that when you set a link (to one of your client’s logos or font files for example) is that you can simply type “download” in the Custom Attributes section of the link settings and it will trigger a download automatically when the link is clicked. Nifty!

Step 4: Create Your Portal’s Login Page

The login page I created for my clients

Login pages should be simple, but that doesn’t mean they don’t need to look good! 

I mirrored my website’s design for the login page to keep branding consistent so I won’t cover too much about the design of your login page as that’s bound to be different for each person building it. We’ll focus on the functionality instead. 

Create your login page as you normally would using Elementor Pro’s Login Widget. 

Once your page is built, it’s time to add the nifty login redirect that will bring your client to their page based on their user credentials.

Step 3: Add a Redirect That’s Dependant on Who’s Logging In


To accomplish this I used Peter’s Login Redirect plugin. This will allow you to set redirect rules for specific users. In this case, we’ll redirect our clients right to their dashboard. 

Since you’ve already set up your users, this step should be a breeze. 

Under settings you’ll find a Login/logout Redirects option available. On this page you’re able to choose a username (only users who currently don’t have a role set up will be visible). Choose your client’s username, add the link to their dashboard page in the URL field, and the page that they should be redirected to when they log out (In my case I sent them back to the initial login page). 

Repeat these steps for each of your clients once their dashboard pages have been built. Simple as that! 

Step 4: A Bit of Extra Code Will Help 

Since these login redirect rules have been set up, there’s a possibility of hitting a small issue. If the client tries to log in and fails, we want to ensure that the ‘wrong password’ notice is shown on the custom login page you built. 

To do this, add the following code to your code snippets:

Snippet One: Redirect Back to Custom Login After Failure

// Redirect the user back to the login page after the login failed, and add a $_GET parameter to let us know. Courtesy of WordPressFlow.com
add_action( 'wp_login_failed', 'elementor_form_login_fail', 9999999 );
function elementor_form_login_fail( $username ) {
    $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
    // if there's a valid referrer, and it's not the default log-in screen
    if ((!empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
        //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
        //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
        wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
        exit;
    }
}
// This is also important. Make sure that the redirect still runs if the username and/or password are empty.
add_action( 'wp_authenticate', 'elementor_form_login_empty', 1, 2 );
function elementor_form_login_empty( $username, $pwd ) {
    $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
 if ( empty( $username ) || empty( $pwd ) ) {
    if ((!strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') )) {
        //redirect back to the referrer page, appending the login=failed parameter and removing any previous query strings
        //maybe could be smarter here and parse/rebuild the query strings from the referrer if they are important
        wp_redirect(preg_replace('/\?.*/', '', $referrer) . '/?login=failed' );
        exit;
    }
   exit();
 }
}

Snippet Two: Show Error Message After Login Failure

    function generate_login_fail_messaging(){
        ob_start();
        if($_GET['login'] == 'failed'){
        echo '<div class="message_login_fail" style="background-color: #ca5151;color: #ffffff;display: block;margin-bottom: 20px;text-align: center;padding: 9px 15px; width: fit-content;margin: 0 auto;"><span style="color: #ca5151;background-color: #fff;width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;font-weight: 900;border-radius: 50%;margin-right: 10px;">!</span>Oops! Looks like you have entered the wrong username or password. Please check your login details and try again.</div>';
        }
        $return_string = ob_get_contents();
        ob_end_clean();
        return $return_string;
    }
    add_shortcode('login_fail_messaging', 'generate_login_fail_messaging');

The last step is to add a shortcode on your login screen to display the error message. Wherever you feel appropriate for your layout, add the shortcode “[login_fail_messaging]” so the error message shows on your custom login screen.

Final Thoughts

Although I’ve set this client portal up on a subdomain of my own website, this can just as easily be accomplished on your clients website using the same process if that works better for you.

If this write-up helped you out, I wouldn't say no to a Tip via Taco!

Matt Sebert

Matt is the co-host of The Admin Bar, and the owner of Matthew Sebert Design located in the beautiful small town of Keene, New Hampshire.

More from The Bulletin Board

Kyle Van Deusen
Sep 17, 2021
Strategy

How I Use Email Marketing in My Agency

Email marketing has provided an effective, one-to-many strategy for my agency — here's a look at why and how I do it.
Kyle Van Deusen
Sep 15, 2021
Strategy

Why These 5 Things Will Help You Win More Proposals

I've found 5 things that make my proposals stand out, get signed, and protect myself from scope creep. Are these in your proposal?
Kyle Van Deusen
Sep 14, 2021
Content Marketing

Web Agency FAQ's

A growing database of frequently asked questions web agencies can answer for their customers.
Kyle Van Deusen
Sep 14, 2021
Kyle Van Deusen
Sep 13, 2021

Humans v. Algorithms: Who are you writing for?

As if writing content wasn’t hard enough on it’s own — you have to walk a fine line between making...
Kyle Van Deusen
Sep 10, 2021

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved
crossmenu