DEV Community

Cover image for How to hide username and password fields in the WordPress login form
DERICK TEMFACK
DERICK TEMFACK

Posted on • Originally published at temfack.com

How to hide username and password fields in the WordPress login form

Sometimes on your WordPress site, you don’t want to have the default login form anymore. You might want your users to log in with social login or an external identity provider. In that case, you need to remove the username and password fields.

To achieve that, we’ll use CSS to hide those fields. We’ll only work in the functions.php file through the WordPress admin dashboard. So, you don’t need to be a specialist in WordPress to accomplish this manipulation. Our version of WordPress in this tutorial is 6.0.

Step 1: Log in to your WordPress admin dashboard

After logging in to your WordPress dashboard, navigate to Tools>Theme File Editor.

Open Theme File Editor

Step 2: Open the functions.php file

When you are on the theme editor page, localize and open the functions.php file.

functions.php file

Step 3: Insert the code and save

Finally, we’ll insert the following piece of code at the end of the functions.php file and save it.

add_action( 'login_head', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    $style = '';
     $style .= '<style type="text/css">';
     $style .= '.login form .user-pass-wrap{ display: none }';
     $style .= '.login form .submit { display: none }';
     $style .= '.login form .forgetmenot { display: none }';
     $style .= '.login form .input { display: none }';
     $style .= '.login form label { display: none }';
     $style .= '.login  #nav { display: none }';
     $style .= '.login  #mo_saml_button b { display: none }';
    $style .= '#login {margin-top: 150px}';
    $style .= '</style>';

     echo $style; 
}
Enter fullscreen mode Exit fullscreen mode

Insert code in the functions.php file

And voila, we have the desired result.

Final result

Conclusion

The purpose of this tutorial was to show you how to hide the username and password fields from the WordPress login form in a proper way. Everyone has his reasons to hide them. If you have encountered a problem applying this tutorial, don’t hesitate to leave a comment. It would be a pleasure for me to help you.

Top comments (0)