WordPress frontend login form with validation

Posted on February 24, 2013 in Advance, Wordpress by admin

There’s many people like to include their wordpress user login form on the front-end keeping all the error check (validation) on the same front-end page. If you are one of them, this post will help you :)

I am here adding this form to a page, who’s page slug is “login”. You can either create a shortcode and call it from wherever you want, or you can create a page template as well! In some other post, I will show how to use this login form using a shortcode.

  1. Create a new page with slug “login”, or you can create it as you like. In that case don’t forget to update template file name in step 2.
  2. Create a new file named page-login.php (structure: page-SLUG.php –> don’t forget to change SLUG to your page-slug) in your theme folder (wp-content/themes/THEME_NAME/PLACE_FILE_HERE)
  3. Put the following code in the page-login.php:
     * User Login Page
    if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'log-in' ) :
    	global $error;
    	$login = wp_login( $_POST['user-name'], $_POST['password'] );
    	$login = wp_signon( array( 'user_login' => $_POST['user-name'], 'user_password' => $_POST['password'], 'remember' => $_POST['remember-me'] ), false );
    	<?php if ( is_user_logged_in() ){ //if user is already logged in
    		global $user_ID; $current_user = get_userdata( $user_ID ); ?>
    		<div class="page-top">
    			<p>Logged in as <b><?php echo $current_user->first_name . ' ' . $current_user->last_name; ?></b><br/>
    			<a href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Log out &raquo;', 'frontendprofile'); ?></a></p>
                    <?php get_footer(); ?>
    	<?php } elseif ( $login->ID ){ // After successful login ?>
    		<?php $login = get_userdata( $login->ID );?>
    		<div class="page-top">
    			<p>You have successfully logged in as <b><?php echo $login->first_name . ' ' . $login->last_name; ?></b><br/>
                    <?php get_footer(); ?>
    	<?php } else{ // Not logged in, show the login form ?>
    	<?php get_header(); ?>
    			<div class="page-top">
    				<h1 class="title-top">Login using your username and password.</h1>
    		<?php if ( $error ) : ?>
    			<p class="error">
    				<?php echo $error; ?>
    		<?php endif; ?>
    		<form action="<?php the_permalink(); ?>" method="post" class="sign-in">
    			<label for="user-name"><?php _e('Username', 'thepesta'); ?></label>
    			<input type="text" name="user-name" id="user-name" value="<?php echo wp_specialchars( $_POST['user-name'], 1 ); ?>" /><br/><br/>
    			<p class="login-form-password">
    				<label for="password"><?php _e('Password', 'thepesta'); ?></label>
    				<input type="password" name="password" id="password" />
    			<p class="login-form-submit">
    				<input type="submit" name="submit" value="<?php _e('Log in', 'thepesta'); ?>" />
    				<input name="remember-me" id="remember-me" type="checkbox" checked="checked" value="forever" />
    				<label for="remember-me"><?php _e('Remember me', 'thepesta'); ?></label>
    				<input type="hidden" name="action" value="log-in" />
    			<p style="margin-left:80px;">
    				<a href="<?php echo get_option('siteurl');  ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'thepesta'); ?></a>
    	<?php }

Save the page, you will get your login form in

Cheers :)


Leave a Reply