How to hide the sign in text fields on the WordPress sign in screen?

2 Views

I have a demo site where I want public users to login with Facebook only.

Admins will login with the standard WordPress login.

Read More

So I have added a Facebook login button to the WordPress login screen.

enter image description here

I don’t want to confuse the users and let them see the WordPress username and password text fields i.e. I want to hide those 2 input fields.

Is there a way to hide the WordPress username and password text fields and then allow an admin to make them visible when they want to login?
So maybe, click a link which will then make the WordPress username and password text fields visible?

Here is the page source: 

<form name="loginform" id="loginform" action="" method="post">
 <label for="user_login">Username<br />
 <input type="text" name="log" id="user_login" aria-describedby="login_error" class="input" value="" size="20" /></label>
 <label for="user_pass">Password<br />
 <input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input" value="" size="20" /></label>
 <script type="text/javascript">
  if(jQuery.type(has_social_form) === "undefined"){
   var has_social_form = false;
   var socialLogins = null;
  }
  jQuery(document).ready(function(){
  (function($) {
  if(!has_social_form){
   has_social_form = true;
   var loginForm = $('#loginform,#registerform,#front-login-form');
   socialLogins = $('<div class="newsociallogins" style="text-align: center;"><div style="clear:both;"></div></div>');
   if(loginForm.find('input').length > 0)
    loginForm.prepend("<h3 style='text-align:center;'>OR</h3>");
    loginForm.prepend(socialLogins);
    socialLogins = loginForm.find('.newsociallogins');
   }
   if(!window.fb_added){
    socialLogins.prepend('<a href="" rel="nofollow"><div class="new-fb-btn new-fb-4 new-fb-default-anim"><div class="new-fb-4-1"><div class="new-fb-4-1-1">Login With Facebook</div></div></div></a><br />');
    window.fb_added = true;
   }
   }(jQuery));
  });
 </script>
 <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Log In" />
 <input type="hidden" name="redirect_to" value="" />
 <input type="hidden" name="testcookie" value="1" />
</form>
Post Views: 2

Related posts

2 comments

  1. For normal user you can create another page and on that page you can set facebook login.

    For admin, wp-admin is fine. So dont hide those input fields from wp-admin. login with facebook should be by another page.

    This is the simple and time saving solution.

  2. You can try something like that:

    // get hash value from URL
var hash = window.location.hash;

// check if hash is set
if(hash && hash == "wpadmin") {
  $("#wpform").show(); // show wp form
}
    body {background:#eee; text-align: center;}

#login {
  border:2px solid #000;
  padding:2em;
  background: #fff;
  width:50%;
  margin:2em auto;
}

#facebook {
  padding:1em;
  background:lightblue;
  border:1px solid blue;
}

#wpform {
  padding:1em;
  border:1px solid #CCC;
  margin-top:1em;
  display: none;
}
    <div id="login">
  <div id="facebook">Login with Facebook</div>
  <form action="#"id="wpform">WP Standard Form</form>
</div>

    Explanation:

    This simple code works by detecting a hash value in the URL and if it matches “wpadmin” then it will show the form, otherwise, keep it hidden (hidden by default using CSS display:none).

    Normal link – will show facebook only:

    http://www.example.com/wp-login.php

    Link with hash – will show facebook and standard form:

    http://www.example.com/wp-login.php#wpadmin

    jsFiddle

Comments are closed.