wordpress employee portal

wordpress employee portal

I’ve came across a client that wanted an employee login portal where they can upload files/images, download files, check schedules, etc. The following article demonstrates how to go about doing this.

 

–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.

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. 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).

 

If you want to assign certain pages to specific users/groups, you cant download the role scoper plugin found here: https://wordpress.org/plugins/role-scoper/

There are no comments published yet.

Leave a Comment