Blog

Uncategorized Ajax based registration in wordpress

In WordPress customization,  Custom registration with WordPress is very important part custom theme creation. in my previous post how to create login form for custom theme. So now custom registration is next part of custom theme creation.

By default WordPress provide basic registration form that is exist on core WordPress  admin login page. In custom theme  some time you need to better registration form with some extra fields as per your  theme requirement.

In this post i cover whole registration process like (1) create registration form and (2) create user by WordPress function wp_insert_user function (3) show extra fields in your theme profile page.

you create whole system in just three steps.

First we have to create registration  form in html.

 

<div id="contentRegister" >
   <div class="message"></div>
	<form id="ajaxRegisterForm" method="post" action="#" >
			<div class="formInputClass1">
				<input type="first_name" id="first_name" name="first_name" value="" placeholder="First Name" >
			</div>			
			<div class="formInputClass">
				<input type="last_name" id="last_name" name="last_name" value="" placeholder="Last Name" >
			</div>			
			<div class="formInputClass">
				<input type="user_login" id="user_login" name="user_login" value="" placeholder="User Name" >
			</div>
			<div class="formInputClass">
				<input type="user_email" id="user_email" name="user_email" value="" placeholder="Email" >
			</div>			
			<div class="formInputClass">
				<input type="password" id="password" name="password" value="" placeholder="Password" >
			</div>			
			<div class="formInputClass">
				<input type="password" id="confirm_password" name="confirm_password" value="" placeholder="Confirm Password" >
			</div>			

			<div class="formSubmitClass">
				<input type="submit" id="submit" value="Submit" >
			</div>			
 
	</form>		
</div>

Use jQuery to bind the submit button to handled the ajax for registartion.You can use this jQuery function header , footer or page where your registration form exist.

jQuery(document).ready(function($) {

   $('#ajaxRegisterForm').on('submit',function(){
		var postData= $(this).serialize();
		 $.ajax({
				type: 'POST',
				url:"<?php echo admin_url('admin-ajax.php'); ?>",
				data: { 
					'action': 'custom_register_user_ajax', 
					 'post':postData
					},
					beforeSend:function(){
					$('.message').html('Please wait...');
					},
				success: function(data){
					var result= $.parseJSON(data);
					console.log(result);
					
					if(result.status=="fail")
					{
						
						$('.message').html('<div class="error">'+result.error+'<div>'); 
						
					}
					else
					{
						$('.message').html('<div class="success">'+result.success+'</div>'); 
						
					}
				   
				}
			});
		return false;
		
	});

});

 

Now we bind the Registration form with  j query and we moved to functions.php where we validate the user input and validate user name and email .If user no error found then we move for further action where we insert user in to WordPress database.

add_action( 'wp_ajax_custom_register_user_ajax', 'custom_register_user_ajax' );
add_action( 'wp_ajax_nopriv_custom_register_user_ajax', 'custom_register_user_ajax' );

function custom_register_user_ajax( ) {
		$errors=array();
		parse_str($_POST['post'],$post);
		$user_login=$post['user_login'];
		$first_name=$post['first_name'];
		$last_name=$post['last_name'];
		$user_email=$post['user_email'];
		$user_password=$post['password'];
		$user_confirm=$post['confirm_password'];


   $sanitized_user_login = sanitize_user( $user_login );

if (!get_option( 'users_can_register' )){
$errors['error']='ERROR: User registration is currently not allowed.'; 
}
else if ( $first_name == '' ) {
 $errors['error']= 'ERROR: Please enter your first name.';
} 
else if ( $last_name == '' ) {
 $errors['error']= 'ERROR: Please enter your last name.';
} 
 else if ( $user_login == '' ) {
 $errors['error']= 'ERROR: Please choose a username.';
} 
       else if (username_exists( $user_login ))
     {
      $errors['error']=  "Username In Use!";   
    }
/* Check the email address */
else if ( $user_email == '' ) {
 $errors['error']= 'ERROR: Please type your e-mail address.';
} 
else if ( ! is_email( $user_email ) ) {
$errors['error']= 'ERROR: The email address isn&#8217;t correct.';
$user_email = '';
} else if ( email_exists( $user_email ) ) {
 $errors['error']='ERROR: This email is already registered, please choose 
another one.';
}
else if($post['password']!=$post['confirm_password'])
{
 $errors['error']='ERROR: Password does not match.';
}

 if(!empty($errors))
{

$errors['status']='fail';

echo  json_encode($errors);
}
else
{

$user_pass = md5( $user_password);
$userdata = array(
    'user_login'  =>  $sanitized_user_login,
    'user_email'    =>  $user_email,
    'user_pass'   => $user_password,  
);

    $user_id = wp_insert_user( $userdata ) ;
  if($user_id)
  {
        $user = new WP_User( $user_id );
      update_user_meta($user_id ,'first_name',$first_name);
      update_user_meta($user_id ,'last_name',$last_name);
     

unset( $user );
  }
wp_new_user_notification( $user_id, $user_password );
echo  json_encode(array('success'=>'You successfully 
registerd!','user_id'=>$user_id,'status'=>'success'));

}

die;
 }

 

Now your registration system is ready to use.

Author Details