Email as Username in registration

Question

many users would to allow the registration in a wp site without an username, just only with an email.

This is a core problem, so the solution (a trick) is to replace username with email.

If wp requires an username and an email for the registration, we can get email value and put it in username value. In the registration form users will see two fields:

1. your email
2. repeat your email

This is a trick, because for wp the real fields will be: 1. username (as your email) 2. your email (as repeat your email)

But there is another problem: is the @ (at) an allowed character for username?

How can we do this?

Should we insert a code in functions.php file?.. something like this:

add_action( 'wp_core_validate_user_signup', 'custom_validate_user_signup' );

function custom_validate_user_signup($result)
{
  unset($result['errors']->errors['user_name']);

  if(!empty($result['user_email']) && empty($result['errors']->errors['user_email']))
  {
    $result['user_name'] = md5($result['user_email']);
    $_POST['signup_username'] = $result['user_name'];
  }

  return $result;
}

Thank you in advance!

Answer 1

You can use @ and . in usernames, so there is no problem. Now you could create your own register form and use register_new_user(). You could even manipulate wp_registration_url() with the filter register_url, so the register link would point to your new register page.

If you want to use it with the standard interface provided by wp-login.php, you would need some workarounds. Lets say, you only want to display the email input field for registration, you could simply (well, its a bit hacky though) hide the username field with something like this:

add_action( 'register_form', function() {
    ?><style>#registerform > p:first-child{display:none;}</style><?php
} );

Sidenote: There is also a possibility to enqueue stylesheets into the wp-login.php using the login_enqueue_scripts action.

But if you do so you will send an empty username, so you have to hook into two filters: sanitize_user and validate_username.

add_filter( 'sanitize_user', function( $sanitized_user, $raw_user, $strict ) {
    if ( $raw_user != '' ) {
        return $sanitized_user;
    }

    if ( ! empty ( $_REQUEST['action'] ) && $_REQUEST['action'] === 'register' && is_email( $_POST['user_email'] ) ) {
        return $_POST['user_email'];
    }

    return $sanitized_user;
}, 10, 3 );

add_filter( 'validate_username', function( $valid, $username ) {
    if ( $valid ) {
        return $valid;
    }

    if ( ! empty ( $_REQUEST['action'] ) && $_REQUEST['action'] === 'register' && is_email( $_POST['user_email'] ) ) {
        return true;
    }

    return is_email( $username );
}, 10, 2 );

In sanitize_user we replace the empty string with the email address. Later the username will be validated with validate_username, but again, the empty username will be used, so we need to catch this too.

But I think to create an own form would be preferred and less hacky.

Answer 2

Here's what I used:

jQuery(document).ready(function($){
    // hide the username field.
    $('input#user_login').parent().parent().hide();
    // force username to mirror the input of the email field
    $('input#email').on('change',function(){
        $('#user_login').val($(this).val());
    });
});

Nice and simple.

Answer 3

Add this in functions.php (or other php file) :

add_action('login_footer', function() {
?><script type="text/javascript">
    document.querySelector('input#user_login').parentElement.hidden = true ;
    document.querySelector('input#user_email').onchange = function(){
        document.querySelector('input#user_login').value = this.value ;
    } ;
</script><?php
} );

The action will print the script in the wp-login.php "footer". The javascript hide the "user_login" label and input, and set its value with the e-mail input value.