Creating a Custom WordPress Registration Form Plugin

In this article, we will be building a custom registration form plugin for the following form fields:

username, password, email, website URL, first name, last name, nickname, biography (or an about section)

With that said, let’s get started with the coding of the plugin. First, include the plugin header.

<?php
/*
Plugin Name: Custom Registration
Plugin URI: https://wbcomdesigns.com/
Description: Creating a Custom WordPress Registration Form Plugin
Version: 1.0
Author: Wbcom Designs
Author URI: https://wbcomdesigns.com/
*/

Next, we create a PHP function that contains the HTML code of the registration form.

function wbcom_registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
 echo '
 <style>
 div {
 margin-bottom:2px;
 }
 
 input{
 margin-bottom:4px;
 }
 </style>
 ';

echo '
 <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
 <div>
 <label for="username">Username <strong>*</strong></label>
 <input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
 </div>
 
 <div>
 <label for="password">Password <strong>*</strong></label>
 <input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
 </div>
 
 <div>
 <label for="email">Email <strong>*</strong></label>
 <input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
 </div>
 
 <div>
 <label for="website">Website</label>
 <input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">
 </div>
 
 <div>
 <label for="firstname">First Name</label>
 <input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
 </div>
 
 <div>
 <label for="website">Last Name</label>
 <input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
 </div>
 
 <div>
 <label for="nickname">Nickname</label>
 <input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">
 </div>
 
 <div>
 <label for="bio">About / Bio</label>
 <textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>
 </div>
 <input type="submit" name="submit" value="Register"/>
 </form>
 ';
}

Notice the registration field being passed to the above function as variable? In the function code, you will see instances of the following code, for example:

( isset( $_POST[‘lname’] ) ? $last_name : null )

The ternary operator is checking the contents of the global $_POST array to see if the form contains a value. If it does contain a value, it populates the form fields with the value in order to save the user from re-entering the field input.

A registration form is never complete until you validate and sanitize the user input. As a result, we will create a validation function with name wbcom_registration_validation.

To ease the validation pain, we will be using WordPress WP_Error class. Follow me as we code the validation function:

Next, we create a PHP function that validate form fields wbcom_registration_validation.

function wbcom_registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {

global $reg_errors;
 $reg_errors = new WP_Error;

/**
 * Check empty fields
 */
 if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
 $reg_errors->add('field', 'Required form field is missing');
 }

/**
 * Check user name lenght greater than 4 character.
 */
 if ( 4 > strlen( $username ) ) {
 $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
 }

/**
 * Check user name is exists
 */
 if ( username_exists( $username ) ){
 $reg_errors->add('user_name', 'Sorry, that username already exists!');
 }

/**
 * validate wp user name
 */
 if ( ! validate_username( $username ) ) {
 $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
 }

/**
 * check password lengh 
 */
 if ( 5 > strlen( $password ) ) {
 $reg_errors->add( 'password', 'Password length must be greater than 5' );
 }

/**
 * check email is correct email
 */
 if ( !is_email( $email ) ) {
 $reg_errors->add( 'email_invalid', 'Email is not valid' );
 }

/**
 * check email already in use or not
 */
 if ( email_exists( $email ) ) {
 $reg_errors->add( 'email', 'Email Already in use' );
 }

if ( ! empty( $website ) ) {
 if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
 $reg_errors->add( 'website', 'Website is not a valid URL' );
 }
 }

if ( is_wp_error( $reg_errors ) ) {
 foreach ( $reg_errors->get_error_messages() as $error ) {
 echo '<div>';
 echo '<strong>ERROR</strong>:';
 echo $error . '<br/>';
 echo '</div>'; 
 }
 }
}

Next is the plugin wbcom_complete_registration() function that handles the user registration.
The user registration is actually done by the wp_insert_user function which accepts an array of user data.

function wbcom_complete_registration() {
 global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
 if ( 1 > count( $reg_errors->get_error_messages() ) ) {
 $userdata = array(
 'user_login' => $username,
 'user_email' => $email,
 'user_pass' => $password,
 'user_url' => $website,
 'first_name' => $first_name,
 'last_name' => $last_name,
 'nickname' => $nickname,
 'description' => $bio,
 );
 $user = wp_insert_user( $userdata );
 echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.'; 
 }
}

In the wbcom_complete_registration() function above, we made the $reg_errors WP_Error instance and the form fields variable global so we can access the variable in the global scope.

We then check if the $reg_errors error handling instance contains any error. If no error is found, we proceed to populating the $userdata array and insert the user registration details to WordPress database and display a Registration Complete message with a link to the login page.

 

Up next, is the super custom_registration_function() function that puts all the functions we’ve created above into use.

function custom_registration_function() {

global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;

if ( isset($_POST['submit'] ) ) {
 wbcom_registration_validation(
 $_POST['username'],
 $_POST['password'],
 $_POST['email'],
 $_POST['website'],
 $_POST['fname'],
 $_POST['lname'],
 $_POST['nickname'],
 $_POST['bio']
 );
 
 // sanitize user form input
 
 $username = sanitize_user( $_POST['username'] );
 $password = esc_attr( $_POST['password'] );
 $email = sanitize_email( $_POST['email'] );
 $website = esc_url( $_POST['website'] );
 $first_name = sanitize_text_field( $_POST['fname'] );
 $last_name = sanitize_text_field( $_POST['lname'] );
 $nickname = sanitize_text_field( $_POST['nickname'] );
 $bio = esc_textarea( $_POST['bio'] );
 
 // call @function complete_registration to create the user
 // only when no WP_error is found
 wbcom_complete_registration(
 $username,
 $password,
 $email,
 $website,
 $first_name,
 $last_name,
 $nickname,
 $bio
 );
 }
 
 wbcom_registration_form(
 $username,
 $password,
 $email,
 $website,
 $first_name,
 $last_name,
 $nickname,
 $bio
 );
}

Let me explain what the code in the custom_registration_function() function.

First, we determine if the form has been submitted by checking if the $_POST[‘submit’] is set. If the form has been submitted, we call the wbcom_registration_validation function to validate the user submitted form.

We then sanitize the form data and set the sanitize data to a variable named after the form field. Finally, we call the wbcom_omplete_registration to register the user.

We need to call the wbcom_registration_form function to display the registration form.

 

Remember I mentioned that we are going to be providing shortcode support for the registration plugin? Below is the shortcode support code.

add_shortcode( 'wbcom_custom_registration', 'wbcom_custom_registration_shortcode' );
 
// The callback function that will replace [book]
function wbcom_custom_registration_shortcode() {
 ob_start();
 custom_registration_function();
 return ob_get_clean();
}

At this point, we are done coding the plugin. Below is an image showing how the registration form look like.

Note that you might not get the exact same look on your WordPress site as a result of vary CSS styling.

 

Plugin Usage

To implement the plugin in a WordPress post or page, use the shortcode [wbcom_custom_registration].

 

 

 

Welcome to Wbcom Designs!  - Get 10% off on all plugins & themes
Coupon : HELLO10