WordPress.org

Ready to get started?Download WordPress

Forums

My Crack at a Client Login Section/Customer Portal (15 posts)

  1. JTWilcox
    Member
    Posted 5 years ago #

    Hi everyone,

    [Sorry, this is going to be kind of long... hopefully it's enlightening! Admins/Mods: If there's a better place for this kind of thread, please move or let me know. Thanks.]

    I am a freelance illustrator/designer and am currently redesigning my website to run on WP and use WP as a CMS. After I got the site working how I wanted and styled it accordingly, I decided it might be nice to create a special area where clients could log in and go to their own page. On this page, I can place document or image downloads, special links, or whatever else I want that I could put on any regular WP page.

    I started searching for info on how to do this a couple days ago but didn't really find exactly what I was looking for, or didn't really find anything I could understand. For the record, I am by no means a programmer/coder. I know HTML/CSS pretty well but know barely anything about PHP other than what I've pieced together from various sites and tutorials for this site redesign. This is the second time I've ever tried messing with WP and the first time I've ever touched any PHP code. That being said, I think I've got things running pretty well and wanted to share my process as it may help other people out. I am certain that my code can be cleaned up and made way more efficient, so if you see anything that seems strange, stupid or downright wrong, please let me know.

    Realistically this is pretty basic functionality, but this is all I need. For what it's worth, this means that I am the only admin on the site and this process is not completely automated in terms of user registration or anything. And I don't have a zillion clients. It's a bit smaller scale. I just wanted to make a special place for each client where I can give them access to files/links. I am not giving them the ability to post on my blog or anything like that. I am also not making multiple users for people working on the same project (such as one login for the AD, one for copywriter, etc) - I am basically making one login for EVERYONE involved in the project. Also I'm sure that this is by no means "secure," but it works just fine for what I need.

    NOTE: I link to my site below, but just so you know, the site doesn't have much content yet. The comics and sketchbooks pages have nothing in them, and since they are categories their links return 404 errors. Also the home page (clicking on the logo) currently just takes you to an "under construction" page (by using a custom template) at the root of the site.

    So here we go...

    THE CHALLENGE: Create functionality in WP to allow clients to log into my site and be taken to their own custom page. Clients should not be able to access other clients' pages. Users that are not logged in should not be able to see any client pages. Provide clients with an easy way to log in.

    --PLUGINS--

    I used a few plugins to get this working how I wanted:

    First I downloaded and installed Role Manager. There seems to be a lot you can do with it, but honestly the way I'm using it, I probably don't even need it. I'm just using it to create a role called "Clients" for my own sanity. Except for the name, the "Client" role is identical to the role of Subscriber (they can only read).

    I'm using the BM Custom Login Plugin to make a custom login window. Again, not completely necessary. You can probably also do this with other plugins or even manually. I just used it to change my basic WP login page to show my site logo and a "client login" subtitle. This is fine since I'm the only admin.

    The important one for me here was Peter's Login Redirect Plugin. Every time I create a new client user (more on this below), I use this plugin to automatically redirect them to their own client page when they login rather than having them go to the admin/control panel (which I don't want them to see at all).

    --CLIENT USERS--

    Once the plugins are installed, I can create my clients. I just make a new user for each client and set their role to "Client" (thanks to the Roll Manager plugin). I give them a username that is all lowercase and with no spaces (important for later). I can then email each client their username and password, and URLs to their client page and to the main wp-login, or whatever. I thought about making it so that clients could register themselves, but since I am not dealing with a huge number of clients, I decided it would probably be better if I had more control over this process.

    --PAGES--

    First I created a new page titled "Clients". This is probably not completely necessary, but again I did this for my own sanity. This way I can set all of the individual client pages as children of this page so that when I'm going through them in the control panel, it is better organized. Currently the Clients page is blank, but I will probably just have it display a message like "please log in" or whatever just in case people somehow find their way to it.

    I make a page for each client. All individual client pages are set as children of the Clients page (just to organize them, although this helps with how the nav works for my custom site theme, too). I also created a custom template for these pages in my theme directory called "clients.php" (originally copied from page.php) with the template name "Clients" (code below). So I set each client page to use this template.

    IMPORTANT: For my process, the client page title must be the same as the client's username, although it doesn't have to be all lower case with no spaces. For example, a client with the username "acmecompany" would have a page called "Acme Company" when I'm writing the page. The letters must match.

    IMPORTANT: the way my permalinks are setup, if a page title has any spaces in it WP defaults the spaces to dashes, like "/clients/client-name". I press "edit" next to this and manually take out the dashes so that it appears as "/clients/clientname". This should make the end of the URL for a client page identical to that client's username. This becomes important in a moment...

    --CLIENT PAGE TEMPLATE--

    Here is my client.php template:

    <?php
    /*
    Template Name: Clients
    */
    ?>
    
    	<?php get_header(); ?>
    
    	<div id="contentcolumn">
    
    		<?php $thetitle = strtolower(get_the_title());
    		$shorttitle = str_replace(' ', '', $thetitle);
    		$username = ( $userdata->user_login ) ?>
    
    		<?php if ( current_user_can( 'level_10' ) || is_user_logged_in() && $username==$shorttitle )  { ?>
    
    			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    			<div class="clientcontent" id="post-<?php the_ID(); ?>">
    
    				<h2><?php the_title(); ?></h2>
    
    				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
    				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
    
    			</div>
    
    			<?php endwhile; endif; ?>
    
    		<?php } elseif ( is_user_logged_in()==false ) { ?>
    
    			<div class="clientcontent">
    
    			<h2>Sorry...</h2>
    
    				<p>You must be <a href="http://jtwilcox.com/wp-login.php">logged in</a> to access this area.</p>
    
    			</div>
    
    		<?php } elseif ( is_user_logged_in() && $username!=$shorttitle ) { ?>
    
    			<div class="clientcontent">
    
    			<h2>Sorry...</h2>
    
    				<p>You are not allowed to access this area.</p>
    
    			</div>
    
    		<?php } ?>
    
    			<div class="bottomspacer"></div>
    
    		</div>
    
    	</div>
    
    </body>
    
    </html>

    Some of it is obviously specific to my theme, but here are the important bits:

    <?php $thetitle = strtolower(get_the_title());
    		$shorttitle = str_replace(' ', '', $thetitle);
    		$username = ( $userdata->user_login ) ?>

    This makes the page title lowercase and puts it in the variable "$thetitle", then takes out all the spaces and makes it into a final variable "$shorttitle". Finally, it makes the username into it's own variable. (Thanks to SteveSmith#### (I forget the numbers...) in the #wordpress IRC room for this bit)
    <?php if ( current_user_can( 'level_10' ) || is_user_logged_in() && $username==$shorttitle ) { ?>
    If the user is an admin, or if the user is not an admin but their username matches our variable "$shorttitle" (so basically if user name == client page title), display all of the special info for that client.
    <?php } elseif ( is_user_logged_in()==false ) { ?>
    If user is not logged in at all, display a message telling them they must be logged in with a link to wp-login.
    <?php } elseif ( is_user_logged_in() && $username!=$shorttitle ) { ?>
    If user is logged in, but their username does not match "$shorttitle" (if this is not their client page), display a message saying they do not have access to the page.

    So basically if you're not logged in, you can't see any of this, if you are logged in as a client, you can only see your own client page, and if you're logged in as an admin, you can see everything. Also the only way for anyone to try and access a client page is to type in the actual URL (AFAIK?), so the changes of that seem pretty low anyway. Try this out on my site - login: demo password: demo.

    I also wrap this stuff into divs with a class of "clientcontent" so that I can style this section independently from the other areas in my style.css file.

    --HOW A CLIENT LOGS IN--

    Since the clients are basically registered as actual users of the site, their login point is the same as mine as an admin - the wp-login.php file. As stated above, I changed the look of this page slightly to show my site logo and the text "client login" so there's no confusion for the clients. They can simply point their browsers to this page to login. But I highly doubt any of them would memorize this URL. So...

    I made a link in my sidebar navigation (actually this little box with my contact info is my included footer.php file) to allow clients to login from anywhere on the site (see it from any of my pages, like from the About page for example). If you are not logged in, you should see an icon of a padlock that is closed next to a link that says "Client Login". Clicking on this link takes you to wp-login. Then it gets a little more interesting. Here's the code for this area:

    <div id="footer">
    
    			<?php $username = ( $userdata->user_login ) ?>
    
    				<p class="email"><a href="mailto:jtwilcox@gmail.com">Email Me</a></p>
    
    				<p class="call">(248) 217-0810</p>
    
    				<p class="subscribe"><a href="http://jtwilcox.com/subscribe">Subscribe</a></p>
    
    				<?php if ( current_user_can( 'level_10' ) ) { ?>
    
    					<p class="unlock"><a href="http://jtwilcox.com/wp-admin/">Control Panel</a></p>
    
    					<p class="logout">>><?php wp_loginout(); ?></p>
    
    				<?php } elseif ( is_user_logged_in() ) { ?>
    
    					<p class="unlock"><a href="http://jtwilcox.com/clients/<?php global $userdata;
          					get_currentuserinfo(); echo( $userdata->user_login );?>">Client Page</a></p>
    
    					<p class="logout">>><?php wp_loginout(); ?></p>
    
    				<?php } elseif ( is_user_logged_in()==false ) { ?>
    
    					<p class="lock"><a href="http://jtwilcox.com/wp-login.php">Client Login</a></p>
    
    				<?php } ?>
    
    				<p class="tiny">&copy Jon Wilcox 2008</p>
    
    			</div>

    The first few items are just the lines for my email, phone number and subscriptions. The last part is for my copyright. But I'll break down the middle:

    <?php if ( current_user_can( 'level_10' ) ) { ?>
    
    					<p class="unlock"><a href="http://jtwilcox.com/wp-admin/">Control Panel</a></p>
    
    					<p class="logout">>><?php wp_loginout(); ?></p>

    First it checks to see if the current user is an admin. If you are logged in as an admin, then the icon of the closed padlock becomes an icon of a cog and the link that previously read "Client Login" now says "Control Panel". The link also changes to just point to wp-admin. Also, a small link appears below this that says "Log Out" and if you click it, it does just that.

    <?php } elseif ( is_user_logged_in() ) { ?>
    
    					<p class="unlock"><a href="http://jtwilcox.com/clients/<?php global $userdata;
          					get_currentuserinfo(); echo( $userdata->user_login );?>">Client Page</a></p>
    
    					<p class="logout">>><?php wp_loginout(); ?></p>

    Here, if a user is logged in but is not an admin (so in my case this encompasses all clients), the icon becomes an open padlock. The link now reads "Client Page" and points to their own client page, pulling their username to use for the end of the link URL (this is why the parts above about the user naming convention and page permalinks were important). This also adds the "Log Out" link.

    <?php } elseif ( is_user_logged_in()==false ) { ?>
    
    					<p class="lock"><a href="http://jtwilcox.com/wp-login.php">Client Login</a></p>
    
    				<?php } ?>

    Finally, this little bit just says that if a user is not logged in, the padlock icon is "closed," the link reads "Client Login" and points to wp-login.php, and there is no "Log Out" link.

    What all this means is that the little section on the side dealing with client login differs depending on if you are logged in or not, and if you are logged in as an admin or not. The other nice thing about this section is that the client can view their own client page, go to a different page on the site, say the Blog, and then get back to their own page in one click, or log out if they feel the need. It's also nice if you're an admin and you need to access the control panel for some reason (I removed all of the "edit" links in my theme, so this may be helpful).

    ----

    And I think that's it. Hopefully that all made some sense. Again, I have no doubt that my code is somehow flawed or inefficient, but like I said I am no programmer and this is my first crack at this kind of thing. If you see anything in there that makes you cringe, or if you just have some pointers, please let me know. But I hope that this was somehow useful. If you'd like, feel free to email me with any questions or comments. I think I successfully included all of my steps and important info and code here, but if I missed something and remember later, I'll try and edit this post.

    And again, if you'd like to try all of this out, please login to my site using demo/demo as the login/pass. But please note that the site isn't finished.

    WHEW! Thanks for reading.

    -Jon

  2. gideonvd
    Member
    Posted 5 years ago #

    Excellent work man. I must say there are probably some things that don't exactly streamline the process but it looks professional and feels quit secure ;). I've been trying to do something like this but then decided to just pay for professional software (http://www.activecollab.com/). Works fine for me. Your a month down the line man...gotta get rid of that under construction page ;)

    Greetings from Amsterdam,
    Gideon

  3. everydaylady
    Member
    Posted 5 years ago #

    I really like the idea...what ever happened to it? I just want a place for my clients to log in and make payments from the blog/website.

  4. lamarant
    Member
    Posted 5 years ago #

    This is fantastic. Worked like a charm.

    One minor enhancement: I set the "Clients" parent page up as a re-direct page. Then I set "Peter's Login Redirect" plugin to redirect all users that have the "Client" role to that page after login. When any client log sinto the site now, they automatically get re-directed to their specific page. This circumvents the need to redirect each user to their specific page in the re-direct plugin.

    Well done. Saved me loads of time.

  5. Josh Fialkoff
    Member
    Posted 5 years ago #

    Hi,

    This is great stuff!

    I am trying to make sub pages below each client directory, so for instance, under client1, there might be a project1 page.

    However, when I log in as the client and go to

    http://domain.com/clientarea/client1/project1, I get an error message that I am not authorized to see that page.

    How can I modify the PHP to allow clients to also have access to sub directories?

    Thanks,
    Josh

  6. djaawn
    Member
    Posted 5 years ago #

    lamarant, you mind sharing how you set up your parent client page as a redirect page? any help is appreciated.

  7. djaawn
    Member
    Posted 5 years ago #

    Hi. i've made a lame attempt at making the redirect work. I've followed the steps above, and now i'm attempting to redirect after the client logs in and send them to the appropriate page. I have all users with the role "client" sent to the "client" parent page after logging in, which i want to then send them to their client page based on the username they just typed in.

    <?php
    /*
    Template Name: Client Redirect
    */
    ?>
    <?php
    $username = ( $userdata->user_login );
    $clientpage = bloginfo('url').'/client/'.$username;
    header( "Location: $clientpage" );
    ?>

    This is of course not correctly done, as i don't know much about php, but it does show what i'm trying to do. (If this extra page can be skipped, and instead the variable $username can come from the login form input, that would be great.)

    thanks in advance for any help

  8. lamarant
    Member
    Posted 5 years ago #

    Here is my client re-direct template page. Just set the main client page to this template, re-direct all users with the role of 'Client' to this page, and you'll be all set.

    Note: If you are the user 'admin', you will see a list of links to all of your client pages. If not, you will be automatically re-directed to the client page that corresponds to the username that is logged in. There are handlers in here as well for other logging-in user scenarios.

    <?php
    /*
    Template Name: _ClientRedirect_DONOTUSE
    */
    ?>
    
    <?php 
    
    $username = ( $userdata->user_login ) ?>
    
    <?php 
    
    if (current_user_can( 'level_10' ) || is_user_logged_in())  {
    	if($username == "admin"){
        	//list all client pages
    		get_header();
    		include("breadcrumb.php");
    		echo '<div><h1>Client Pages</h1><ul>';
    		wp_list_pages('title_li=&child_of=60&title_li=');
    		echo '</ul></div>';
    	}
    	else{
    		//user is loged in so re-direct to their page
    		header('Location:http://www.mydomain.com/clients/' . $username);
    	}
    
    } elseif ( is_user_logged_in()==false ) {
    	//user not logged in so re-direct to login page
    	header('Location:http://www.mydomain.com/wp-admin/');
    
    } elseif ( is_user_logged_in() && $username!=$shorttitle ) {
    	//user logged in - redirect to their page
    	header('Location:http://www.mydomain.com/wp-admin/');
    
    } 
    
    ?>
  9. Jonv
    Member
    Posted 5 years ago #

    Has anyone had any luck automating this?

  10. Jonv
    Member
    Posted 5 years ago #

    First step towards automation that i have found:

    Instead of using Peter's Login Redirect Plugin use WP-Block Admin instead.

    I combined the use of WP-Block Admin with the script lamarant posted.
    I used lamarant's script on my url.com/client/ page to redirect the client to there page.
    In the WP-Block Admin it will redirect a lower level user (the client) to another page. On line 21 i set that to '/client/' so the WP-Block Admin plugin pushes them to the client page after login and the client page pushes them to there individual page!

    I hope that makes since.

    This way it automates the step of creating the url forward. It also keeps the branding more in your control and keeps them out of the admin panel!

  11. sonofabear
    Member
    Posted 5 years ago #

    JTWilcox, great post. This is exactly what I need. I was wondering, do you use some sort of plugin to manage the files that each client see's when they log into their page?

  12. bendrucker
    Member
    Posted 5 years ago #

    Thanks so much to JTWilcox for this. This was even more security than I needed, but better too much than too little. It took a little extra time to get implemented, but it was well worth it. Also, thanks to lamarant for his addition. My link in my header links to the client page, which, because of lamarant's script, either redirects to the appropriate page or to the login page. For users directed to the login page, I then use Peter's Redirect plugin to redirect all client level users back to the /client page after logging in. The /client page then redirects them to their page.

    I may have spent a few hours making it very automated and pretty now, but from now on I have virtually no work to do to add my client pages.

  13. JTWilcox
    Member
    Posted 5 years ago #

    Whoa, I hadn't checked this page since I posted and had no idea people were getting any use out of this. I'm glad to see it's helped some of you out and allowed you to streamline the whole thing even more. I'm sure there are better ways to do this now than when I originally made the page, anyway. Also, in case anyone else comes looking at this, I have removed the test page links from my original post. I have redesigned my site and no longer needed a client section. Sorry for the inconvenience, but hopefully the rest is enough to get you going. Thanks.

  14. j3design
    Member
    Posted 4 years ago #

    I am using this and it works great, I was wondering if anyone figured out a solution to the "noozeguy" question below. thats the only thing left before I can go live.

    ---
    I am trying to make sub pages below each client directory, so for instance, under client1, there might be a project1 page.
    However, when I log in as the client and go to
    http://domain.com/clientarea/client1/project1, I get an error message that I am not authorized to see that page.
    How can I modify the PHP to allow clients to also have access to sub directories?

  15. underscore
    Member
    Posted 4 years ago #

    Lovin the work here JTWilcox and others.

    J3design I am also using sub pages and they work fine, however I have a main client page (for each client) and that has its own template. Inside that template I generate navigation for all the sub pages so the client can navigate to project 1, project 2 etc.

    The only problem that I had was client a, could potentially see client b's pages.

    So in my client template I added, it checks to see if the username is the same as the url, if so it allows the client to view, otherwise it re-directs them back to the login page. Stops one client snooping on another.

    ?php 
    
    $username = ( $userdata->user_login ); 
    
    ?>
    
        <?php
    $url =  $_SERVER['REQUEST_URI'];
    $urlItemsArr = explode( '/', $url );
    
    /*
    print ('client-area/'.$userdata->user_nicename);
    print '<br />';
    print ($urlItemsArr[1].'/'.$urlItemsArr[2] );
    print '<br />';
    */
    
    if ( strcmp( 'client-area/'.$userdata->user_nicename, $urlItemsArr[1].'/'.$urlItemsArr[2] ) == 0) {
    	 print 'Allowed';
    } else {
    	header('Location:http://www.yourdomain.com/wp-admin/') ;
    }
    
    ?>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.