“How can I prevent the page to be redirected to /wp-login.php if a wrong password is entered ? (I’d rather prefer to have an error message appear in the form itself)”. That’s a very good question of weridrubikscube
From the tutorial: How to Add WordPress Login Form On Sidebar Or Custom Page, we have 2 sections:
- 1. Add the login form on Sidebar
- 2. Add login form on a Custom template page
Today, let focus on section 2, 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:
<?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(); ?> |
- Line: 75 .. 91: we’re using jQuery Ajax to submit data to verify the login detail (Username/Password) then process the result.
- Line: 06 .. 36: validate data and verify the login request then return result for the Ajax callback function.
WordPress Login Form On Custom Page
The form is look like with the one on the last tutorial. However, when you click Login button with wrong pair of Username and Password, the magic will occur:
WordPress Custom Login Page With Ajax Error Message
An error message appears in Red in the form without redirecting to wp-login.php page or refresh page.
Download the Login With Error Message Template source code.
