Custom WordPress Login without using a plugin

14 March 2011 by Tags: ,,

Today we are going to see how to make a Custom WordPress Login page template. You may seen a lot of plugins available out there to customize the wordpress default login page. But most of those plugin activated login page will not match your theme style and it offers very less customization options. So why don’t we create a custom wordpress login page template as part of our theme?

In this tutorial we will learn about making a WordPress Login page template without using any plugin but with the use of jQuery. Yes, we will use jQuery to show login error messages without page-refresh.

Custom WordPress Login Page

Step1: Create a new page called custom-login.php

The first step to do is create a new php template file called custom-login.php and place it inside your wordpress theme folder your-domain-name/wp-content/themes/your-theme-name

Step2: Naming the Template file

Place the following the code inside custom-login.php

< ?php
/*
Template Name: Custom WordPress Login
*/
?>

First, we must check whether the current user is logged in or not. If the current user is not logged in, we will show the login form otherwise redirect the user to the homepage.

< ?php
global $user_ID;
if (!$user_ID) {
   //embed the login form and validation code.
}
else {
   echo "";
}

Step3: Call the theme header

All following codes should go inside the condition if (!$user_ID) { }.

get_header();

Step4: Page title function

the_title();

Step5: Embedding the Login Form

Step6: Including jQuery library

If you are not already using the jQuery library in your wordpress theme, you should add it now. Open up the header.php from your theme’s folder and place the following code just above “< / head>“.

Step8: PHP Validation

Add the following php code above get_header() and get the login form inside the else part of the following if condition. Also move the get_header function inside the else part.


if($_POST){
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);
	
if($remember) $remember = "true";
else $remember = "false";
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, true ); 
		
if ( is_wp_error($user_verify) ) 
{
echo "Invalid username or password. Please try again!";
exit();
} else 
{	
echo "";
exit();
}
} else 
{
//Embed the Login form here
}

I've been used the wordpress's wp_signon function to authenticate the user. wp_signon() is a wordpress function to authenticate users which accepts the user info parameters as an array.
And i have been defined my own error messages to show up on failed login attempt.

If you want the default wordpress error messages to show, just replace

echo "Invalid username or password. Please try again!";

to 

echo $user_verify->get_error_message();

Step9: Call the footer function

Put this code just before the end of the else part.

get_footer();

Full Code Preview


< ?php
/*
Template Name: Custom WordPress Login
*/
global $user_ID;

if (!$user_ID) {

if($_POST){
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);

if($remember) $remember = "true";
else $remember = "false";
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, true ); 
	
if ( is_wp_error($user_verify) ) 
{
   echo "Invalid username or password. Please try again!";
   exit();
 } else 
 {	
   echo "";
   exit();
 }
} else { 

get_header();

?>








 









 
















window.location='". get_bloginfo('url') ."'";
}
?>

So we have the template file ready. Next step is to make a new page from the wordpress admin area using the newly created page template.

Step10: Add new blank page

Login to your wordpress admin and navigate to "Add New Page". Write some title for the page and leave the content box empty. You can see our newly created page template "Custom WordPress Login" under the Template list. Select it and finally Publish.

template_list

That's it.

4,167 Downloads