Creating a Custom WordPress Registration Form

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

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

We create a PHP function that contains the HTML code of the registration form.

//ragister a custom profiles

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

?>  

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">

    <style>

    .or{

      position: relative;

    }

    .or:before{

      content: '';

      height: 1px;

      background: linear-gradient(to right,silver,silver,rgba(255,255,255,0),rgba(255,255,255,0),silver,silver);

      position: absolute;

      left: 0;

      top: 50%;

      width: 100%;

      z-index: 0;

    }

    </style>      

  <section class="py-4">

    <div class="container">

      <div class="row d-flex align-items-center justify-content-center">

        <div style="max-width:420px;">

          <form action="<?php echo esc_url($_SERVER["REQUEST_URI"]);?>" class="bg-white border py-4 px-5" method="POST" enctype="multipart/form-data">

            <div class="text-center mb-3">

              <!-- <i class="fab fa-bootstrap fa-5x text-secondary mb-2"></i> -->

              <p class="text-muted fw-bold">

                Start Survey for generate code with sign-up.

              </p>

            </div>

            <!-- <div class="mb-3">

              <a class="btn btn-primary d-block bg-gradient" href="#"><i class="fab fa-facebook"></i> Log in</a>

              <p class="my-3 text-center or">

                OR

              </p>

            </div> -->

            <div class="form-floating mb-3">

              <input class="form-control" name="username" placeholder="Username" required="" type="text" value="<?php echo esc_html(isset( $_POST['username'] ) ? $username : null );?>" /><label>Username*</label>

            </div>

            <div class="form-floating mb-3">            

              <input class="form-control" name="password" placeholder="Password" required="" type="password" value="<?php echo esc_html( isset( $_POST['password'] ) ? $password : null );?>"/><label>Password*</label>

            </div>

            <div class="form-floating mb-3">

              <input class="form-control" name="email" placeholder="Email" required="" type="email" value="<?php echo esc_html( isset( $_POST['email']) ? $email : null );?>"/><label>Email*</label>

            </div>

            <div class="form-floating mb-3">

              <input class="form-control" type="text" placeholder="Website" name="website" value="<?php echo esc_html( isset( $_POST['website']) ? $website : null );?>"/><label>Website</label>

            </div>

            <div class="form-floating mb-3">            

              <input class="form-control" placeholder="First Name"  type="text" name="fname" value="<?php echo esc_html( isset( $_POST['fname']) ? $first_name : null );?>" /><label>First Name</label>

            </div>

            <div class="form-floating mb-3">

              <input class="form-control" placeholder="Last Name" type="text" name="lname" value="<?php echo esc_html( isset( $_POST['lname']) ? $last_name : null );?>"/><label>Last Name</label>

            </div>            

            <div class="form-floating mb-3">

              <input class="form-control" placeholder="Nick Name" type="text" name="nickname" value="<?php echo esc_html( isset( $_POST['nickname']) ? $nickname : null );?>"/><label>Nick Name</label>

            </div>

            <div class="form-floating mb-3">

              <textarea class="form-control" placeholder="Nick Name" name="bio"><?php echo esc_html( isset( $_POST['bio']) ? $bio : null );?></textarea> <label>BIO</label>

            </div>

            <div class="mb-2">

              <!-- <input type="submit" name="submit" value="Register"/>  -->

              <button class="btn btn-primary fw-bold w-100 bg-gradient" type="submit" name="submit">Sign Up</button>

            </div>

            <div class="small text-center">

              By signing up, you agree to our Terms , Data Policy and Cookies Policy.

            </div>

          </form>

          <div class="bg-white py-4 px-5 text-center border mt-4">

            <p class="m-0">

              Have an account? <a href="<?php echo get_site_url() . '/wp-login.php';?> ">Log In</a>

            </p>

          </div>

        </div>

      </div>

    </div>

  </section>

<?php

}

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

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

  global $reg_errors;

  $reg_errors = new WP_Error;

  if ( empty( $username ) || empty( $password ) || empty( $email ) ) {

    $reg_errors->add('field', 'Required form field is missing');

  }

  if ( 4 > strlen( $username ) ) {

    $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );

  }

  if ( username_exists( $username ) )

    $reg_errors->add('user_name', 'Sorry, that username already exists!');

  if ( ! validate_username( $username ) ) {

      $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );

  }

  if ( 5 > strlen( $password ) ) {

    $reg_errors->add( 'password', 'Password length must be greater than 5' );

  }

  if ( !is_email( $email ) ) {

    $reg_errors->add( 'email_invalid', 'Email is not valid' );

  }

  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 ) ) {

    echo '<div><section class="py-4"><div class="container"><div class="row d-flex align-items-center justify-content-center"><div style="max-width:420px;"><div class="alert alert-danger" role="alert">';

    foreach ( $reg_errors->get_error_messages() as $error ) {  

        echo '<strong>ERROR</strong>: ';

        echo $error . '<br/>';        

    }    

    echo '</div></div></div></div></section></div>';

  }

}

We are done coding the validation function. 

Next is the plugin complete_registration() function that handles the user registration.

function 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 );

      ?>

      <section class="py-4">

        <div class="container">

          <div class="row d-flex align-items-center justify-content-center">

            <div style="max-width:420px;">

              <div class="alert alert-success" role="alert">

                <?php echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';  ?>

              </div>              

            </div>

          </div>

        </div>

      </section>

      <?php

  }

}

Next, is the super custom_registration_function() function that puts all the functions we've created above into use.

function custom_registration_function() {

  if ( isset($_POST['submit'] ) ) {

      registration_validation(

        $_POST['username'],

        $_POST['password'],

        $_POST['email'],

        $_POST['website'],

        $_POST['fname'],

        $_POST['lname'],

        $_POST['nickname'],

        $_POST['bio']

      );

 

  // sanitize user form input

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

      $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

      complete_registration(

      $username,

      $password,

      $email,

      $website,

      $first_name,

      $last_name,

      $nickname,

      $bio

      );

  }

    //if failed    

    registration_form(

      $username = '',

      $password = '',

      $email = '',

      $website = '',

      $first_name = '',

      $last_name = '',

      $nickname = '',

      $bio = ''

    );

 

}

Below is the shortcode support code.

// Register a new shortcode: [custom_registration]

add_shortcode( 'custom_registration', 'custom_registration_shortcode' );

// The callback function that will replace [book]

function custom_registration_shortcode() {

    ob_start();

    custom_registration_function();

    return ob_get_clean();

}

WordPress site as a result: