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.
Post Tags
31 Comments
Hey Oli,
Is there is a reason you prefer this method over the native wp_login_form() function?
http://codex.wordpress.org/Function_Reference/wp_login_form
You could use that within your page template and save some trouble, unless I’m missing a benefit of doing it manually.
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 : )
Next: add rewrite from the regular wp-login.php page to your new login page.
Ozh… Wondering if the Plugin Dev book book tells you how to do that exactly? Or is the rewrite accomplished server-side?
What happens to the /wp-login.php link? Do you keep it up there, htaccess 301 it to your new login page or do something else?
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.
Nice post there! can you also tell me how to make a signup page like the one on this site please Thankx!!
Now this is useful! Now all I need is a tutorial on creating a registration form… any ideas?
Nice simple solution, loads of blogs out there modifying CSS which is pretty pointless.
Thumbs up!
Absolutely awesome, so basic, still effective. Thanks for the code man.
Is there a way i can code my own credentials validation too ? instead of utilizing the original login.php ?
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?
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!
how would I create a custom register or sign up page based on this?
How about just using an ajax load statement to pull the login form into the current page?
Thanks for this.
I very much please with this. it works fine with my theme. but how can one use this as the default wordpress login.
Thank you very much Oliver, working like a charm and fully customizable.
Thank so much, I looking this post long time ago… Thank!!! many many thank
Help me! If user wrong password… How can i fix?
Con I use it for Genesis Theme ? Or how to create same thing for genesis child themes..??
Pls can anyone tell me where to open the old template to use to create the new one
thanks, good article
This looks great, could you tell me if you have done a tutorial on how to do the code for new customers and the database/table information.
I need to create a new customer php page first then I can create a log in. Any help would be appreciated
Thank you
Leave a Reply