If you are running a membership website, you don’t want your users to present the usual WordPress login (/wp-admin), since some users will find it odd or not good for your business. You need to use a page or a custom page that users can login and it should be integrated seamlessly to the theme and WordPress functions. Today, I will share you how to create a WordPress custom login page for your website. You can use this for your project or running website and it’s not really hard.
Since I’ve been making a lot of Custom WordPress themes lately, most of my Clients wanted a membership site that they can maintain easily. While some of the requirements are the same, others are not. This one particular Client wanted a front end dashboard, everything that WP has will be brought on the front end, login page included.
I am going to show you the code about WordPress custom login page. First, copy your page.php and name it page-login.php, make sure you added a page-template on the top of the file, after that paste the entire code below.
<?php if(current_user_can('author') || current_user_can('editor') || current_user_can('administrator')){ ?>
<?php echo 'You\'re already logged in'; ?>
<?php }else{ ?>
<?php $args = array(
'echo' => true,
'redirect' => 'http://DOMAIN.COM/dashboard/',
'form_id' => 'loginform',
'label_username' => __( 'Username' ),
'label_password' => __( 'Password' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Log In' ),
'id_username' => 'user_login',
'id_password' => 'user_pass',
'id_remember' => 'rememberme',
'id_submit' => 'wp-submit',
'remember' => true,
'value_username' => NULL,
'value_remember' => false );
wp_login_form($args);
?>
<?php } ?>
The important things that you should change is the redirect, change it to your domain and page where your users should land upon login. Upload it to your website and create a new page, select the page template and hit publish.
What if your Clients has several membership levels, like MemberA is a editor and MemberB is a subscriber. MemberA would end up in a front end rather than back-end, which is a bad user experience.
To sort this issue, you need to add this to your functions.php
/** Login Redirect **/
add_filter("login_redirect", "my_login_redirect", 10, 3);
function my_login_redirect( $redirect_to, $request, $user ){
//is there a user to check?
if( is_array( $user->roles ) ) {
//check for admins
if( in_array( "administrator", $user->roles ) || in_array( "editor", $user->roles ) || in_array( "author", $user->roles ) ) {
// redirect them to the default place
return 'http://DOMAIN.COM/wp-admin/';
} else {
return 'http://DOMAIN.COM/dashboard/';
}
}
}
This function will short your subscriber to redirect them to the proper page, same for your editor, author and admin to the backend of WordPress. This will make sure that your users will have a great experience using your membership site.
Make sure you add the right domain and proper redirect to the pages, last thing we want is to lead them to a broken link.
Hope this is helpful to your membership site building, this is just one example on how to create a WordPress custom login page. There are plugins if you are afraid to touch your theme, or you can hire me instead! 😉 Feel free to post your questions if you have any in the comments below.
