How to create a really simple custom WordPress login page and sign up page without pluginsPosted on January 25, 2013 by JackThere are many different ways of customising the WordPress login page and process. However, many of these methods are over-engineered or are so stylised or complicated that they are difficult to shoehorn into the project that you might be working on.

I’m 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. I’m 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:

12

<?php/*

3456789101112131415161718192021222324252627282930313233343536

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";

}

37383940

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

12345

<form id="login" name="form" action="<?php echo home_url(); ?>/login/" method="post">        <input id="username" type="text" placeholder="Username" name="username">        <input id="password" type="password" placeholder="Password" name="password">        <input id="submit" type="submit" name="submit" value="Submit"></form>

Once you’ve 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 page’s URL being: yourwebsite.com/login/

So you need to make sure that your page’s 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, let’s tidy things up a bit.

So, it’s likely that you’re 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 theme’s functions.php file:

12345678910111213

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

123456789101112

<?php/*Template Name: Register*/

require_once(ABSPATH . WPINC . '/registration.php');global $wpdb, $user_ID;//Check whether the user is already logged inif ($user_ID) {

    // They're already logged in, so we bounce them back to the homepage.

    header( 'Location:' . home_url() );

1314151617181920212223242526272829303132333435363738394041424

} else {

    $errors = array();

    if( $_SERVER['REQUEST_METHOD'] == 'POST' ) {

        // Check username is present and not already in use        $username = $wpdb->escape($_REQUEST['username']);        if ( strpos($username, ' ') !== false ) {            $errors['username'] = "Sorry, no spaces allowed in usernames";        }        if(empty($username)) {            $errors['username'] = "Please enter a username";        } elseif( username_exists( $username ) ) {            $errors['username'] = "Username already exists, please try another";        }

        // Check email address is present and valid        $email = $wpdb->escape($_REQUEST['email']);        if( !is_email( $email ) ) {            $errors['email'] = "Please enter a valid email";        } elseif( email_exists( $email ) ) {            $errors['email'] = "This email address is already in use";        }

        // Check password is valid        if(0 === preg_match("/.{6,}/", $_POST['password'])){          $errors['password'] = "Password must be at least six characters";        }

        // Check password confirmation_matches        if(0 !== strcmp($_POST['password'], $_POST['password_confirmation'])){          $errors['password_confirmation'] = "Passwords do not match";        }

        // Check terms of service is agreed to        if($_POST['terms'] != "Yes"){            $errors['terms'] = "You must agree to Terms of Service";        }

        if(0 === count($errors)) {

            $password = $_POST['password'];

            $new_user_id = wp_create_user( $username, $password, $email );

            // You could do all manner of other things here like send an email to the user, etc. I leave that to you.

            $success = 1;

            header( 'Location:' . get_bloginfo('url') . '/login/?success=1&u=' . $username );

        }

    }}

3444546474849505152535455565758596061626364656667686970

Further down the register.php template, your sign up form should look something like this:

1234567891011121314151617

<form id="wp_signup_form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">

        <label for="username">Username</label>        <input type="text" name="username" id="username">        <label for="email">Email address</label>        <input type="text" name="email" id="email">        <label for="password">Password</label>        <input type="password" name="password" id="password">        <label for="password_confirmation">Confirm Password</label>        <input type="password" name="password_confirmation" id="password_confirmation">

        <input name="terms" id="terms" type="checkbox" value="Yes">        <label for="terms">I agree to the Terms of Service</label>

        <input type="submit" id="submitbtn" name="submit" value="Sign Up" />

</form>

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:

123456789

function register_link_url( $url ) {      if ( ! is_user_logged_in() ) {        if ( get_option('users_can_register') )            $url = '<li><a href="' . get_bloginfo( 'url' ) . "/register" . '">' . __('Register') . '</a></li>';        else            $url = '';    } else {        $url = '<li><a href="' . admin_url() . '">' . __('Site Admin') . '</a></li>';    }

10111213

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

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. I’ll get some guidance on how you do that up on here soon.