Wordpress Custom Login Page with Ajax Error Messages

“How to block default wordpress /wp-login.php with error messages to custom login page for front end users? (I’d rather prefer to have an error message appear in the form itself)”
That’s a very good question normally asked on different blogs or forums for wordpress. Here I am going to explain how can  we achieve this functionality using our Wordpress theme templates.

We can do this by two ways:

1. Add the login form on Sidebar
2. Add login form on a Custom template page

Today, let focus on second one, I’ll give you some instructions and new source code for the Custom Login Page.

First of all, you may need to know How to create a new WordPress template page.

As we’re going to show error message without redirecting to wp-login.php so I suggest we use Ajax to post data. Therefore, your template is required to load the jQuery script some where in the header.php file (in the root of your template’s directory)

header.php:


<head>
 
....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 
 type="text/javascript"><!--mce:0--></script>
....
 
</head>
 
After that, let create a new file in your Theme directory (ex: page-login-error-message.php) and add following codes:

page-login-template.php:

 
<?php
/*
Template Name: Login With Error Message
*/
?>
<?php
 global $user_ID;
 if (!$user_ID)
 {
  if($_POST)
  {
   $username = $wpdb->escape($_REQUEST['log']);
   $password = $wpdb->escape($_REQUEST['pwd']);
   $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 "<span style='color:#FF0000'>Invalid username 
or password. Please try again!</span>";
    exit();
   } 
   else 
   { 
    echo "<script type='text/javascript'>
window.location='". get_bloginfo('url') ."'</script>";
    exit();
   }
  }
 }
?>
<?php
 get_header(); 
?>
 
  <div id="container">
   <div id="content" role="main">
<?php 
 if(!is_user_logged_in())
 {
?>     
<div id="result" style="color:#FF0000"></div>   
<form name="login" method="post" id="wp_login_form" action="<?php  
echo get_option('home'); ?>/wp-login.php">
 <input type="hidden" name="action" value="login" />
 <input type="hidden" name="redirect_to" value="<?php 
echo $_SERVER['REQUEST_URI']; ?>" />
 <table width="450px" border="0" cellpadding="0" cellspacing="0">
   <tr>
  <td colspan="2" style="padding-bottom: 8px;"><strong>MEMBER 
LOGIN</strong></td>
   </tr>
   <tr>
  <td><strong>Username:</strong></td>
  <td align="right"><input type="text" name="log" id="log" 
value="" class="text" /></td>
   </tr>
   <tr>
  <td><strong>Password:</strong></td>
  <td align="right"><input type="password" name="pwd" id="pwd" 
class="text" /></td>
   </tr>
   <tr>
  <td align="left" colspan="2"><input name="rememberme" 
id="rememberme" type="checkbox" 
checked="checked" value="forever" /> Remember me</td>
   </tr>
   <tr>
  <td align="left" colspan="2"><input type="submit" id="btnsubmit" 
value="Login"/>
</td>
   </tr>
   <tr>
  <td align="left" colspan="2"><a href="<?php 
echo get_option('home'); ?>/forgot-password/">[Forgot password?]</a> </td>
   </tr>
 
 </table>
</form>
<script type="text/javascript">        
$("#btnsubmit").click(function() 
{
 $('#result').html('Loading ...').fadeIn();
 var input_data = $('#wp_login_form').serialize();
 $.ajax({
  type: "POST",
  url:  "<?php echo "http://" . $_SERVER['HTTP_HOST'] . 
 $_SERVER['REQUEST_URI']; 
?>",
  data: input_data,
  success: function(msg){
   $('#result').html(msg);
  }
 });
 return false;
});
</script> 
<?php 
 }
 else
 {
  global $current_user;
  get_currentuserinfo();
  if($current_user->user_firstname != '' && $current_user-> 
user_lastname)
echo "Welcome " . $current_user->user_firstname . ","  . $current_user->
 user_lastname . "!";
  else
  echo "Welcome " . $current_user->user_login . "!";
 
  echo " | <a title='Logout' href='" . wp_logout_url('index.php')  
. "'>Logout</a><br><br>"; 
?>
          You are currently logged in!
<?php 
 }
?>
   </div><!-- #content -->
  </div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

We’re using jQuery Ajax to submit data to verify the login detail (Username/Password) then process the result.
Validate data and verify the login request then return result for the Ajax callback function.

 An error message appears in Red in the form without redirecting to wp-login.php page or refresh page.
 
 
Share on Google Plus

About Khawar Akram

Efficient professional with approximately 3 years of experience in a medium size digital web agency and geotechnical engineering organization. Has profound knowledge of web and e-commerce application development. Expertise and experience in application deployments, analysis user requirements and client trainings and support. And proficient in adapt latest technologies, motivated and accomplished IT professional with resource management and programming skills and cooperative to peers and friendly to the starters.

1 comments: