post

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:
    <?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 );
    
    endif;
    
    ?>
    
    	<?php if ( is_user_logged_in() ){ //if user is already logged in
    		get_header();
    		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>
    		</div>
                    <?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/>
    		</div>
                    <?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; ?>
    			</p>
    		<?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>
    
    			<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>
    			
    			<p style="margin-left:80px;">
    				<a href="<?php echo get_option('siteurl');  ?>/wp-login.php?action=lostpassword"><?php _e('Lost password?', 'thepesta'); ?></a>
    			</p>
    		</form>
    
    	<?php }
    get_footer();
    

Save the page, you will get your login form in domain.com/login

Cheers :)

 

Leave a Reply