Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 7 – Part 2 – Develop the Member Dashboard

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to - ,

The next thing we are going to do is develop the member dashboard. We are not going to be able to complete the task of developing the member dashboard because one of the plugins I created that allows you to easily swap sidebars isn’t working properly so it’s not available at the moment. But by next week we’ll have it up and running and we’ll be able to create, from a dialog like this, additional sidebars and then we’ll be able to assign those sidebars to pages from within that page edit dialog. For example, if you are inside this page here, say you are editing the dashboard, you’ll be able to show my member dashboard sidebar from a dialog right there and then that will be the sidebar that shows up on that page.

Anyway that’s what is going to prevent us from completing the sidebar project today. So I’m just going to delete all this content that I have in my dashboard right now. And the first thing we are going to do is add a quick little welcome message and then we are going to add a list of the bookmarks that the user has made so they can get to their bookmarks easily. Then we are going to add some Purchase History and then we are going to add some information to a Member Profile page.

Create a Membership Website – Member Dashboard Welcome Message

So the first thing I want to do is create a little welcome message. The message I would like to use says “Get a Gravatar”. I’m trying to encourage people to use Gravatars so that when they post on the forum or when they post comments they don’t have that ugly little orange icon that represents them but that there’s something personal even if it’s a decoration or a logo for your company or something. It’s just there’s some way of personalizing the experience.

Anyway we are going to create this in that dashboard and the first thing I’m going to do is just going to copy the text. Come back over here to my dashboard page and I’m going to paste that text and update that. And then the way we create that little box around it is through a plugin called J Shortcodes. I’ve done a bunch of lessons on how to use J Shortcodes here this last month and if you haven’t seen those by all means go back to the Live Answers section and watch some of those videos but that’s what we are going to use here.

We are going to start this off by installing this plugin and it’s called J Shortcodes. It’s a very handy plugin that helps you do lots of graphic customization of your site without really having to muck with the code. So Install Now and it’s the J Shortcode plugin we are installing. Activate the plugin and then we are going to go and see what we can do so.

I’m going to go to J Shortcodes and see what it can do. Then go to the Shortcodes tab and essentially what we are doing here is we are going to use this J Boxes configuration. And I think we are going to use the green. The way this works is with shortcodes and in a way similar to WP eStore and WP eMember, we’ll have shortcodes that will wrap what we are doing here. For example, if we take this J Box color equals green, copy that, come back over and switch to HTML View and paste that here. Delete the context because that was just stand in text. And then cut the closing shortcode and paste it.

So you’ve got your opening J Box color equals green and then J Box as your closing tag. That’s going to make that green outline and background. Go ahead and save that and we can view this page. I’m logged out of WP eMember so I’ll log back in. Here it is with the green background and I want to put a little heading there that says Get a Gravatar.

The way that works is you add a title parameter to the shortcode. So grab that title parameter and paste it in the opening shortcode and replace the asterisk with Get a Gravatar and hit Update. Now we have a nice little welcome message.

So we’ve got a dashboard and an announcement message and that’s what this is really for. It’s a place for you to put announcements of what’s happening on the site, encouragement or whatever it is you’d like to put there. But it is a place for you to put content that you want your members to read when they come to your dashboard.

Create a Membership Website – Add Member Bookmarks to Member Dashboard

The next thing we are going to do is add the member bookmarks. Remember when somebody goes to a Course page they have this little bookmark available to them. We can’t get to a Courses page here because I haven’t created it but there’s this symbol that shows up here that allows you to bookmark the page.

What we are going to do here on our dashboard is put the shortcode that will list all of the bookmarks and that is created using another shortcode from WP eMember. Come over to my website and look at the WP eMember shortcodes. If you’ve already downloaded this, and you probably have, you want to download it again because I just changed it again this morning. So this WP eMember shortcode cheat sheet is different today than it was last week.

If you download it here there is the shortcode on there that will place all of the members’ bookmarks and that’s it right here, miscellaneous bookmark list. If you just grab that and then come over to the dashboard. I think I’m going to add a heading here, I’m going to make it an h2, call it My Bookmarks and then below that I’m going to place this shortcode and hit Update. Of course since I don’t have any shortcodes actually selected yet that’s not going to show up here.

Now it says you didn’t add anything to our Favorite list yet so once we get some progress elsewhere we’ll add some bookmarks and you can see what that looks like.

Create a Membership Website – Add Purchase History to Member Dashboard

Okay the next thing we are going to do is add Purchase History from Pages. Again it’s the same kind of thing where the Purchase History is one of these here and it’s WP eStore Member Purchase History. So we copy that and then again come down here, we’ll make this an h2 as well, call it Account, Purchase History and make sure it’s got both pieces of that.

So we hit Update, come back over to the dashboard here. Now because this is my admin and not the one that I used, it’s not showing any of the purchases. But if we were in that account I used for testing last week it would show the product that I purchased and the date and the price. So this helps people keep track of what they bought and what they haven’t bought.

Create a Membership Website – Add Profile to Member Dashboard

And then the last thing we are going to do now is create a member profile page. It’s exactly the same thing, that is we grab this WP eMember Profile Edit and copy that. Then we are going to go to our Pages and to My Profile and select Edit and we’ll paste that.

What we’ll do is we’ll compare this one to the one we’ll also be creating on the Forum and that will give us a chance to see which one you like best. We select Update to this and then we come back over to our dashboard. And if we go to My Profile here is the place where we can add additional information. I didn’t quite realize this but this also gives you an opportunity not to use Gravatar but instead upload your own profile image. So if you don’t want to use Gravatar but you still want to have an avatar on this site you can upload your own image and use it instead of the Gravatar image which is great. Okay so that is it for the Member Profile Edit page.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment