Create custom wordpress registration page

5 May 2011 by Tags: ,,,

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. You may not forgot my last tutorial about creating a custom wordpress login page template as part of the theme. If you hadn’t read it yet, read it here Custom WordPress Login without using a plugin

Ok, now we will move in to our today’s tutorial.

Wordpress custom registration template

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.

require_once(ABSPATH . WPINC . '/registration.php');
global $wpdb, $user_ID;
if (!$user_ID) {
   //All code goes in here.
}
else {
   wp_redirect( home_url() ); exit;
}

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

<?php the_title(); ?>


<div id="result"></div> <!-- To hold validation results -->
<form action="" method="post">
<label>Username</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email address</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />
</form>

<script type="text/javascript">
//<![CDATA[

$("#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:  "",
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 . "\r\n";
		$subject = "Registration successful";
		$msg = "Registration successful.\nYour login details\nUsername: $username\nPassword: $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 . "\r\n";
		                $subject = "Registration successful";
		                $msg = "Registration successful.\nYour login details\nUsername: $username\nPassword: $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 ?>

<?php the_title(); ?>


<div id="result"></div> <!-- To hold validation results -->
<form action="" method="post">
<label>Username</label>
<input type="text" name="username" class="text" value="" /><br />
<label>Email address</label>
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />
</form>

<script type="text/javascript">
//<![CDATA[

$("#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:  "",
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 {
	wp_redirect( home_url() ); exit;
}
?>

Once the template file is ready, you need to create a new page from the wordpress admin. If you are unsure about this just follow the step number 10 from my previous tutorial Custom WordPress Login without using a plugin. Hope you find this tutorial useful.

2,636 Downloads