Creating a customer page with roles in WordPress

Wordpress

WordPress was built first and foremost as a blogging platform, it has since expanded to become one of the most popular Content Management Systems available, however, some of those features that make it a great blogging platform become a bit of a nuisance when creating simple business websites.

One of those features is user roles. They can be great when setting up a big blog website; you can create editors who have full control over posts, comments and the like but cant change settings like themes or plugins. Authors can publish posts, contributors can submit posts for review and subscribers simply have read access. It is a robust system for bloggers but when it comes to business users, the default user roles probably mean nothing. That is where the great versatility of WordPress shows itself. With a few changes to the functions file (or added separately through a plugin) you can add new user roles and grant them various capabilities.

The problem was simple. The client required a private area only available to logged in customers who would have no access to any other admin functions. The simplest way would have been to just add capabilities to the Subscriber role, but there were still a few issues with this. After logging in they would still be taken to the dashboard and they would still see the Admin bar at the top of the site. Luckily these issues can also be overcome.

The first thing to do is to remove the user roles that we dont need.

remove_role('subscriber');
remove_role('editor');
remove_role('author');
remove_role('contributor');

This should just leave the Administrator role. Lets change that to add a customer role.

$customer_role = add_role('customer', 'Customer', array(
    'read' => true,
    'level_0' => true, // same level as subscriber
    'read_private_posts' => true,  // Giving access to private posts and pages
    'read_private_pages' => true  
));

New custom role

The add_role() function takes three parameters, the role itself, how it is publicly displayed and an array of capabilities. What we have done above is created a role with the same level as subscriber so they can’t change anything on the site, but we have also given them the ability to read private pages so this will come into play later when we setup the page for customers.

Dashboard after login

Now we can go ahead and create a new customer, assign them to our new role and allow them to login. We are now presented with out next problem. When a user logs in they are automatically directed to the WordPress dashboard. We don’t want our customers to see that because, despite them being unable to change anything, it is confusing and doesnt give a great first impression. To resolve this we can redirect the user on login to a different page.

function my_login_redirect( $redirect_to, $request, $user ){
    //is there a user to check?
    global $user;
    if( isset( $user->roles ) && is_array( $user->roles ) ) {
        //check for admins
        if( in_array( "administrator", $user->roles ) ) {
            // redirect them to the default place
            return $redirect_to;
        } else {
            return home_url('customer-page');
        }
    }
    else {
        return $redirect_to;
    }
}
add_filter("login_redirect", "my_login_redirect", 10, 3);

What we are doing here is creating a function that checks if the logging in user is an administrator. If they are we send them on their way to the default location (dashboard) but if not we redirect them to the customer-page. You can of course return any location.

Thinking of all the possibilities, what happens if a user never logs out? They might stumble across the dashboard and as they are already logged in they would see the unsightly dashboard we tried so hard to hide from them. Not to worry, we can redirect any attempt to access the wp-admin location for non admins.

//  redirect a logged in user if they try to access wp-admin
$current_user = wp_get_current_user();
if (user_can($current_user, 'customer')) {
	add_action('load-index.php', 'dashboard_Redirect');
	function dashboard_Redirect(){
		wp_redirect(home_url('customer-page'));
	}
}

WordPress admin bar

We are now almost there our last consideration is the admin bar. We don’t want our customers to see that either. Again this is a simple fix.

// remove admin bar for all except admin
add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
	if (!current_user_can('administrator') && !is_admin()) {
  		show_admin_bar(false);
	}
}

<img alt="Customer only page" src="http://www project collaboration software.thebettertwin.co.uk/content/uploads/2013/07/customer-only-page.jpg” width=”1000″ height=”476″ />

So now we can create a private page, change the redirects above and our customers can log in, see the customer page and never be confused by pesky dashboards or admin bars. This can also be combined with various methods to rebrand the login page and our “blog” site now looks a lot more business like.

Written by