This post is a part 14 of Creating a WordPress Admin Theme post series.
In this tutorial I will show you how to create a front-end login and registration form which allows users to login with their username only. And then I will show you how to hack the WordPress admin login form so that you can login with username only.
Creating a Login Form Widget without Password field
Let’s see the code how to create a front-end widget which let’s you login into WordPress without password.
Put this code in your a theme or plugin file.
<?php
class No_Password_Widget extends WP_Widget
{
public function __construct() {
parent::__construct("no-password-widget", "No Password Login Form", array("description" => __("Displays a Login form which allows to login without password")));
}
public function widget($args, $instance)
{
if(is_user_logged_in())
{
echo "You are logged in";
}
else
{
?>
<form method="get" action="<?php echo get_site_url() . '/wp-admin/admin-ajax.php'; ?>">
<input type="text" name="username" placeholder="Username" required>
<input type="text" name="action" value="login" style="display: none">
<input type="submit">
</form>
<?php
}
}
}
register_widget("No_Password_Widget");
function redirect_to_home()
{
header("Location: " . get_site_url());
}
function login()
{
if(isset($_GET["username"]))
{
//now login user
$user = get_user_by("login", $_GET["username"] );
if($user != "FALSE")
{
wp_set_auth_cookie($user->ID);
}
}
header("Location: " . $_SERVER["HTTP_REFERER"]);
die();
}
add_action("wp_ajax_login", "redirect_to_home");
add_action("wp_ajax_nopriv_login", "login");
class No_Password_Widget extends WP_Widget
{
public function __construct() {
parent::__construct("no-password-widget", "No Password Login Form", array("description" => __("Displays a Login form which allows to login without password")));
}
public function widget($args, $instance)
{
if(is_user_logged_in())
{
echo "You are logged in";
}
else
{
?>
<form method="get" action="<?php echo get_site_url() . '/wp-admin/admin-ajax.php'; ?>">
<input type="text" name="username" placeholder="Username" required>
<input type="text" name="action" value="login" style="display: none">
<input type="submit">
</form>
<?php
}
}
}
register_widget("No_Password_Widget");
function redirect_to_home()
{
header("Location: " . get_site_url());
}
function login()
{
if(isset($_GET["username"]))
{
//now login user
$user = get_user_by("login", $_GET["username"] );
if($user != "FALSE")
{
wp_set_auth_cookie($user->ID);
}
}
header("Location: " . $_SERVER["HTTP_REFERER"]);
die();
}
add_action("wp_ajax_login", "redirect_to_home");
add_action("wp_ajax_nopriv_login", "login");
Let’s see how the code works:
- Here we created a REST API named “login”.
- We created a widget which displays a form.
- When user submits the form the user is redirected to the “login” REST API url. There wp_set_auth_cookie is used to login user only with user id.
- wp_set_auth_cookie creates a user logged in session cookie with only user id.
- Here I have not applied any styles to the form to just keep the code small. You can apply styles to it.
Here is the screenshots of the widget
You can use this same logic and create a login form without password anywhere in your website not just in widget.
Manipulating Admin Panel Login Form to Login without Password
Let’s see the code which allows users to login from admin panel without password:
<?php
function admin_login($user, $username, $password) {
$user = get_user_by("login", $username);
if($user != "FALSE")
{
wp_set_auth_cookie($user->ID);
}
else
{
return null;
}
return $user;
}
function hide_password_field()
{
?>
<style type="text/css">
body.login div#login form#loginform p:nth-child(2) {
display: none;
}
</style>
<?php
}
add_filter("authenticate", "admin_login", 10, 3);
add_action("login_head", "hide_password_field");
function admin_login($user, $username, $password) {
$user = get_user_by("login", $username);
if($user != "FALSE")
{
wp_set_auth_cookie($user->ID);
}
else
{
return null;
}
return $user;
}
function hide_password_field()
{
?>
<style type="text/css">
body.login div#login form#loginform p:nth-child(2) {
display: none;
}
</style>
<?php
}
add_filter("authenticate", "admin_login", 10, 3);
add_action("login_head", "hide_password_field");
Let’s understand how the code works:
- We used the “login_head” to add CSS styles to the head section of wp-login.php page. We used it to hide password label and field. And also login error messages.
- “authenticate” filter allows us to verify username and password by our own customized way. “null” values indicates credentials are wrong and returning WP_User object tells WordPress to login the user just by username and no further checks. If there is no registered user with the provided username then we display the message “Check Username” using “login_erros” filter.
Here is the screenshots of the admin login page:
