If 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 :
<?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(); ?>
Creating the Page
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 :
Publish the page and your login page is now live. Logout and visit the page from your site and try logging in via it to make sure it works ok.
16