How To Make a Custom WordPress Registration Page

WordPress has its own powerful default registration page, and there are plenty of plugins in WordPress repository that allow you to customize the WordPress default registration page.

But that’s not enough for a web developer, as the interface of a registration page must look same as other pages and include header and footer of existing site. So that the design of our registration/login page should match other pages of our site.

In this tutorial we’ll learn, how to make a custom registration page.

1. Build an HTML registration form

Our example contains the following fields

• First Name
• Last Name
• Email
• Username
• Password
• Password again

<form method="post">
<h3>Don't have an account?<br/> Create a new one.</h3>
<p><label>First Name</label></p>
<p><input type="text" value="" name="first_name" id="first_name" /></p>
<p><label>Last Name</label></p>
<p><input type="text" value="" name="last_name" id="last_name" /></p>
<p><label>Email</label></p>
<p><input type="text" value="" name="email" id="email" /></p>
<p><label>Username</label></p>
<p><input type="text" value="" name="username" id="username" /></p>
<p><label>Password</label></p>
<p><input type="password" value="" name="pwd1" id="pwd1" /></p>
<p><label>Password again</label></p>
<p><input type="password" value="" name="pwd2" id="pwd2" /></p>
<div class="alignleft"><p><?php if($sucess != "") { echo $sucess; } ?> <?php if($err != "") { echo $err; } ?></p></div>
<button type="submit" name="btnregister" class="button" >Submit</button>
<input type="hidden" name="task" value="register" />
</form>

We’ve added one hidden field to validate if the submitted form is for registration.

2. Write some php code to accept data from our html form

<?php
$err = '';
$success = '';
global $wpdb, $PasswordHash, $current_user, $user_ID;
if(isset($_POST['task']) && $_POST['task'] == 'register' ) {
$pwd1 = $wpdb->escape(trim($_POST['pwd1']));
$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
$first_name = $wpdb->escape(trim($_POST['first_name']));
$last_name = $wpdb->escape(trim($_POST['last_name']));
$email = $wpdb->escape(trim($_POST['email']));
$username = $wpdb->escape(trim($_POST['username']));
if( $email == "" || $pwd1 == "" || $pwd2 == "" || $username == "" || $first_name == "" || $last_name == "") {
$err = 'Please don't leave the required fields.';
} else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$err = 'Invalid email address.';
} else if(email_exists($email) ) {
$err = 'Email already exist.';
} else if($pwd1 <> $pwd2 ){
$err = 'Password do not match.';
} else {
$user_id = wp_insert_user( array ('first_name' => apply_filters('pre_user_first_name', $first_name), 'last_name' => apply_filters('pre_user_last_name', $last_name), 'user_pass' => apply_filters('pre_user_user_pass', $pwd1), 'user_login' => apply_filters('pre_user_user_login', $username), 'user_email' => apply_filters('pre_user_user_email', $email), 'role' => 'subscriber' ) );
if( is_wp_error($user_id) ) {
$err = 'Error on user creation.';
} else {
do_action('user_register', $user_id);
$success = 'You're successfully register';
}
}
}
?>

 

Understanding the code:

$wpdb & $user_ID are the global variables.
email_exists function used to look if the user’s email address already exist.
wp_insert_user() function to insert a user into the database, this function inserts a new user in database.
is_wp_error() function Checks whether the passed variable is a WordPress Error.
apply_filters Calls filters for most of the userdata fields with the prefix ‘pre_user’.
do_action Calls ‘user_register’ hook and creating a new user.

3. Making a page template for our beautiful registration page.

To make a page template the first thing that is required, is to include header and footer.

<?php
/*
* Template name: registration page
*
*/
get_header()
//
//
get_footer()
?>

Here’s the full code:

<?php
/*** Template name: registration page
*/
get_header();
?>
<style>
.wrap {
width: 300px;
margin: 30px auto;
}
</style>
<div class="wrap">
<?php
$err = '';
$success = '';
global $wpdb, $PasswordHash, $current_user, $user_ID;
if (isset($_POST['task']) && $_POST['task'] == 'register') {
$pwd1 = $wpdb->escape(trim($_POST['pwd1']));
$pwd2 = $wpdb->escape(trim($_POST['pwd2']));
$first_name = $wpdb->escape(trim($_POST['first_name']));
$last_name = $wpdb->escape(trim($_POST['last_name']));
$email = $wpdb->escape(trim($_POST['email']));
$username = $wpdb->escape(trim($_POST['username']));
if ($email == "" || $pwd1 == "" || $pwd2 == "" || $username == "" || $first_name == "" || $last_name == "") {
$err = 'Please don't leave the required fields.';
} else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$err = 'Invalid email address.';
} else if (email_exists($email)) {
$err = 'Email already exist.';
} else if ($pwd1 <> $pwd2) {
$err = 'Password do not match.';
} else {
$user_id = wp_insert_user(array(
'first_name' => apply_filters('pre_user_first_name', $first_name),
'last_name' => apply_filters('pre_user_last_name', $last_name),
'user_pass' => apply_filters('pre_user_user_pass', $pwd1),
'user_login' => apply_filters('pre_user_user_login', $username),
'user_email' => apply_filters('pre_user_user_email', $email),
'role' => 'subscriber'
));
if (is_wp_error($user_id)) {
$err = 'Error on user creation.';
} else {
do_action('user_register', $user_id);
$success = 'You're successfully register';
}
}
}
?>
<!--display error/success message-->
<div id="message">
<?php
if (!empty($err)):
echo '<p class="error">' . $err . '</p>';
endif;
?>
<?php
if (!empty($success)):
echo '<p class="error">' . $success . '</p>';
endif;
?>
</div>
<form method="post">
<h3>Don't have an account?<br/> Create a new one.</h3>
<p><label>First Name</label></p>
<p><input type="text" value="" name="first_name" id="first_name" /></p>
<p><label>Last Name</label></p>
<p><input type="text" value="" name="last_name" id="last_name" /></p>
<p><label>Email</label></p>
<p><input type="text" value="" name="email" id="email" /></p>
<p><label>Username</label></p>
<p><input type="text" value="" name="username" id="username" /></p>
<p><label>Password</label></p>
<p><input type="password" value="" name="pwd1" id="pwd1" /></p>
<p><label>Password again</label></p>
<p><input type="password" value="" name="pwd2" id="pwd2" /></p>
<div class="alignleft"><p><?php
if ($sucess != "") {
echo $sucess;
}
?> <?php
if ($err != "") {
echo $err;
}
?></p></div>
<button type="submit" name="btnregister" class="button" >Submit</button>
<input type="hidden" name="task" value="register" />
</form>
</div>
<?php
get_footer();
?>

 

Plugin Option: Theme My Login

Some time people may not feel ready to code their own custom registration page. For those not ready to code a registration page themselves, one of the most convenient plugins in the WordPress repository is the free Theme My Login WordPress Plugin. It automatically creates a new registration/login page that matches the existing design of your site. To use the plugin simply install and activate it like any other plugin, and then use it to create your new registration/login page.

Conclusion

That’s it, you are now ready with a new registration/login page. Happy coding, If you have any questions or anything to add to the post just comment below.