How to Create a Custom Login Page for your WordPress Theme
f your site requires people to login and you’d like them to do it via your theme rather than the default WordPress login screen ( wp-login.php ) you can create a custom login page using a page template. In this tutorial I will walk you though how to create one.
Create the Page Template
Create a new file and name it “page-login.php” and add this code to the top of it, this identifies it to WordPress as a page template
<?php
/*
Template Name: Login Page
*/
?>
Add your header and open Divs
You will need to add in your WordPress header tag and any divs you use in your layout, these are what I use on WPLift :
<?php get_header(); ?>
<div id=”left”>
<div id=”archive”>
The 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>
Sidebar & Footer tags and closing Divs
I need to close the two divs I opened before, then I add in the tags for my sidebar and footer to appear :
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The Complete Code :
Now you have the complete code, upload it to your theme directory and in your WordPress admin go to “Pages” > “Add New”. Name the page what you like and from thepage attributes on the right, choose “Login Page” from the Template dropdown :
<?php
/*
Template Name: Login Page
*/
?>
<?php get_header(); ?>
<div id=”left”>
<div id=”archive”>
<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>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Originally posted 2012-04-01 15:56:03.