My Crack at a Client Login Section/Customer Portal

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