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.

Wordpress Custom Login Page with Ajax Error Messages

header.php:

page-login-template.php:

Contact Form