How to create a really simple custom

WordPress login page and sign up page

without plugins
Posted on January 25, 2013 by Jack
There are many different ways of customising the WordPress login
page and process. However, many of these methods are overengineered or are so stylised or complicated that they are difficult to
shoehorn into the project that you might be working on.
Im writing this post in an effort to be super-simple, and provide the
most basic of tools needed to create a custom WordPress login page
and sign up page.
The key WordPress functions that this tutorial is centred on are:
1. wp_signon Authenticates a user with option to remember
credentials.
2. wp_create_user This function allows you to insert a new user
into the WordPress database.
Note: This tutorial contains no information on styling your login
page. Im presuming you already have a style or design in mind.
Step 1 Create a new template page called login.php

Very basically, this is what you need to process your form:

1 <?php
2 /*

3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6

Template Name: Login

*/
if($_POST) {
global $wpdb;
//We shall SQL escape all inputs
$username = $wpdb->escape($_REQUEST['username']);
$password = $wpdb->escape($_REQUEST['password']);
$remember = $wpdb->escape($_REQUEST['rememberme']);
if($remember) $remember = "true";
else $remember = "false";
$login_data = array();
$login_data['user_login'] = $username;
$login_data['user_password'] = $password;
$login_data['remember'] = $remember;
$user_verify = wp_signon( $login_data, false );
if ( is_wp_error($user_verify) )
{
header("Location: " . home_url() . "/login/error/");
// Note, I have created a page called "Error" that is a child of the login page to handle errors.
This can be anything, but it seemed a good way to me to handle errors.
} else {
echo "<script type='text/javascript'>window.location='". home_url() ."'</script>";
exit();
}
} else {
// No login details entered - you should probably add some more user feedback here, but this
does the bare minimum
echo "Invalid login details";
}

3
7
3
8
3
9
4
0

And very basically, this is all your login form needs to be:

1 <form id="login" name="form" action="<?php echo home_url(); ?>/login/" method="post">

2
<input id="username" type="text" placeholder="Username" name="username">
3
<input id="password" type="password" placeholder="Password" name="password">
4
<input id="submit" type="submit" name="submit" value="Submit">
5 </form>

Once youve created the template, create a new page that uses the
Login template and for the purposes of this tutorial, name it
Login. You can call it whatever your like, but note that this tutorial
has hard-coded references to the pages URL being:
yourwebsite.com/login/
So you need to make sure that your pages permalink matches this,
or change the URLs in the code to match whatever URL your new
Login page has.
Step 2 Done if you visit your new login page, it should successfully log you in.
Now, lets tidy things up a bit.

So, its likely that youre going to want to redirect anyone trying to
use the standard WordPress login pages to your new, custom login
page. Easy peasy, shove this in your themes functions.php file:

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3

// Login redirects
function custom_login() {
echo header("Location: " . get_bloginfo( 'url' ) . "/login");
}
add_action('login_head', 'custom_login');
function login_link_url( $url ) {
$url = get_bloginfo( 'url' ) . "/login";
return $url;
}
add_filter( 'login_url', 'login_link_url', 10, 2 );

Step 3 Now, we do something very similar for the sign up page create
register.php

This code also contains some very basic validation, that creates an
array of the errors. You can use these however you like, or just get
rid of them for testing purposes.

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2

<?php
/*
Template Name: Register
*/
require_once(ABSPATH . WPINC . '/registration.php');
global $wpdb, $user_ID;
//Check whether the user is already logged in
if ($user_ID) {
// They're already logged in, so we bounce them back to the homepage.
header( 'Location:' . home_url() );
} else {

1
3
$errors = array();
1
4
if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
1
5
// Check username is present and not already in use
1
$username = $wpdb->escape($_REQUEST['username']);
6
if ( strpos($username, ' ') !== false ) {
1
$errors['username'] = "Sorry, no spaces allowed in usernames";
7
}
1
if(empty($username)) {
8
$errors['username'] = "Please enter a username";
1
} elseif( username_exists( $username ) ) {
9
$errors['username'] = "Username already exists, please try another";
2
}
0
2
// Check email address is present and valid
1
$email = $wpdb->escape($_REQUEST['email']);
2
if( !is_email( $email ) ) {
2
$errors['email'] = "Please enter a valid email";
2
} elseif( email_exists( $email ) ) {
3
$errors['email'] = "This email address is already in use";
2
}
4
2
// Check password is valid
5
if(0 === preg_match("/.{6,}/", $_POST['password'])){
2
$errors['password'] = "Password must be at least six characters";
6
}
2
7
// Check password confirmation_matches
2
if(0 !== strcmp($_POST['password'], $_POST['password_confirmation'])){
8
$errors['password_confirmation'] = "Passwords do not match";
2
}
9
3
// Check terms of service is agreed to
0
if($_POST['terms'] != "Yes"){
3
$errors['terms'] = "You must agree to Terms of Service";
1
}
3
2
if(0 === count($errors)) {
3
3
$password = $_POST['password'];
3
4
$new_user_id = wp_create_user( $username, $password, $email );
3
5
// You could do all manner of other things here like send an email to the user, etc. I leave
3 that to you.
6
3
$success = 1;
7
3
header( 'Location:' . get_bloginfo('url') . '/login/?success=1&u=' . $username );
8
3
}
9
4
}
0 }
4
1
4
2
4

3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0

Further down the register.php template, your sign up form should

look something like this:

1
2
3
4
5 <form id="wp_signup_form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
6
7
<label for="username">Username</label>
8
<input type="text" name="username" id="username">
9
<label for="email">Email address</label>
1
<input type="text" name="email" id="email">
0
<label for="password">Password</label>
1
<input type="password" name="password" id="password">
1
<label for="password_confirmation">Confirm Password</label>
1
<input type="password" name="password_confirmation" id="password_confirmation">
2
1
<input name="terms" id="terms" type="checkbox" value="Yes">
3
<label for="terms">I agree to the Terms of Service</label>
1
4
<input type="submit" id="submitbtn" name="submit" value="Sign Up" />
1
5 </form>
1
6
1
7

Then, in WordPress, you create your page called Register and you
choose this template for it. And once again, we add some redirects
to our functions.php file to completely hide the standard WordPress
register page:

1 function register_link_url( $url ) {

2
if ( ! is_user_logged_in() ) {
3
if ( get_option('users_can_register') )
4
$url = '<li><a href="' . get_bloginfo( 'url' ) . "/register" . '">' . __('Register') . '</a></li>';
5
else
6
$url = '';
7
} else {
8
$url = '<li><a href="' . admin_url() . '">' . __('Site Admin') . '</a></li>';
9
}

1
0
1
1 return $url;
1 }
2 add_filter( 'register', 'register_link_url', 10, 2 );
1
3

Again, our register script is assuming that the register page is found
at: yourwebsite.com/register/
You now have login and sign up pages ready to be customised in
whichever way you want.
Step 4 Take a step back, and observe the wonder that you have created

No more bogstandard WordPress login and register pages for your

website. This implementation can be further developed with custom
logout links and a proper method for dealing with forgotten
passwords. Ill get some guidance on how you do that up on here
soon.