Hello Reader,

The below example will help you to create user custom sign-up using AJAX.

Please follow below steps to create WordPress custom sign-up.

1.) copy the below line and paste it to header,php file under section.

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js'></script>

2.) Copy the below code and paste where you want to create sign-up form.

<div class="login-from">
    <form autocomplete="off" method="post" id="signupForm" role="signupForm" novalidate="novalidate">
        <h3>SIGN UP FORM</h3>
        <div class="form-group">
            <label>Your Name</label>
            <input type="text" name="name" class="form-control">
        </div>

        <div class="form-group">
            <label>Your Email ID</label>
            <input type="text" name="user_email" class="form-control">
        </div>

        <div class="form-group">
            <label>Password</label>
            <input type="password" name="user_password" id="user_password" class="form-control">
        </div>

        <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" class="form-control" id="user_repassword" name="user_repassword">
        </div>

        <div class="checkbox form-group">
            <label><input type="checkbox" name="user_terms"><i>I agree to <a href="#">Terms of Service</a> and  <a href="#">Privacy Policy</a></i></label>
        </div>

        <div class="form-group">
            <button class="btn" type="submit">REGISTER</button>
            <label class="error-msg"></label>
        </div>
    </form>
</div>

3.) Copy the below code in header.php under "" section just below the position where you have pasted the script mentioned in step 1.

<script type="text/javascript">
$(document).ready(function($)
{
    // Signup form
    $("#signupForm").validate(
    {
        rules: 
        {           
            name:               {   required:true },
            user_email:         {   required:true, email: true },
            user_password:      {   required:true },
            user_repassword:    {   required:true, equalTo: "#user_password" },
            user_terms:         {   required:true }         
        },
        submitHandler: function(form)
        {
            var form_data = $( "form#signupForm" ).serialize();
            $.ajax(
            {
                type: "POST",
                url: '<?php bloginfo( "template_url" ) ?>/ajax-signup.php',
                data: form_data,
                success: function(responseData) {

                    if( responseData == 1 ) {
                            location.reload();
                    }
                    else {
                            jQuery(".error-msg").html(responseData);
                    }

                }
            });
            return false;
        }
    });
});
</script>

4.) Create a page name ajax-signup.php and copy the below code in ajax-signup.php.

<?php
require_once('../../../wp-config.php');
global $wpdb;

if( isset($_POST) && !empty($_POST) ) {    

    $data = array_map( 'trim',$_POST );
    $fullName = explode(" ", $_POST['name']);
    $last_name = array();
    $i = 0;
    foreach ( $fullName as $name ) :
        if($i==0) :
            $first_name = $name;
        else :
            $last_name[] = $name;

        endif; //endif condition.
        $i++;
    endforeach; // end foreach loop.

    $last_name = implode(" ", $last_name);


    $first_user = mt_rand(7, 7131);
    $last_user     = mt_rand(3, 2648);
    $user_name = $first_user.''.$last_user;

    $user_id = username_exists( $user_name );
     if( empty($user_id) ) {

        $user_email = email_exists( $data['user_email'] ); 
         if( $user_email == false ) { 

                $user_id = wp_create_user( $user_name, $data['user_password'], $data['user_email'] );

                wp_update_user( array( 'ID' => $user_id, 'first_name' => $first_name ) );
                wp_update_user( array( 'ID' => $user_id, 'last_name' => $last_name ) );

                if( !empty($user_id) ) {
                    $user = new WP_User( $user_id );

                    $userRole = get_user_by( 'id', $user_id );

                    $user->set_role( 'author' );

                    wp_new_user_notification( $user_id, $data['user_password'] );
                    $logindata = array();
                    $logindata['user_login']       = $user_name;
                    $logindata['user_password']    = $data['user_password'];
                    $logindata['remember']             = true;
                    $user_verify = wp_signon( $logindata, false ); 
                    if( !is_wp_error( $user_verify ) ) {
                        $message = true;
                        wp_mail( $data['user_email'],'Confirm of registration', 'Welcome! You have registered successfully..' );
                    } else {
                        $message = strip_tags($user_verify->get_error_message());
                    }

                } else {
                    $message = 'Unable to create new user, please try again';
                }

        } else {
            $message = '<b>'.$data['user_email'].'</b> is already exists, please enter another email id.';

        }
    } else {
        $message = '<b>"'.$data['user_name'].'"</b> username already exists, please try another username.';
    }
    echo $message;
}