Just to be clear right up front, this is not an article about customizing the back-end dashboard that WordPress provides to system administrators. This is an article that captures my journey in creating a WordPress client dashboard to show various kinds of statistical progress to PeakZebra clients. These folks don’t care how many page views the PeakZebra.com site is getting. They care about monitoring how things are going in their consulting engagement with me.
When someone becomes a PeakZebra client, typically they are working on a content marketing project. As often as not, they’ve been browbeaten about how important SEO could be to them and they feel a little guilty about not having done much of anything about it.
So the first useful thing PeakZebra can provide them is a specific plan for content and for whatever SEO benefits we think might be realistically achieved in the coming year (the world is filled with people who wildly overpromise what can typically be achieved with SEO, but that’s an article for another day).
That plan is stored on PZ, accessible only to them through their client login. Additionally, I want clients to be able to see how things are going month over month. And my experience has been that almost all the details I care about in SEO program execution are things they simply do not have time or energy to be bothered with. So I need to show how things are going and do it sticking only to the most useful metrics, showing them in a visual format that makes them very quick to digest.
What I need, in other words, is a WordPress client dashboard. You know, green light if things are good and let’s hope the light is never any other color than green.
This turns out to be relatively simple to achieve, but maybe not quite as simple as you’d think. Today’s article brings you the gory details of the first pass I took at this, working within the context of the Divi page builder for WordPress. In a follow up coming in the next few days, I’ll walk through the path I took after I decided I needed better graphic and table tools, which then meant I didn’t really want to use Divi because I was happy with the look without it.
Easy-does-it WordPress Client Dashboard
To make things easy, at least initially, I decided that the dashboard wouldn’t directly query data in realtime. Rather, there would be tables on the site that were periodically updated, and it’s the data from the tables that winds up displayed in the dashboard.
Second, I absolutely needed to prevent a client’s dashboard from being visible to anyone but the client and myself (and authorized contributing team members). I wanted to keep that simple as well, about which more toward the end.
One final thing for simplicity’s sake the first time around: I’m just going to make each client’s dashboard a regular WordPress page. That way the dashboard pages are just ordinary pages, meaning I can throw in whatever page components I like (assuming we’re using Gutenberg or a page builder like Divi).
This isn’t really how I think this should be done. Rather, the “real” way to do this is to create a custom post type, probably called “dashboard,” with each client having a post of that type. That’s by no means complicated, but we’ll hold off for now.
In order to show the data, we need a plugin that, ahem, turns data into pretty charts. And I want to stress here: if you’re bothering with charts, pretty is almost certainly a hugely important part of the deal. We want pretty.
There are a bunch of plugins out there that will take data and spit out charts. The popular page builders that web designers often use with WordPress these days also have at least some elements that lend themselves to showing data, which is what sent me down this initial route to have a look at what the Divi builder (the one I have the most experience with) could do.
Mixed results, honestly. To be sure, I can build a Divi dashboard that looks pretty darned good. But I did have to hunt down a couple of extra tools to get it done.
All by itself, you can’t do much that looks “dashboard-y” in Divi. It will let you show numbers as a single bar, as you see here:
And you can throw in animated circles with numbers in the middle of them, of the sort that you’ve seen on a million landing pages:
Honestly, I think they both look nicely professional, but we’re going to need some more stuff, goodles like bar charts and spider graphs and maybe color-coded maps.
Send in the Charts
In fact, you can get these in Divi by investing less than ten bucks (assuming you already have a Divi license, which is a larger expense) in an add on available through the Divi Marketplace. In the interest of responsible journalism, I picked this up and gave it a whirl:
In addition to this line chart, there are six other chart types—all basic stuff like pie charts—and each of the chart types has some degree of animation and interactiveness, such as popups that show the values on the line as you hover over them. You can flip the chart into several different predefined palettes, or override the CSS to set your own colors, or go with monochrome.
It’s actually not bad, except for one thing… Putting the data in is a bit clunky, in that you bring up the properties box for the graph and then input comma separated values for each data plot. It’s not terrible for something with a dozen data points, but you’re not going to want to do anything big or fancy with this.
The only way to update the data is to go back into the properties and hand edit (or paste over) the data. This seems like a deal killer for many sorts of projects, where you’d like to suck up a spreadsheet in one go, or maybe query a REST API for the latest data.
If you need something that’s very top-level and that you can just edit now and then as the need arises, you could build a pretty professional-looking dashboard with this.
This won’t help you if you need to place tabular data somewhere in your dashboard, of course. For that, the simple answer (with or without Divi being involved) is the TablePress plugin.
I like TablePress. It’s a robust, simple tool. You can get the data you want from a .csv or Excel file (and from a couple other source types as well), suck it up to your WordPress site, where it’s assigned a shortcode, then embed the shortcode in the page where you’d like it to appear. The results look pretty decent as long as you don’t have too many columns. Too many columns makes for a complete mess.
You can embed a shortcode directly into a Divi page, no problem, and that includes TablePress charts.
If the table you get from TablePress by itself, though, isn’t dressy enough to suit you, it’s possible to add in an additional plugin called TablePress Styler, sold at Divi creator’s ElegantThemes.com website for $35. I haven’t really dug into it, but I suspect that most of the things that TablePress Styler does are done simply by manipulating the CSS associated with classes that are set up in TablePress itself. Meaning you could do lots of the styling yourself for free.
But TablePress Styler makes short work of making a table look quite fancy, no question. If you’re going this route, I’d recommend it.
Except…you might want to handle your tables with the Visualizer plugin, which will give you both charts and basic table capabilities. The free version gives you six chart types; popping for a $99 “personal” license gets you an additional nine chart types, email support, and periodic synchronization with either .csv files or JSON endpoints (full pricing information is here).
This last part—the data sync-ups—strikes me as the thing that might make it worth a hundred bucks. If you set it up using this feature, you can update your underlying spreadsheets and not worry about the dashboard keeping up, because it will do that on its own.
By this point, though, the bulk of the dashboard is being supplied by plugins that have nothing to do with Divi. So whether you bother with Divi (or Elementor, or any other page building tool) really comes down to how much control you want over the design of whatever else is on the page, whether you want fly-in graphics or accordions with icons that rotate as the sections are revealed and all that other “fancy professional design” stuff.
By the time you get the charting and table plugins involved, it’s kind of an incidental detail that the page was made in Divi. Indeed, the argument could be made that Divi isn’t really doing all that much here. If you get the sense that I’m about to abandon the Divi approach, you’re probably right.
So, yes, to be clear: I by no means want to imply that Divi is the way to do a dashboard. Truth be told, Divi can be pretty quirky (though it can also produce beautiful WordPress results) and there’s some question about which of the WordPress builders will survive the introduction of blocks as the essential design element of WordPress running natively (which, roughly speaking, makes WordPress itself a page builder).
To get the same sorts of graphs I discussed up above, you can use any of a number of WordPress plugins, some of which provide block support. A walkthrough of this approach is coming in a week or so.
And, yes, I did say I’d talk about gating access to the dashboards so that only the client can see that client’s dashboard. The short answer is that you can do it using the PublishPress Permissions plugin. There’s also another approach with fewer moving parts—next time…