Skip to content

Instantly share code, notes, and snippets.

@Aziz-Rahman
Last active September 17, 2020 21:11
Show Gist options
  • Save Aziz-Rahman/75c412f82a489cad03a3 to your computer and use it in GitHub Desktop.
Save Aziz-Rahman/75c412f82a489cad03a3 to your computer and use it in GitHub Desktop.
Register user with ajax (WP)
jQuery(document).ready(function($) {
/**
* When user clicks on button...
*
*/
$('#btn-new-user').on("click",function() {
/**
* Prevent default action, so when user clicks button he doesn't navigate away from page
*
*/
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
// If for some reason result field is visible hide it
$('.result-message').hide();
// Collect data from inputs
var reg_nonce = $('#new_user_registration').val();
var reg_user = $('#reg_username').val();
var reg_pass = $('#reg_password').val();
var reg_mail = $('#email_optional').val();
var reg_name = $('#full_name').val();
var reg_nick = $('#nick_name').val();
/**
* AJAX URL where to send data
* (from localize_script)
*/
var ajax_url = my_reg_vars.reg_ajax_url;
// Data to send
data = {
action: 'register_user',
nonce: reg_nonce,
user: reg_user,
pass: reg_pass,
mail: reg_mail,
name: reg_name,
nick: reg_nick,
};
// Do AJAX request
$.post(ajax_url, data, function(response){
// If we have response
if ( response ) {
if ( response === '1' ) {
// If user is created
$('.result-message').html('Your registration is complete.'); // Add success message to results div
$('.result-message').addClass('alert-success'); // Add class success to results div
$('.result-message').show(); // Show results div
} else {
$('.result-message').html(response); // If there was an error, display it in results div
$('.result-message').addClass('alert-danger'); // Add class failed to results div
$('.result-message').show(); // Show results div
}
}
});
});
});
<?php if ( get_option( 'users_can_register' ) ) : // check if user can register on this site ?>
<form name="my_registration" class="form-horizontal registraion-form" role="form">
<div class="input-wrapper">
<input type="text" name="full-name" id="full_name" value="" placeholder="Your Name" class="form-control" />
</div>
<div class="input-wrapper">
<input type="text" name="nick-name" id="nick_name" value="" placeholder="Your Nickname" class="form-control" />
</div>
<div class="input-wrapper">
<input type="email" name="email" id="email_optional" value="" placeholder="Email (Optional)" class="form-control" />
</div>
<div class="input-wrapper">
<input type="text" name="username" id="reg_username" value="" placeholder="Choose Username" class="form-control" />
</div>
<div class="input-wrapper">
<input type="password" name="password" id="reg_password" value="" placeholder="Choose Password" class="form-control" />
</div>
<?php wp_nonce_field( 'reg_new_user','new_user_registration', true, true ); ?>
<div class="input-wrapper">
<?php do_action('register_form'); ?>
<input type="submit" class="btn btn-primary" id="btn-new-user" value="Register" />
</div>
</form>
<!-- Alert -->
<div class="alert result-message"></div>
<?php endif; ?>
<?php
/**
* Function insert register and validation with ajax
*
* @package WordPress
* @subpackage MyTheme
* @since MyTheme 1.0.0
*/
function registration_user() {
// Verify nonce
if ( !isset( $_POST['nonce'] ) || !wp_verify_nonce( $_POST['nonce'], 'reg_new_user' ) ) {
die ( 'Ooops, something went wrong, please try again later.' );
}
// Post values
$name = esc_sql( $_POST['name'] );
$nick = esc_sql( $_POST['nick'] );
$email = sanitize_email( $_POST['mail'] );
$username = esc_sql( $_POST['user'] );
$password = esc_sql( $_POST['pass'] );
/**
* IMPORTANT: You should make server side validation here!
*/
$userdata = array(
'first_name' => $name,
'nickname' => $nick,
'user_email' => $email,
'user_login' => $username,
'user_pass' => $password,
);
if ( empty( $name ) AND empty( $nick ) AND empty( $email ) AND empty( $username ) AND empty( $password ) ) {
echo 'Data can not be empty !';
}
elseif ( empty( $name ) ) {
echo 'Please fill in your full name !';
}
elseif ( empty( $nick ) ) {
echo 'Please fill in your nick name !';
}
elseif ( empty( $email ) ) {
echo 'Email can not be empty !';
}
elseif ( !is_email( $email ) ) {
echo 'Email address is not valid !';
}
elseif ( email_exists( $email ) ) {
echo 'Sorry, that email address is already used!';
}
elseif ( empty( $username ) ) {
echo 'Username can not be empty !';
}
elseif ( username_exists( $username ) ) {
echo 'Sorry, that username is already used!';
}
elseif ( empty( $password ) ) {
echo 'Password can not be empty !';
}
elseif ( strlen( $password ) < 8 ) {
echo 'Password must be at least 8 characters !';
}
else {
$user_id = wp_insert_user( $userdata ) ;
// Return
if ( !is_wp_error( $user_id ) ) :
echo '1'; // Success registration
// Sent email registration automatic
$to = $email;
$subject = wp_specialchars_decode( get_option('blogname'), ENT_QUOTES ) . ' - Thanks for joining us !';
$body = 'Bla Bla Bla ...';
$headers = array('Content-Type: text/html; charset=UTF-8');
wp_mail( $to, $subject, $body, $headers );
else :
echo $user_id->get_error_message();
endif;
}
die();
}
add_action( 'wp_ajax_register_user', 'registration_user' );
add_action( 'wp_ajax_nopriv_register_user', 'registration_user' );
?>
<?php
/**
* Enqueue and localize js
*
*/
function register_user_scripts() {
// Enqueue script
wp_register_script( 'vb_reg_script', get_template_directory_uri() . '/js/ajax-registration.js', array('jquery'), null, false );
wp_enqueue_script( 'vb_reg_script');
wp_localize_script( 'vb_reg_script', 'my_reg_vars', array(
'reg_ajax_url' => admin_url( 'admin-ajax.php' ),
)
);
}
add_action( 'wp_enqueue_scripts', 'register_user_scripts', 100 );
?>
@nvrn
Copy link

nvrn commented Sep 17, 2020

Good job! Thank you!
But you can add "if registration complete" - "Del form"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment