Hi guys!

After we learned how to create new roles and played with users’ capabilities, I’d like to tell you about the user area. This is a place on the website, available to blog users or customers only. Imagine that we need an online shop, where a registered user can download your price list or you need to display your custom information to various users, there could be dozens of different scenarios. This features makes your website more user friendly, with additional options. By the way, we already had a similar project and I well, it was really interesting to work on it. So without further do – let’s start!

User Authorization Through a New Custom Login Form

To create a custom login form at your custom page, first of all you need to make a simple HTML form, like this:

Class Custom_Login {
    function __construct(){
        add_shortcode( 'custom-login-form', array( $this, 'view_login_form' ) );
    }

    function view_login_form(){
        $home_url = home_url( '' );
        $redirect_url = home_url( 'profile' );
        echo <<<HTML
        <form id="login" name="loginform" action="$home_url/wp-login.php"" method="post">
            <dl>
                <dt><label>Username:</label></dt>
                <dd><input type="text" value="" id="form_user_email" name="log" /></dd>
            </dl>
        <dl>
                <dt><label>Password:</label></dt>
                <dd><input type="password" value="" id="form_user_password" name="pwd"/></dd>
        </dl>
            <div>
                <input type="submit" name="wp-submit" id="wp-submit" value="Log In" tabindex="100" />
                <input type="hidden" name="redirect_to" value="$redirect_url" />
                <input type="hidden" name="testcookie" value="1" />
            </div>
        </form>
HTML;
    }
}
new Custom_Login();

This form sends data to wp-login.php page, which, in turn, authorizes or redirects user to login page. This is a very simple method to use, we’re just creating the form and submitting it to the correct address, WordPress does everything itself and it’s really cool! If you paid attention, you noticed that login form uses hidden input field named “redirect_to” to proceed user to profile page after logging. You can redirect anywhere, but in this piece of code I used a profile page (but it’s not created yet).

Ok, everything here is clear. Please pay attention to input names, WordPress uses only this kind of names. By the way, an input named testcookie is used to check browser cookie support. You can wrap this html code in a theme template or a widget, but I decided to call this form with a shortcode. Therefore, now we go to the dashboard and create a new page named “Login Page” with one shortcode “[custom-login-form]”. Voila, everything works! Now, let’s move to the next chapter.

Create User Area

Well, at first let’s define a user area is. It’s a simple page which shows user’s personal data. For example, suppose that the address of this page will be {host_url}/profile. So, when users visit a page with the address /profile, they should see their personal info. Okay, but how can we do it ?

We can wrap this script into a plugin, or use as a page template. In my opinion, the page template is the easiest, and not so difficult to support. Put this file into your theme (for example: page-profile.php).

<?php
/**
 * Template Name: User profile page
 */

get_header();

if ( !is_user_logged_in() ) {
wp_die('Access Denied!');
}

get_footer();

Actually, almost everything is done, most of the code for your custom profile is written. On the profile page, first we need to check whether a user is authorized or not.

NOTE: is_user_logged_in() – this function returns boolean values. ‘True’ if user is logged in, ‘false’ if not.

After that,  we can show required information to all users. Remembering the previous article, we can display various information for different roles. After the all checks, we get user data and display it:

<?php
/**
 * Template Name: User profile page
 */

if ( !is_user_logged_in() ) {
    wp_die('Access Denied!');
}

get_header();

$user = wp_get_current_user();
$current_role = array_keys($user->wp_capabilities);
$current_role = $current_role[0];

switch ($current_role) {
    case 'author':
        // content for author
        break;
    case 'editor':
        // content for editor
        break;
    case 'contributor':
        // content for contributor
        break;
    default:
	 // content for other roles
	 break;

}

get_footer();
?>

Now we need to create a new page in your dashboard and assign it to our profile template – ‘User profile page’. Custom user profile page is good, but some users don’t really need to see it, so let’s hide the dashboard. So, how to deny access to dashboard for certain users or roles ?

add_action('admin_init', 'denied_access');

/**
 * Denied access to admin panel for non-admin users
 */
function denied_access() {
	$user = wp_get_current_user();
	$current_role = array_keys($user->wp_capabilities);
	$current_role = $current_role[0];
	if ($current_role != 'administrator' && $current_role != 'custom_administrator')
		wp_redirect( home_url() );
}

// if you need, this hide the admin bar
add_filter('show_admin_bar', '__return_false');

Conclusion

This brings us to the end of the second part in the series. Well, guys, today we’ve cleared up what else can we do with WordPress users. We’ve created custom login form with the help of shortcode and we have also looked how to create a user’s profile page with a few simple codes.

I hope you enjoyed reading my article and learnt something new. Please, feel free to leave your feedback below. Have a nice theme!