• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

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.


Disclosure: This page may contain affiliate links for which we will receive compensation if a purchase is made via the link.

Author:

Oliver Dale is the founder of Kooc Media, a small internet company based in the UK. Kooc Media runs several high-profile websites including WPLift, ThemeFurnace and DesignersTalk.

Leave Yours +

30 Comments

  1. Brian Krogsgard

    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.

      • Brian Krogsgard

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

  2. Ozh

    Next: add rewrite from the regular wp-login.php page to your new login page.

    • Steve Ryan

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

  3. 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?

  4. Abdelhadi Touil

    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.

  5. Anonymous

    Nice post there! can you also tell me how to make a signup page like the one on this site please Thankx!!

  6. DM

    Now this is useful! Now all I need is a tutorial on creating a registration form… any ideas?

  7. Chris

    Nice simple solution, loads of blogs out there modifying CSS which is pretty pointless.

    Thumbs up!

  8. Unihost

    Absolutely awesome, so basic, still effective. Thanks for the code man.

  9. kamaradski

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

  10. Emperor1103

    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?

  11. Lv111

    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!

  12. Wolfeb123

    how would I create a custom register or sign up page based on this?

  13. How about just using an ajax load statement to pull the login form into the current page?

  14. I very much please with this. it works fine with my theme. but how can one use this as the default wordpress login.

  15. Thank you very much Oliver, working like a charm and fully customizable.

  16. Thank so much, I looking this post long time ago… Thank!!! many many thank

  17. Help me! If user wrong password… How can i fix?

  18. Con I use it for Genesis Theme ? Or how to create same thing for genesis child themes..??

  19. Pls can anyone tell me where to open the old template to use to create the new one

  20. It is giving my fail login attempt error, even though my password and user name is correct.

    • 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

  21. Useful post.

    Thank u so much.

    Nguyen

  22. Hi, could this be used to then log into a different CMS system hosted on the same server?

  23. 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?

  24. 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.

  25. Hi

    How do I make the form not display if you are logged in?

  • Comments are Closed

Search

Our Sponsors