Wordpress hide the username/password fields in login page

Question

I have installed the wordpress social login and I want users to login only using social website IDs. Now as a second step I do not want the username and password fields for users in the login page as that is redundant.

One way is to hack the php files that display the login page... but I want a more modular structure. I plan to make the username and password fields invisible by adding custom css (using a custom css plugin) and adding the following:

label[for='user_name']
{
    visibility:hidden !important;
}
label[for='user_pass']
{
    visibility:hidden !important;
}

However the fields still remain visible. Any solutions please?

Answer 1

If you are ready to do this with css, you can do it in the following clean way.

Add the following code in the current theme's functions.php file

add_action( 'login_head', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    $style = '';
    $style .= '<style type="text/css">';
    $style .= '.login form{ display: none }';
    $style .= '.login #nav a, .login #backtoblog a { display: none }';
    $style .= '</style>';

    echo $style; 
}

or use the below way to enqueue the css file to the login page then use the css.

Add the below code in your current theme's functions.php file

add_action( 'login_enqueue_scripts', 'wpse_121687_hide_login' );
function wpse_121687_hide_login() {
    wp_register_style( 'hide-login', plugins_url( 'path to /css/hide-login.css' ) );
    wp_enqueue_style( 'hide-login' );
}

And then add the css in the hide-login.css file