Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create custom user signup using AJAX in WordPress

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 212
    Comment on it

    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;
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: