How To: 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 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]<?php
/*
Template Name: Login Page
*/
?>[/php]

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]
<?php get_header(); ?>

<div id="left">
<div id="archive">
[/php]

The login form code

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

[php]
<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>
[/php]

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 :

[php]
</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

The Complete Code :

[php]
<?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(); ?>
[/php]

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.

Other interesting posts on WPLift

Oli

Oli

Oliver Dale is the founder of Kooc Media, An Internet Company based in Manchester, UK. I founded WPLift and ThemeFurnace, find out more on my Personal Blog. Thanks!

30 thoughts on “How To: Create a Custom Login Page for your WordPress Theme

    • Hi Brian, yeah dropping in that function would replace the main chunk of code I listed,
      I have just always put the html by hand for greater customisation of the form.

      • Ah, yeah. True enough. I’ll need to keep this in mind if I ever need to customize login. Good point : )

    • Ozh… Wondering if the Plugin Dev book book tells you how to do that exactly? Or is the rewrite accomplished server-side?

  1. Thanks very much for this very helpful tutorial. Please, can you write a tutorial about custom lost password page? I didn’t find any such tutorial.
    Thanks again.

  2. Is there a way i can code my own credentials validation too ? instead of utilizing the original login.php ?

  3. How can I redirect the /wp-login.php to a page created through your template which requires the user to be logged in to access doens’t it?

  4. hi, great tutorial, but looks a bit unfinished. all login/logout links still lead to the native WP login page, login link in adminbar could lead to our new page…
    Am I correct that none of the plugins that needs wp-login will work with our new page?

    thanks!

    • Sorry, I had a function left orphan from older attempts of creating login page, in my funtion.php. Thats was creating error. After removing Its working fine now. Thanks

  5. Hi, I am just wondering and wanted to ask this question. I am trying your code locally before I try it on live site but the problem is that if the password is incorrect it goes back to wp-login.php.

    Any ideas?

  6. It is simple yet the idea from Oliver’s post is about creating a customized login page which you can customized and still use your sidebar and other widgets.

Comments are closed.