15

Is it possible to remove the username field from the registration page?

I want the users to enter only their email and password.
A new user should be created based on these two parameters only.

Is that possible and if so, how?

11

Absolutely YES, you can achieve this.

Rule 1: WordPress requires a username. We must provide a username.

Rule 2: Don't edit WordPress core code.

We can achieve this by hiding username field, get email and store it as username.

Step-1: Remove Username textfield

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

    <script type="text/javascript" src="<?php echo site_url('/wp-includes/js/jquery/jquery.js'); ?>"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#registerform > p:first-child').css('display', 'none');
        });
    </script>
<?php
});

Step-2: Remove Username error

//Remove error for username, only show error for email only.
add_filter('registration_errors', function($wp_error, $sanitized_user_login, $user_email){
    if(isset($wp_error->errors['empty_username'])){
        unset($wp_error->errors['empty_username']);
    }

    if(isset($wp_error->errors['username_exists'])){
        unset($wp_error->errors['username_exists']);
    }
    return $wp_error;
}, 10, 3);

Step-3: Manipulate Background Registration Functionality.

add_action('login_form_register', function(){
    if(isset($_POST['user_login']) && isset($_POST['user_email']) && !empty($_POST['user_email'])){
        $_POST['user_login'] = $_POST['user_email'];
    }
});

Put above code in your theme's functions.php file.

You can also download a complete plugin to achieve this.

Plugin: https://wordpress.org/plugins/smart-wp-login/

4

Step 3 in the post of Nishant Kumars post checks if isset($_POST['user_login']) which did not work for me, since the login is what we actually want to remove.

My solution is as follows (in the theme's functions.php), also as a separate function, to stay with the wordpress code style:

function copy_username_to_email (){
    if(isset($_POST['user_email']) && !empty($_POST['user_email'])){
        $_POST['user_login'] = $_POST['user_email'];
    }
}
add_action('login_form_register', 'copy_username_to_email');
  • I was getting an "illegal characters" error message, so I replaced the @ and . in the email address as the username: $_POST['user_login'] = str_replace(array('@', '.'), '_', $_POST['user_email']); – GreatBlakes Apr 27 '18 at 15:57
4

@Nishant Kumar gave the perfect and should-be-accepted answer to this question. However there is a glitch after the Wordpress 4.0 version released. From codex-

Note: Since 4.0, these properties are private, see [28511].

registration_errors filter here requires a little modification.

//Remove error for username, only show error for email only.

add_filter('registration_errors', 'remove_username_empty_error', 10, 3);

function remove_username_empty_error($wp_error, $sanitized_user_login, $user_email){

    if(isset($wp_error->errors['empty_username'])){
        $wp_error->remove('empty_username');
    }    
    if(isset($wp_error->errors['username_exists'])){
        $wp_error->remove('username_exists');
    }
    return $wp_error;
}

Note: As @mcnesium mentioned, if we completely got rid of the username field (in my case I used Theme my login plugin to override the regular registration form and there I just removed the username field) then $_POST['user_login'] will be null and condition won't match at all. We better remove that from the condition like @mcnesium suggested.

2

Iterating on @nishant-kumar's answer, here is a vanilla JS, no extra js script, 1 step, no backend edit needed, solution to make a sign up form with only the email input :

/** Hook your code to the login / Sign up page **/
add_action('login_head', function(){

    /* Style to hide the user_name field group */
    ?>
    <style>
        #registerform > p:first-child{
            display:none;
        }
    </style>

    <script type="text/javascript">
        /* Execute this action when the DOM is ready AND after everything in the page is loaded */
        let user_email;
        window.addEventListener('load',function() {
            user_email = document.querySelector('[name="user_email"]');
            if(user_email) { // Execute only if there is a user_email field on page
                user_email.addEventListener('keyup',syncUserName);
                user_email.addEventListener('change',syncUserName);
            }
        });

        /* sync user_email's value with the hidden user_login field */
        function syncUserName() {
                document.querySelector('[name="user_login"]').value = user_email.value;
        }

    </script>
<?php
});

You just need to add this code in your functions.php file (or in your custom plugin, if you have one)

  • 1
    I tried this and got an error user_email is not defined at HTMLInputElement.syncUserName. Moving the "function syncUserName" part inside the upper function removes the error and the code snippet works greatly. Just comment so that others may encounter the same issue. Thank you Gfra54. – Betty Mar 7 at 2:34
  • You are absolutely right @betty, I corrected my answer to put the user_emailvar in the same scope. Thanks. – Gfra54 Mar 8 at 6:13
1

I think any solution to this request is going to be a 'hack' as wordpress requires that there be a username for all registered users. Even the plugin mentioned above is most likely just finding the username via the email address, and then using that username to login to the site.

If you are okay with a hack, here is a concept that could work:

1) Pre-populate the username field in your registration form with a unique number, using the current timestamp is a good idea to avoid ever getting any duplicates. You would then hide this field so that the user does not see it on the screen when filling out their form.

If you are using jQuery you could use something like:

$(document).ready(function() {
    var timestamp = (new Date).getTime();
    $('form input.username').val(timestamp);
    $('form input.username').css('display', 'none');
});

In this example, 'form input.username' would be the jQuery selector to find the username field, you will need to check the html structure on your page to make sure the selector matches the structure.

2) Use a plugin like the one mentioned earlier (http://wordpress.org/extend/plugins/wp-email-login/) to allow users to login with their email address.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.