I am sure, most web masters using wordpress do not like to let their users to signup or login through the boring wordpress default signup/login screens. Everyone would like to make those pages look like same as part of their website. Today we will have a little play with creating a WordPress custom registration page template.
Ok, now we will move in to our today’s tutorial.
Step1: Create page custom-register.php
First we will create a new php template file called custom-register.php and place it inside your wordpress theme folder your-domain-name/wp-content/themes/your-theme-name
Step2: Naming the Template file
<?php /* Template Name: Custom WordPress Registration */ ?>
Step3: check if the user is not logged in
Like we did for custom login, we must first check whether the current user is logged in or not. We will show the registration form only if the current user is not logged in. Additionally, we need to include the file registration.php from wp-includes folder in order to create a new user inside wordpress system.
<?php require_once(ABSPATH . WPINC . '/registration.php'); global $wpdb, $user_ID; if (!$user_ID) { //All code goes in here. } else { echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>"; }
Step4: Embedding the Register Form and jQuery Ajax
Before we display the register form we need to check whether the user registration is allowed by the administrator using the function get_option(‘users_can_register’).
<?php if(get_option('users_can_register')) { //Check whether user registration is enabled by the administrator ?> <h1><?php the_title(); ?></h1> <div id="result"></div> <!-- To display validation results --> <form id="wp_signup_form" action="" method="post"> <label>Username</label><br /> <input type="text" name="username" class="text" value="" /><br /> <label>Email address</label><br /> <input type="text" name="email" class="text" value="" /> <br /> <br /><br /> <input type="submit" id="submitbtn" name="submit" value="SignUp" /> </form> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script type="text/javascript"> $("#submitbtn").click(function() { $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn(); var input_data = $('#wp_signup_form').serialize(); $.ajax({ type: "POST", url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>", data: input_data, success: function(msg){ $('.loader').remove(); $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow'); } }); return false; }); </script> <?php } else echo "Registration is currently disabled. Please try again later."; ?>
Step5: Validate the inputs and register the user
Add the following php code inside if (!$user_ID) { } and move the register form inside the else part of the following if condition.
if($_POST){ //We shall SQL escape all inputs $username = $wpdb->escape($_REQUEST['username']); if(empty($username)) { echo "User name should not be empty."; exit(); } $email = $wpdb->escape($_REQUEST['email']); if(!preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/", $email)) { echo "Please enter a valid email."; exit(); } $random_password = wp_generate_password( 12, false ); $status = wp_create_user( $username, $random_password, $email ); if ( is_wp_error($status) ) echo "Username already exists. Please try another one."; else { $from = get_option('admin_email'); $headers = 'From: '.$from . "rn"; $subject = "Registration successful"; $msg = "Registration successful.nYour login detailsnUsername: $usernamenPassword: $random_password"; wp_mail( $email, $subject, $msg, $headers ); echo "Please check your email for login details."; } exit(); } else { //Embed the register form and javascript here }
In the above code, we will validate the inputs and then create random password with the use of function wp_generate_password(). With the use of wp_create_user function create a new user account if not the username already exists in the system. Finally, we will email the login details including the random generated password to the signed up user.
Full Code Preview
<?php /* Template Name: Custom WordPress Signup Page */ require_once(ABSPATH . WPINC . '/registration.php'); global $wpdb, $user_ID; //Check whether the user is already logged in if (!$user_ID) { if($_POST){ //We shall SQL escape all inputs $username = $wpdb->escape($_REQUEST['username']); if(empty($username)) { echo "User name should not be empty."; exit(); } $email = $wpdb->escape($_REQUEST['email']); if(!preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$/", $email)) { echo "Please enter a valid email."; exit(); } $random_password = wp_generate_password( 12, false ); $status = wp_create_user( $username, $random_password, $email ); if ( is_wp_error($status) ) echo "Username already exists. Please try another one."; else { $from = get_option('admin_email'); $headers = 'From: '.$from . "rn"; $subject = "Registration successful"; $msg = "Registration successful.nYour login detailsnUsername: $usernamenPassword: $random_password"; wp_mail( $email, $subject, $msg, $headers ); echo "Please check your email for login details."; } exit(); } else { get_header(); ?> <!-- <script src="http://code.jquery.com/jquery-1.4.4.js"></script> --> <!-- Remove the comments if you are not using jQuery already in your theme --> <div id="container"> <div id="content"> <?php if(get_option('users_can_register')) { //Check whether user registration is enabled by the administrator ?> <h1><?php the_title(); ?></h1> <div id="result"></div> <!-- To hold validation results --> <form id="wp_signup_form" action="" method="post"> <label>Username</label><br /> <input type="text" name="username" class="text" value="" /><br /> <label>Email address</label><br /> <input type="text" name="email" class="text" value="" /> <br /> <br /><br /> <input type="submit" id="submitbtn" name="submit" value="SignUp" /> </form> <script type="text/javascript"> $("#submitbtn").click(function() { $('#result').html('<img src="<?php bloginfo('template_url'); ?>/images/loader.gif" class="loader" />').fadeIn(); var input_data = $('#wp_signup_form').serialize(); $.ajax({ type: "POST", url: "<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>", data: input_data, success: function(msg){ $('.loader').remove(); $('<div>').html(msg).appendTo('div#result').hide().fadeIn('slow'); } }); return false; }); </script> <?php } else echo "Registration is currently disabled. Please try again later."; ?> </div> </div> <?php get_footer(); } //end of if($_post) } else { echo "<script type='text/javascript'>window.location='". get_bloginfo('url') ."'</script>"; } ?>
Once the template file is ready, you need to create a new page from the wordpress admin.
This is great and all, but how do you redirect to that page instead of the wp-login page? You could use the ID of the page, but that just seems like a not-so-great idea.
For example, I created a custom login page, but I can’t figure out how the redirect to that page without using the ID of the page that was created through admin.
Nice script! I’ll try to embed this for my one of WP sites ..
Thanks for share this !