Create a custom login page for your wordpress theme

If your site requires people to login and you’d like them to do it via your theme rather than the default WordPress login page by doing login file ( wp-login.php ) but you can create a custom login page using a page template. In this tutorial I will walk you though how to create one.
Create a page template file called ‘page-login.php’ , add this code to file, to tell wordpress that identify this file is template, place this file at root of theme folder.

<?php
/*
Template Name: Login Page
*/
?>

Include other template part such as header, footer, sidebar.

<?php get_header(); ?>
<div id="left">....[place login form]</div>
<?php get_sidebar()?>
<?php get_footer()?>

Login form code:
Next up, paste this code in which is the page title and the actual login form :

<h2><?php the_title(); ?></h2>

<form name="loginform" id="loginform" action="<?php echo get_option('home'); ?>/wp-login.php" method="post">
	<p>
		<label>Username<br />
		<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10" /></label>
	</p>
	<p>

		<label>Password<br />
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" /></label>
	</p>
	<p class="forgetmenot"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" tabindex="90" /> Remember Me</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In" tabindex="100" />
		<input type="hidden" name="redirect_to" value="<?php echo get_option('home'); ?>/wp-admin/" />

		<input type="hidden" name="testcookie" value="1" />
	</p>
</form>

<p id="nav">
<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword" title="Password Lost and Found">Lost your password?</a>
</p>

Registry form

//display message after registry success
<?php $register = $_GET['register']; if($register == true) { echo '<p>Check your email for the password!</p>'; } ?>

<!-- registration form -->
<form method="post" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" class="wp-user-form">
	<input type="text" name="user_login" value="<?php echo esc_attr(stripslashes($user_login)); ?>" size="20" id="user_login" tabindex="101" />
	<input type="text" name="user_email" value="<?php echo esc_attr(stripslashes($user_email)); ?>" size="25" id="user_email" tabindex="102" />
	<?php do_action('register_form'); ?>
	<input type="submit" name="user-submit" value="<?php _e('Sign up!'); ?>" class="user-submit" tabindex="103" />
	<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?register=true" />
	<input type="hidden" name="user-cookie" value="1" />
</form>

Recovery password form

//alert mesage that an email already sent to user email address.
<?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?>
<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form">
	<input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" />
	<input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" />
	
	<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" />
	<input type="hidden" name="user-cookie" value="1" />
</form>

Display user info

– After login into wordpress, you must to show user info.

<div class="sidebox">
		<h3>Welcome, <?php echo $user_identity; ?></h3>
		<div class="usericon">
			<?php global $userdata; get_currentuserinfo(); echo get_avatar($userdata->ID, 100); ?>

		</div>
		<div class="userinfo">
			<p>You&rsquo;re logged in as <strong><?php echo $user_identity; ?></strong></p>
			<p>
				<a href="<?php echo wp_logout_url('index.php'); ?>">Log out</a> | 
				<?php if (current_user_can('manage_options')) { 
					echo '<a href="' . admin_url() . '">' . __('Admin') . '</a>'; } else { 
					echo '<a href="' . admin_url() . 'profile.php">' . __('Profile') . '</a>'; } ?>

			</p>
		</div>
	</div>

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook