How to create a client portal in WordPress

Update: I’ve just recently made the transition away from having a client portal right within WordPress. I’ve been very happy with how it works and how responsive the author has been. Client Response

Thanks sent out to Debbie for suggesting and bringing to my attention the S2Member plugin. If that plugin existed when I wrote this article, I would have used it, rather than look to assemble a whole host of plugins and work within the code of the pages.

I have loaded it on a site of mine – haven’t explored it fully, but it looks to cover everything I’d expect for a “members only” area.

Update 1/9/2014: S2Member is a very powerful plugin. I can see using that to handle a lot of the client portal set-up I’ve listed below. Still… it doesn’t give each client their own area, so I could see using this plugin with the addition of the specific client pages. I think I will plan some time to explore this further and will create a new post with clear instructions. Once that page is created, I’ll link from this page.


I’m not a programmer, but I play one when I’m adventurous.

A client of mine needed to share different (private) content with their clients. He also needed workers of his to be able to view and update all clients pages, but didn’t want to give access to the WordPress admin area for either.

Although I would have loved to dig REALLY deep in the programming and pull the content dynamically from the database, my client and I both opted for the quicker, cheaper route, although this takes more time on his end to add new users and create pages they’ll be redirected to.

I did a quick search for “Client Portal WordPress” and came up with this and this. I did a few more things than they did, but that’s where I started. I liked what I created for my client’s site, so I set my site up with a client portal as well. This allows me to privately share information with my clients.

Basically, here’s how it works: Install the plugins listed below, set up and assign a new roll called “Clients”, create the actual user (as you would create a subscriber in your WordPress Users area) and create the page they’ll be redirected to! Clients can correspond to you via their page(s) and an email is sent to every person who has subscribed to that page.

I’ll go through the steps below in detail. If anything is confusing, feel free to contact me and ask. I spent a bit of time organizing the following information & hope I haven’t forgotten anything! (Plus, it’s a couple weeks after I set it up, so I may have forgotten something.)

Share the knowledge!

Let’s create a client portal, using mostly WordPress plug-ins – and some specialized code in your template page(s)!

Step 1: Install the following plugins

The list of plugins I used & what they do:

  1. BM Custom Login – Use this if you wish to brand the standard “/wp-login.php” page with your own logo, colors, etc. if clients happen to find themselves there. The Sidebar Login plugin below makes this area somewhat obsolete/redundant, but I want to cover all bases & give a professional look.
  2. Breadcrumb Nav XT – This helps people understand where they are by showing the current page location & site hierarchy above that page. The default top level breadcrumb is called “Blog” but it’s easily changed to “Home” in the Breadcrumb Nav XT settings.
  3. Exclude Pages – If you wish to have your full client list page hidden to non-administrators.
  4. IWG Hide Dashboard – This allows you to keep clients from accessing the WordPress Dashboard. Comments from everyone are shown on the Dashboard. I didn’t want clients viewing other clients comments.
  5. Role Manager (This plugin doesn’t seem to be offered on WordPress’ site.) – This allows you to create new rolls. It is a little overkill, but it helps to identify rolls and keep yourself sane ;)
  6. Sidebar Login – This lets clients log in and log out right from the sidebar. It allows you to post persistent helpful links for yourself, your workers and for clients once they’re logged in.
  7. Subpages Widget – This shows subpages in your sidebar widgets. It’s helpful in that you won’t have to manually post links to sub pages – they’re automatically created as you create your pages.
  8. Subscribe to Comments – As administrator, you always receive an email when someone makes a comment to your site. If you wish to offer your clients an email when you or your worker update their page, install this plugin. They can subscribe to comments of any page they have the ability to make comments on. *Additional note: Clients don’t tend to understand the “subscribe” function, so I’ve been signing in with their username (after I set each client up) and subscribing to their own client page(s). They get the emails and I didn’t have to “teach” them what to do.
  9. Peter’s Login Redirect – This will allow you to redirect clients to their own page once they’ve signed in. I’ve set mine up so I won’t have to continually add new redirects. I set one redirect. Everyone is redirected to my main clients page & based on their user level, they either see the full client page (administrators & workers), or are directed to a page that matches their username.

I’ll go through why I used all of these, but list form is easiest to go down and just install.

Step 2: Set up a special role for your clients

(and workers, if you wish to assign another level of access. We’ll stick with just clients at this point.)

Once you install the Role Manager plugin, your WordPress admin interface will have additional choices:

I created a roll called “Clients” with a user level of 2, another roll called “Worker” with a user level of 5 and deleted rolls that were superfluous, just to keep things neat. This left me with three rolls – Administrator, Clients & Worker.

This step is a little reverse-intuitive. Once you install the IWG Hide Dashboard plugin you’ll create a capability to take away the capability to go to the WordPress Dashboard. You grant the capability to not grant them access to your Dashboard. (Hah!)

As per their instructions:

First use the Role Manager and create a new capability “hide dashboard”.
Assign the newly created capability “Hide Dashboard” to each role who you don’t want give access to the Dashboard.
From this time on, all users with the capability “Hide Dashboard” have no longer access to the Dashboard.

My clients capabilities:

(Click to view full-size.)

Create a user

Just as you would create a subscriber, create a new user in your WordPress interface. Make sure to set their roll as “Clients”.

Step 3: Create your main client page and then the special page your client will be directed to

My client pages are organized with a main “Clients” page, and each client’s page is a child of that page. This keeps my page list organized. Each client’s page can also have children. (Only 1 level deep, the way I have mine set up, though.)

You only need to set up the main client page once, but with each new client you set up, you will need to set up their individual page(s) & put them under the main “Clients” page. Within the WordPress interface, create 3 new pages. Name the first one “Clients”, the second one “testclient” and the third one “childtestclient”. Make “Clients” the parent of “testclient”, and “testclient” the parent of “childtestclient”. These will be your test client pages.

Right now, anyone has access to these pages. We’re going to create two templates and change the page code to only allow the specific client to have access to their page(s).

NOTE: It is important to name the client “username” the EXACT name of your page. It is NOT flexible with spaces, dashes, etc. DEFINITELY name the username all lowercase, since your page slug (address) will, by default be all lowercase. I tried using a “dash” instead of a space in the username as well as the page – but it’s really finicky – it goes by the TITLE, so until I find a better solution, have been adhering to the strict naming convention. This part still confuses me – I apologize for not being too clear here. I’m going to once again restate my claim that I am a designer by nature, not a programmer, so please forgive my lack of knowledge about this.

Ok – let’s create 2 new page templates within your theme. First, duplicate your “page.php” page twice. Name the first file “clientsredirect.php” and add this code to the top:

<?php
/*
Template Name: Clients Redirected
*/
?>

Name the second file “clients.php” and add this code to the top:

<?php
/*
Template Name: Clients
*/
?>

This effectively sets up the ability for these page templates to be chosen in the WordPress interface when you’re editing your page. There is nothing different about them… yet! If you’d like to assign the “Clients Redirected” template to your main “Clients” page, and your “Clients” template to your “TestClient” and “ChildTestClient”, you will be able to see the privacy settings you’re about to apply take hold. I generally use one browser (Chrome or Firefox) for working, and another (Safari or Opera) for testing permissions – so I don’t have to sign in and out so often.

Because the “clientsredirect.php” page is really the “clients.php” page with some extra REDIRECTION code at the top, let’s build the clients.php page first. (You can download the linked files to see where all the following code goes. Of course it’s formatted for my site, so you may want to just use it as a working reference.)

Update: I’ve updated the clientsredirect and clients php files to use the TwentyEleven theme, so you can very quickly add these pages to your child theme. You may download the zip file below.

[button link="http://jeanegan.com/uploads/2012/09/clients-clientsredirect.zip"]Download ZIP[/button]

The specialized code in the clients.php page looks like this:

<?php
$thetitle = strtolower(get_the_title());
$shorttitle = str_replace(‘ ‘, ”, $thetitle);
$username = ( $userdata->user_login );
$parent_title = strtolower(get_the_title($post->post_parent));
$theparent = str_replace(‘ ‘, ”, $parent_title);
?>

The previous code sets some variables to work with (the username, page or parent page).

<?php if ( current_user_can( ‘level_5′ ) || is_user_logged_in() && $username==$shorttitle || is_user_logged_in() && $username==$parent_title) { ?>

The if statement above looks at the level of user to determine where to send them. It says If the user is of level 5 or better OR if they’re logged in AND their username is equal to the title of the page OR the username is logged in AND the username is equal to the parent page title. (Then you will show the page, otherwise, you dump them out in the following code.)

<?php } elseif ( is_user_logged_in()==false ) { ?>
<div>
<h2>Sorry…</h2>
<p>You must be <a href="http://yoursitehere.com/wp-login.php">logged in</a> to access this area.</p>
</div>
<?php } elseif ( is_user_logged_in() && $username!=$shorttitle ) { ?>
<div>
<h2>Sorry…</h2>
<p>You are not allowed to access this area.</p>
</div>
<?php } ?>

The previous snippet of code is the last part of your if-then-else statement to show the content of the page. It says: if they are NOT logged in, show the content to help them sign in. If that’s not the case and they’re signed in but shouldn’t be in the area they’re asking to be in, (if they are hacking & looking to go into parent directories or other client directories they shouldn’t be in,) then give a message that says “sorry you are not allowed here”.

The specialized code in the clientsredirect.php page looks like this.

This is the only difference between the clientsredirect.php page and the clients.php page is the following code. It MUST be placed FIRST in your php file:

<?php
$thetitle = strtolower(get_the_title());
$shorttitle = str_replace(‘ ‘, ”, $thetitle);
$username = ( $userdata->user_login );
$parent_title = strtolower(get_the_title($post->post_parent));
$theparent = str_replace(‘ ‘, ”, $parent_title);
if (current_user_can(‘level_5′)) : echo ""; else : header( ‘Location: http://www.yoursitenamehere.com/wp-admin/’ . $username . ‘/’); ?><?php endif; ?>

The previous code needs to be placed FIRST in your php file. It is VITAL. The clientsredirect.php page will look at the username and REDIRECT them to their specific sub-page.

In the code at the top of the clientsredirect.php page, it asks what level the person is, and directs them to the appropriate page. If the user is a worker (Level 5) or greater, it shows my main “Clients” page. If it is a client (level 2), it directs them to their sub-page.

The link above to the page has my formatting. You can download it and reformat it for your site, if you prefer that over creating yours from the instructions above. Above, I have shown you the specific code that makes the clientsredirect.php page special, so if you download the two files instead of creating your own, you will know where you can put your uniquely formatted page code. (Undoubtedly, you also have formatting you wish to keep.)

Step 4: Set up the general redirection

Using Peter’s Login Redirect, set up the general redirection for users specified as “Clients” to be redirected to your main “Clients” page. (The top level “Clients” page is assigned the clientsredirect.php template.)

After you install Peter’s Login Redirect, you will find the settings for this plugin under “Settings”, “Login Redirects”. Go down to “Specific Roles” and set “Clients” to “http://yourdomain.com/clients/” and then hit the “Update” button for it to become active.

Now, all people signed in with the “Clients” role will be directed to your main “Clients” page which will test the user level. If it is an administrator or a worker, it will display the main “Clients” page. If it is a “Client”, it will direct them to the page that shares their EXACT username.

That’s all!


The above code are excerpts from pages & will not work unless placed properly in the page. If you need to see where they appear in the page, download the two zip files of each of the pages & take a look. I just didn’t want to post both pages in their entirety here without an explanation. If you have questions, feel free to email me. Note: Because I offer this help for free, I cannot do it on a deadline, so if you need immediate help, you may want to hire someone.

I will be installing another client portal soon & will follow my own steps to double check and add anything I may have forgotten. I haven’t explained the sidebar login – which is so helpful – it allows you to give access to certain pertinent areas of your website. I’ll add that information as I get time or if someone asks ;)

47 thoughts on “How to create a client portal in WordPress”

  1. Hi, This page is incredibly helpful but I looked under the clientsredirect.php link and there is nothing there. Is this coding necessary as I am putting my portal together as well and want to makes sure I have all the parts? Thank you again for this write-up, I couldn’t find anything like it elsewhere!

  2. Hi I added a client portal to my site and this tutorial has been a life saver but I need a bit of clarity on how the client.php works in linking sub-pages for client specific pages. Could you please explain how that works a little better. Thank you again for this aid.

    Stephanie

  3. Do you know if there is a plugin, through which we can manage client, their hosting and domain name and keep track of their project

  4. Shovan, I’m not sure if there is. I have been keeping track of client projects through updates to their private pages. From the initial deposit (Paid through a shopping cart plug-in) to marking it paid and sharing comps and links to the testing server, right on up to the final. I hope you found this post helpful.

  5. Stephanie, when you create a client page (within WordPress), you name it the client sign-in name. Any page that you make a child of that page (once again, through WordPress) does not have any name restrictions. So your client can gain access to their named page, and any page that becomes a child of it because we’ve specified they can gain access to pages that are either of their name, or a child of their sign-in name. I hope that makes sense. Let me know if you need any assistance. I’d be happy to make this all more clear.

  6. Stephanie, the clientsredirect.php page only has one bit of code at the top that is different from the clients.php page. Basically, it will redirect users to their sign-in named page (if they’re signed in) and if they’re not signed in, it will tell them they need to sign in.

    This allows us to set one redirect using the redirect plug-in. Send all users to your clients page, and then the page determines where they really should be. (Their own personal page.)

  7. Thanks for the tutorial. I was hoping to create a simple client section that allows clients to upload files, delete their files, and share dialog with the website administrator. It would serve as a means to handle projects where team members are working remotely.

  8. This is my code for my page!

    I don’t get how to set this up with my theme.. I keep getting errors..

  9. Hi Jen, WordPress sometimes strips code from comments, so I don’t see what you have to help. Sorry! Feel free to use my email address link above to write me if you are still interested in help.

    Because I offer this help for free, I cannot do it on a deadline, so if you need immediate help, you may want to hire someone :)

  10. It’s funny that you say that Brian! (The FB connect) I was just looking into this for a client of mine & will look to do that for my site, too. Thank you for the suggestion.

    Best wishes with your client portal set up. It’s been such a pleasure to help others with these instructions that have helped both me and my clients!

  11. Jean,
    Can you tell me if S2Member offers the same functionality that you describe?

    I am very impressed with the detail you’ve provided in this post. Thank you!!!

  12. Hi Debbie – Oh interesting! I will look into it and report back – but would love to see what you think of it, too. Easier = better :) Thanks for sharing!

  13. I am getting this error.
    Parse error: syntax error, unexpected T_STRING in /domain/wp-content/clientsredirect.php on line 3
    I’ve looked through your tutorial. I’m wondering if the WordPress team changed the way it deals with strings.

  14. ^ fixed! There was an issue with quotes. Works just fine. Thank for putting together this nice post. I’m curious to see if anyone has expanded the functionality and how.

  15. Oh good, Eric! Not sure if you got my email – but glad you figured it out on your own.

    I’m currently researching the S2Member plugin that Debbie mentioned above. It looks very promising and even has a LOT of video tutorials to get started. Just finding the time to dig in is difficult! I’m not expanding the functionality on what I’ve done above, but am checking out S2Member and will write a review on my experience of it.

  16. First – brilliant post. This is tremendously helpful for someone starting out developing a client portal via WordPress.

    I do however, have a question. Towards the end of the tutorial, I create the clients.php and clientsredirect.php and have them saved in the same directory as the page.php file that I based the previously mentioned .php files off of. However, the final step of the tutorial redirects any client with the role “client” to the directory yourdomain.com/clients/. I tested this, and upon logging in using a test client username, I am led to yourdomain.com/clients/ which is currently totally empty.

    I am not seeing the link between the clientsredirect.php and redirecting a client to the seemingly empty /clients/ directory. Can you clarify how a client is supposed to login and immediately load the clientsredirect.php page? Thank you, Jean.

  17. Hi Ryan,

    The top level “clients” page you created needs to be assigned a template of “clients redirect”. Then, it will look at your client sign-in name, and redirect them to the appropriate sub-page that you’ve created for that client. (which has a template assignment of “clients”.)

    Good luck!

  18. Hi Jean,
    This is probably a stupid question, however, is it possible to create a blog in WordPress that is viewable to readers ONLY after they have logged into my secure site? Thank you for any help you will provide!

    Linda

  19. Hi Linda – It is absolutely possible to have a blog that is only viewable by members only. I’d recommend to anyone to check out the S2Member plugin to set the privacy of most of your site pages to be private except for a sign-in/subscribe page :)

  20. Hi Jean,

    Thank you very much for sharing your work. I just stumble upon your post and will defenately take a crack at it tomorrow. By the way, any more insights into the S2Member plugin?

    A question if that’s OK, I would like my clients to be able to see the “master” page of all the clients before login into their own page/post. Is that possible with your way?

    Cheers,
    Motti

  21. Oh ya, and if you can come up with a client proofing code (you know, for photographers that want to have their client view and mark their favorites), you will be very popular :-)

    Cheers,
    Motti

  22. Hi Motti – I’ve been pulled in other directions & haven’t had time to really explore S2Members, but I’d actually suggest trying that first. In fact, I’ll update my post to suggest that. I definitely would have used an out-of-the-box solution if it were available when I needed a protected client area. There just wasn’t anything available at the time.

    Good idea about the client proofing code. Since I’m not really a programmer, I tend to try and think of how to repurpose other people’s code. In this case, I’d recommend a 5-star rating plugin and look to have it applicable to each photo in your gallery.

    I believe if you upload all the shots to 1 post/page, then feature it as a gallery, each image will click out to the appropriate attachment page. (showing the image larger) and if it can be shown there, it can be rated. Though I know that’s a cheap-o work around, I totally “get” that it would be more helpful if you could view the ratings all on the same page and it would be great if the top rated images would float to the top :)

    Good luck! It’s great to see the community work together for the greater good & am glad to help when I can.

  23. Hi Rahul, I’m sorry, the sites I’ve set up are private and I haven’t had time to create a test site for this. Worth a thought, though! I’ll let you know if I have any time to do that and will post it :)

  24. Hi Jean,

    Thank you for this post. It’s been very helpful. I have everything installed but then I login with an unauthorized user, I get the Sorry error, but the page content is still visible to that user even tho it shouldn’t be. The only thing I saw that could be wrong was a syntax error on line 3, 6, and 7 of the following.

    user_login );
    $parent_title = strtolower(get_the_title($post->post_parent));
    $theparent = str_replace(‘ ‘, ”, $parent_title);
    if (current_user_can(‘level_5′)) : echo “”; else : header( ‘Location: http://localhost/MSC/wp-admin/’ . $username . ‘/’); ?>

    Any help would be greatly appreciated, much like yourself, I’m a designer, but I enjoy programming as well.

    Aloha

  25. Hi Reico – I think some of the code may be clipped in your post – feel free to contact me using my contact page form. Sorry for the delay, work is keeping me very busy and extends the response time for my donation work. I hope you’ve fared well in the meantime!

  26. Hello Jean,
    I am totally new to WP and html etc. I am just a photographer and my native language is not even english, I have been trying to follow the steps to make this work but I think it s too much for me.
    would you mind to help me set up the clients page area with login and a password for each client so that they can watch their proofs in private?
    How much would you ask for this?
    I will give you my username and password so you can get in and take a look at what I nee and take it from there.
    Let me know, I appreciate
    Danilo

  27. Hi Danilo, thanks so much for inquiring for assistance. Although I would love to help, I’m currently booked solid for 2 months. Rather than keep you waiting, you may want to try installing the S2 Members plugin which is built for similar purpose. The benefit is you won’t have to dig into the code if you use that plugin. I’d love to hear how you make out with it – I haven’t had time to really dig into the plugin myself. Best wishes to you!

  28. Hi Jean and thanks,
    I searcehd for S2 Members but the closest plugin I have found was S2 Members control, which I have installed and activated, I don’t know what to do with it now. LOL I told you I was a newbee.
    I created a page called Client page and then created a subpage which contains a gallery of photos for my client, I password protected this last subpage, but I don t want everybody to even see the gallery page even if they cannot access to it. I would like to have a field where the client can type in their own password and go directly to the hidden gallery page I designed for them to see.
    I know it is not simple, but can it be done?
    I understand you are busy with work and I respect that, but can you please take a look when you have five minutes just to see where I am? I would really appreciate that.
    thanks a lot
    Danilo
    dadopic@gmail.com

  29. Followed the guide, now when i use aclient account via the login ( domain.com/wp-admin ) it redirects me to the domain.com/clients/ but i get a 404 error… thanks

  30. Tristan, without having access to your code, it sounds like either your main (top level) clients page isn’t redirecting well or you haven’t created the actual lower-level specific client page that it redirects to.

    Feel free to temporarily change the client password and email me with an address, client username and password and I can look to see if that gives me more help to direct your efforts.

    Congrats on almost getting there, though! You can do it!

  31. Hi Jean,

    We are using the Mantra theme and have followed your steps above and have this working wonderfully except for 1 thing. As soon as you change the template to the Clients template then the sidebar suddenly gets smaller by about half and it totally messes up the look of the site. This is really odd, even if I don’t actually change the code for the logged in checks code but just change the top of the file to say Template Name: Client instead of the default page.php code then it breaks!

    Any ideas on why this would happen?

    Cheers

  32. Hello Chris – not sure why it would happen – it may be helpful to see your code – though I am not familiar with the Mantra theme – other things may be coming into play with the programming of the theme you’re working with.

    I’ve just recently implemented this for another client and since I was using a child theme of TwentyEleven I used the TwentyEleven page.php file and have uploaded both the clients.php and clientsredirect.php for people to be able to download. (and compare with the original file)

    Perhaps try (on a test site) to create a child theme of Twenty Eleven and include these template files in your theme and see if you run into any difficulties.

    Good luck!

  33. hi ive tryed doing this step by step as you have published but upon testing it i keep getting a htttp 404 webpage cannot be found when trying to log in as a teest client all logs in ok through admin just not on client any ideas on what ive done wrong i really like the idea of implementing this to my site.

  34. Hello Oliver, did you remember to create a page within your WordPress interface for your client? Without seeing your site, and logging in, it is hard to guess. Feel free to email me with your site address, client’s username and a temporary password. (You can change the password after everything is working well for you.)

    Best wishes!

  35. Wow, this is what exactly I am looking for, but look like this post it is almost years ago. Is this still working or is there any update? This is very helpful for me and I will try your steps in coming weekend. I will email you if I have any problem. Thanks in advance.

  36. It is a few years old for sure and can be a good solution for when you need each client to be able to see their own special page. Alternatively, you can use S2Members with some of these recommendations. (specifically the template page redirection code that will redirect clients to their own specific page.) Best wishes!

  37. Hi Jean –

    I’ve been reading through this and I think I’d like to try the instructions you provided above. I have very limited experience with css/html but I do try to figure things out when I can.

    I would like my clients to have a login page where they can do 2 things: 1) access their weekly “assignments” and 2) journal.

    I’ve already created a page using a WPClientFileShare plugin but I’m finding I just manage to get really confused, especially when it comes to creating that specific page…not to mention, having the same page do different things each week…

    I don’ t know if you’ll get this or if you’re even around but I’d love your insight if possible. :)

  38. Hi Jean.

    Thanks for providing this info. I managed to follow all instructions successfully however i get the same issue that oliver had.. when i log in as client it comes up with a 404 error
    can you please post your findings when you helped oliver

    thanks heaps

  39. Hello RK – did you create a page for your client within the WordPress interface? (Pages -> Add New Page) I believe Oliver forgot to make the page – so the programming he had in place directed to the page that was named after the client’s sign-in name but if the page doesn’t exist, your client would get a 404 error.

    Good luck & let me know if that solves it for you.

  40. Hi Jean,

    Firstly thank you for this guide. Even though it was originally posted a while ago it was still incredibly helpful.

    I have one question- is there a way to hide the client sub pages from the navigation menu so that only the logged in client can see their relevant page in the menu list.

    Thanks.

  41. Hi Jenny – glad this post can be of help. By placing the “Subpages Widget” on your client pages (You can use the “Widget Logic” plugin and specify that the widget only shows when someone is logged in: is_user_logged_in() ) , and can specify to only show the sub pages of that page, so clients will only be able to see pages that are below their own page, but administrators, such as yourself can see all pages.

    I’ve just recently made the transition away from having a client portal right within WordPress. I’ve been very happy with how it works and how responsive the author has been. Client Response

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>