Is it possible to remove username field from the registration page? If so, how?

5 comments

1. 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/

   Log in to Reply

2. 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');
   

   Log in to Reply

3. @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.

   Log in to Reply

4. 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)

   Log in to Reply

5. 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.

   Log in to Reply