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; 
}
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.

DERICK TEMFACK

<span class="router-outlet-wrapper ng-tns-c950005113-0"><span class="ng-star-inserted">Hi, I'm Derick. I am a Software Engineer and DevOps pro. I specialize in turning complex business needs into </span><span class="ng-star-inserted">automated workflows</span><span class="ng-star-inserted"> using Python, Odoo, and Go. I write </span><span class="ng-star-inserted">engineering case studies</span><span class="ng-star-inserted"> here—sharing the architectural decisions and real-world code behind the solutions I build.</span></span>

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top