• Tweet

• Tweet

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 :

The login form code

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

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 :

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.