How To Create A Member Dashboard For Your Membership Site
In this video, we’re going to discuss member dashboards and how to make one for your membership site. The dashboard is like the “hub” of your membership…. and where members will land once they have logged-in. There are different approaches you can take, including the one I take which is to use the WooCommerce “My Account” screen.
Transcript Of This Video
[00:00:00.18]
Okay, so for this next video in our series on building a membership site, we’re going to talk about membership dashboards, and we’re going to go ahead and put together a dashboard. I’m going to show you a few ways to do it, and let’s go ahead and get started. Okay, so let’s go ahead and just dive right in here. So you’re definitely going to want to have a membership dashboard, okay? It’s part of the basic structure of a membership site, and it’s going to basically serve as that central page, that hub, where when your members log in, they’re going to go to the dashboard first, typically, and then from there, they’ll branch out to the different features of their membership. So it’s pretty important for people to be able to find things. Now, this hub is just typically, I call it a dashboard. Frankly, I don’t know if other people call it a dashboard. That’s what I’m going to call it. So we’re going to roll with that. Now, when a member logs in, they’re going to go to this dashboard automatically. Now, in our last video, I talked about various ways to route people when they log in.
[00:01:04.24]
That stuff all still applies. You’re just going to route them to the dashboard. And then depending on how you actually build this thing, sometimes that routing is going to take place automatically. I’ll tell you about that coming up. So what goes on this dashboard page? Well, the truth is, you could put whatever you want on there. But some of the typical things would be possibly to greet them by name, like Pi, first name, something like that. You could put it as a hub for people to click out to the core features of their membership site. So maybe linking out to your course library, linking out to other member resources, whatever you might have for your members. It also depends on what membership site you’re building. And so if you’re doing a service-oriented membership site, then perhaps on the dashboard would be a form for them to request service from you or something to that effect. You probably are going to want to link out to ways for them to edit their account, look at their purchase history, link out to important forms, possibly even offer them an upgrade to their membership if they have one of your lower membership levels.
[00:02:10.09]
You get the idea. You have to think about, as the owner of your website, what makes sense on this page. Then you put that on your dashboard, and you make it look the way that you want. Now, you definitely don’t want to make this site and this dashboard complicated. Don’t overengineer it. It’s supposed to be simple, and simple dashboards are going to get used more. So let’s go ahead and talk about a few of the logistics that would go into this. There are two main approaches to this. First of all, you can create a page. Just go to the list of pages inside of WordPress. You can create a page manually, call it Dashboard, put whatever you want on that screen. And then we just make sure that when people log in, they route to that. It’s that simple. The second option is to use account option of whatever membership software that you’re using. A lot of different membership site plugins, they come with an account screen that’s just built in, or when you install the plugin, it will auto-create it for you. You could just use that as your dashboard. A lot of times, it’s pretty convenient to do that.
[00:03:18.12]
In my case, I usually use Woocommerce as the basis for the membership, along with Woo subscriptions if you have recurring billing. And Woocommerce has a My Account screen. It’s just It’s just put there automatically. I usually turn that into the dashboard. I make some changes to it. I change the main screen. I’ll show you the stuff coming up. I usually turn that into the dashboard, and I think it’s pretty simple. So that actually is my personal preference is to use the My Account screen from Woocommerce and turn that into the dashboard. But you don’t have to do it that way. You could just create a page of your own, design it however you please, and turn that into the dashboard. For example, if you’re using Buddy Boss software, they’ve actually got some widgets that are built into Elementor. You can create a nice-looking dashboard with the news feed and the whole thing. So again, it depends on how your site is put together. So let’s go We’re going to go ahead and talk about both options here. Okay, so here we are on our test membership site yet again. And first of all, I want to show you the…
[00:04:23.06]
I’m going to call it the manual way, and that’s basically we’re just going to create a page and we’re going to call it the dashboard. Now, this For this particular test site that I’ve created, I have Woocommerce installed. That’s how I would normally do it. I would go ahead and use the My Account screen, but we’re going to first show you the other option. Let’s go over to Pages. See, this is the My Account screen that comes with Woocommerce. That’s the way that I would normally do this. But first, I’m going to go in and create one manually as if I was going to go a different route. Let’s go in and create a new page. Now, again, I’m using Cadence Theme. Using the Block Builder. You could use whatever system you like. We’re just going to call this Dashboard. Then Cadence happens to have a few nice widgets. For example, this one’s got the user info, so I could do this, and it would show their registration date. It would show their avatar if they happen to have one. We could say instead of my name or not instead of it before, we could say Hi, like that.
[00:05:27.21]
It would greet them. It’s a nice little start to the dashboard. Then down here, let’s say that we wanted to… I’ll use some info boxes, and we can use it off to the side. It’ll be like, Course Library. I’m not going to have any courses on this site, and maybe you won’t either. But at the end of the day, let’s see, View our library of Awesome Courses. Then possibly for the icon, let’s go over here to our media settings, and let’s go ahead and maybe there’s a little graduation act. Yeah, there we go, like that. I’m not going to create this entire page, but you can get the idea. We would use this as our dashboard. Now, being that we’re also using WP Fusion, what I would typically do is say they need to be logged in in order to see it. I just check the WP Fusion permission settings for that. I’m not going to set any particular permissions as far as tags. I’m just going to say they need to be logged in in order to see it. All right, now let’s go ahead and publish this page. All right, let’s copy that, come over here, and you will see that’s basically the start of our member dashboard.
[00:06:44.29]
Okay, and then the last thing that we would do, let’s go back out of the editor, and we need to redirect people so that when they log in, this is the page that they go to. All right? So as I covered in the last video, there’s multiple ways you can go about that. One of my favorite tools to go to is the Admin Site Enhancements plugin, in which case, what I would do is go over to the login area, and then where do we have redirect after login? I’m going to set this to dashboard. We can go ahead and make it… For subscriber is going to be the main one. Let’s go and check off customer 2 as our user roles. Administrators, now when we log in, we’re going to go still into the admin panel like everybody else. But everybody else will go to the dashboard. Then that’s basically all there is to it. Now, if you want to use the WP Fusion login add-on, you could do that as well. If you go to WP Fusion settings, you go to login, and you could do redirect rules here. Basically, leave blank for any.
[00:07:53.19]
Then we would just right here go dashboard, dupe, and that would pretty much do It’s a trick right there. The other thing, too, is that if I was going to set up a membership site that had multiple member levels, then probably what I would do, if I wanted to do this, I could create a different dashboard for each of them. Most sites, I don’t do it that way, but I have dealt with a few where there were different membership levels that really had a very different set of content for each of those members. And in that case, sometimes it’s a little easier to have multiple dashboards. And so what I would do is set the tag. Let’s say if they have tag A, they go to dashboard A. If they had tag B, they’d go to dashboard B. And I would typically use this login add-on for WP Fusion in order to do that. Okay, now, WooCommerce this My Account screen that you could just show that I had in there. That actually can make for a fairly decent dashboard. Now, right off the gate, it’s going to have a menu off to the side where they can see their order history, change some settings on their profile.
[00:09:00.10]
A lot of that stuff is just built into the dashboard automatically. But then what you can actually do is make some modifications to this dashboard in order to make it really look good and serve the purpose. You’re going to keep the basic formatting, but you just… Typically, the main screen, which is the actual dashboard of the My Account screen, you will make some changes to that, and I’ll show you how I typically do that. But it can take some modifications to really make this My Account screen serve as a good dashboard. I’m going to show you what the dashboard looks like at the blog marketing academy and how you can actually make this work for yourself. Now, I will say some of the stuff you can do pretty simply, other things, not so much. If you want to add or remove menu options from the My Account screen of Woocommerce, you do have to get into a little bit of PHP code. But it’s not that hard. And I’m going to show you how you can do that. Now, I’ll provide the exact code that I use, and I’m going to do a a quick video walkthrough of how it works, and then you can actually, hopefully, do this yourself.
[00:10:05.08]
But I’m going to do that in a separate video just because it’s a little bit more technical. And where you’re going to be able to find that is over at blogmarketingacademy. Com. If you go into the video library, if you pull up this series on building a membership site in the video library, I’m going to put that video there, okay? But it will require the one pass membership, which is super affordable to get it. And it’s basically going to be some PHP code snippets, a video walkthrough of how to manage that snippet. And it’s going to be mainly if you want to add custom screens to the member, my account screen for Woocommerce and things like that. Not every site is going to need to do it. There’s a good chance your site, you may not need to alter those options in the menu for my account. But if you do, I’ll show you how. And I’ll also be clear, if you want to go out there and search Google for it, be my guest. The snippets that are available to do that thing are freely available out there, and you just got to modify them to suit your needs.
[00:11:05.25]
But if you’d like it, I’ll put it over at blogmarketingacademy. Com. All right. Now, to modify the main dashboard screen, which is when You go to my account, there’s the dashboard. It’s the first screen you’re going to see. You can make some modifications to that, and you could do it fairly easily with Cadence elements, which is built right into the Cadence team. Now, again, we’re talking about the toolset that I use. And I’m going to show you how I go about doing it. Let’s do it. Okay, so first is a demo. Let me just show you Blogmarketing Academy itself. You’ve hopefully been there by now. I’m on the homepage right now. If you click, I’m actually logged into my own profile, of course. If you go over to the account screen, I’ll show you what we look like. Now, this is actually powered by the actual My Account screen. You can see by the URL here of Woocommerce. However, I’ve made some modifications. As you can see here, I’ve created my own little dashboard here that branches off to the various parts of Blogmarking Academy that might be relevant to members. I also put these things here.
[00:12:10.26]
If they’re one-passes active, if they are a concierge client, When people have anytime credits, I show their balance. These are all done by custom fields. This is beyond the topic of this particular series, but all very, very doable. Now, this screen, the dashboard, was created by Cadence Elements, and I will show you how that’s actually done. I’m not going to build this entire thing for you, but I’ll show you the mechanics of how to create this page and design it the way that you want. These other tabs are actually powered by Typical WU commerce stuff. It’s account details. People can edit an email address, view their transaction history. This is all stuff that’s built into WU commerce by default. Changing payment methods, credit This is a custom screen. This is where people can look at their debit log for their anytime credit. That’s something that goes into the credit system at blogmarketingacademy. Com and is customized. I use fluent booking for the calendars. People can look at their appointment history and upcoming stuff, and it’s all done from the dashboard. This is yet another custom screen pulling in the Fluent Booking widget. People can send me a testimonial, and that will actually leave the dashboard, if I’m not mistaking, and go We go over…
[00:13:30.13]
Yes, there we go. See, we go over to a different screen here where people can leave a testimonial. But this is the idea behind the dashboard. When people log in, they immediately come to this screen. Now, let us go over to our test site again, and I’ll show you the mechanics of how to create this first page. All right, now back on our test site that we’re working with, this is the default My Account screen. This is pretty much exactly what it will look like out of the box, so to speak, when you install all WU commerce. Now, you’ll notice that on the main dashboard screen, you’re going to have this little doodad here. And unfortunately, in order to remove this text, you’re going to have to actually modify your theme, specifically the theme for WU commerce. And so what I typically do, so there’s a couple of options here. One is that you can either just leave this alone and just let it be. And then what I’m going to show you with cadence elements would go right below this. You’d have a nice dashboard below this. Or what we do is we set your theme to be a child theme.
[00:14:37.14]
Then we would use the child theme in order to modify this and get rid of it. I have actually done that. As you can see over at blogmarketingacademy. Com, that’s no longer there. That’s because I went ahead and put in place a quick little child theme, simply so that I could modify that aspect of Woocommerce to get it out of there. It’s unfortunate that it’s such a dorky experience to do it that way, but hey, it’s Woocommerce. It’s not perfect. All right. That’s how we would remove this stuff if you wanted to do that. Now, let me show you how we can create a screen here using Cadence Elements. I’ll just pop on back into the Admin Panel. Let’s see if Cadence Elements is active. It is, okay? If you install Cadence at first, let me just show you this, you have some different things that you can turn on with the Pro add-on, and one of them is called Hooked Elements. I Now I’ve got that turned on. It’s definitely very useful, and we’re going to go ahead and use that right now. Let’s go over to Cadence Elements. Let’s create a new one.
[00:15:42.22]
Okay, let’s call this Account Dashboard. On this, you can do a lot of the same stuff we did in the previous version. In fact, let me see. I forgot the name of that block. Let’s do… Was it UserInfo? Yep. We’ll say Howdy this time. Let’s turn off the date. We don’t need to tell everybody when they registered. Then down here, let’s put in a row because I can show you how we did this little thing back to back like that. Let’s do it in here. Let’s go ahead and create a quick row. Here we’ll do an info. I’m not going to go in and format everything, but this is basically how it’s done. Then we’ll do another info box here and then make it look like that. Then I would change the settings and the icons and the whole thing. We’re just going to roll with this for now because this is a demonstration. Let’s say we’ve got ourselves a page here that we like. Now, what we’re going to do now is we’re going to hook it into the Woocommerce My Account screen. Let’s go over to here. We’re going to place this. Let’s see, it’s in this drop-down here.
[00:16:53.28]
We’re going to hook it in. Let’s see, there’s Woocommerce stuff. There’s all kinds of places you can stick this stuff after a different navigate. Here it is, account dashboard. Show on, probably entire site, honestly. We’re not going to worry about who it is. We’re just going to say for everybody. Let’s go and see if I got those settings right. Let’s go in and publish that. Okay. Then let’s refresh. Boom. See how we got it? What it’s What we’re doing is it’s basically hooking what we just designed from Cadence Elements, and it does a system of hooks, and we’ll make it appear where we told it to. In this dashboard, you could see with Cadence Elements, there’s all kinds of different places you could stick this stuff. I decided I wanted it on the count dashboard because that’s what we’re working with, and there we go. Now, all this other stuff is still going to remain default for Woocommerce, because most of the time, we don’t need to modify any of these screens. They’re actually handy. Some of them I turn off. If you’re not selling downloads, we would disable that menu option. If we’re not dealing with physical addresses because there’s nothing that we’re shipping, then there’s no reason to show them the Addresses tab.
[00:18:13.00]
We can remove those things in In some cases, you might want to add other ones, but then when they come to the dashboard, they’re going to see what it is that you design. Now, being that we’re using the block builder to do this with cadence elements, you can do anything that you can do with the Block Builder. You do right here. That includes conditional blocks, which is what I’ve done over here, where I’m inserting things like the credit balance. This right here, if their one pass was not active, it would show a non-active thing. These are all with conditional blocks, and I use a plugin called Block Visibility for that. But that’s the mechanics of how the dashboard is put together. So the one other thing that I would do, but we’ll do this in a different video, is that I would modify the child theme to get rid of this and get it out of the way. Probably this, too. Just get it out of there. That way we can take full control over it using cadence elements. Okay, so with that, you pretty much have the basics of how to create your My Account dashboard.
[00:19:12.28]
Or if you’re not using Woocommerce, you can set up a dashboard the other way that I showed you. But I like to do it this way because I think it puts everything in one spot. Woocommerce puts a lot of the mechanics of managing their account already there. You don’t have to reinvent the wheel. So all we got All you’re going to do is create that nice dashboard screen to go on the front, and you got yourself a pretty fully functioning dashboard. Now, as I mentioned, there are some customizations that you might want to do in terms of removing menu options from the dashboard and possibly adding some custom ones. I’m going to create a different video for that, and I’ll put it over at blogmarketingacademy. Com as part of the series. And with that, the reason it’s going to be different, by the way, is because there’s going to be some PHP code involved and things like that, and I’ll give you a video walkthrough. And just because it’s a little bit more nerdy, we’ll keep it over there. And so if you want that, you can get over there, and then I’ll show you.
[00:20:08.22]
And by the way, there’s stuff out there on Google. You can definitely find information on how to do that. It’s not hidden. Woocommerce is super popular. Okay, with that being said, oh, one other thing I should mention also is that obviously, when you have a My Account screen like this, you want to make sure that it’s in your top navigation, that when they’re logged in, they’re going to have a button that says Account. And then when they’re not logged in, they’re going to have a login button that goes to the login. Now, with Cadence, I just use the button for that. It’s got a nice little widget, so to speak, built right in. I drag it into the header, I make it look the way that I want, and that’s how I do it. That’s how it’s working at blogmarketingacademy. Com. You could also put it into your main navigation menu under the menu section, and you could do it like that if you’d like. Again, like most things, there’s always multiple ways of doing it. But that’s pretty much the mechanics of the dashboard. Once again, a reminder, too, I build these things all the time for clients.
[00:21:08.08]
If you would like to not do the DIY route, if you’d like for me to give you a massive head start on just putting your membership site together for you and getting a lot of these mechanics set up, come on over to blogmarketingacademy. Com. You can schedule a roadmap call. We can discuss your project, and I’ll let you know what we can do, okay? And see if it might be a good fit. But I also have all the plugins that I talk about. I use them for clients all the time. And a lot of times what we do is we just… Everything I’m showing you in this series, I just build it, and we make it look nice and the whole thing. And then all you really need to do is worry about your membership. Project goes a lot faster. So if that’s interesting for you, head on over to blogmarketingacademy. Com. Schedule that call, and I’m happy to chat with you. All right, I’ll see you on the next video.
Duration
21m 58s


