You may have a login form on your WordPress website. And you want to allow users to login with a phone number along with a username and email. Basically, your users can enter any of the options from Username/Email/Phone and a password.

Please take note this tutorial does not intend to show login with OTP. Instead, I am going to add one more option of a phone number on the login form. Your users can choose any one of the convenient options. You probably saw this on the Amazon login form. Amazon allows us to log in with either email or mobile number.

Add Phone Number Entry

To give a choice for login with a phone number, you should insert the phone number of a user in the wp_usermeta table. This can be done at the time of user registration. You probably use the below code to insert a phone number of a user.

<?php
$user_id = 1; // pass user id
$phone_number = 9999999999;
add_user_meta( $user_id, 'user_phone', $phone_number);

Once you have a meta_key ‘user_phone’ along with its value, you are able to check the user’s credentials against the phone number.

Create a Login Form

Let’s create a simple login form where a user can add their login information. The form will have the following fields:

• Text field to enter Username/Email/Phone.
• Text field to enter a password.
• Nonce to avoid CSRF attacks. It will be a hidden field.
• Submit button.

<?php
$return = log_the_user_in();
if( is_wp_error( $return ) ) {
    echo $return->get_error_message();
}
?>
<form method="post">
    <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p>
    <p><input type="password" name="user_password" placeholder="Password" required /></p>
    <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" />
    <input type="submit" name="btn_login" value="Submit" />
</form>

In the above code, we added the HTML and also called the log_the_user_in() method. This method is responsible for checking the user’s credentials. If some error occurs on the server side, we print them through the get_error_message(). We will define the log_the_user_in() method and return errors in the next step.

Login with Phone Number in WordPress

When a user fills in credentials and hits a submit button, we will take the credentials and verify them against the database. If the credentials are correct, we will log the user in and redirect them to the home page. For wrong credentials, errors will be logged with WP_Error class.

I will define the method log_the_user_in() on the init hook of WordPress. The init hook fires after WordPress has finished loading but before any headers are sent. This is ideal to handle a form with a POST method.

Write the code below in the functions.php file. This code processes the login form and handles all possible scenarios.

add_action( 'init', 'log_the_user_in' );
function log_the_user_in() {
    if ( ! isset( $_POST['btn_login'] ) ) return;

    if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) {
        return new WP_Error('invalid_data', 'Invalid data.');
    }

    if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) {
        return new WP_Error('empty', 'Both fields are required.');
    }

    if ( is_email( $_POST['user_login'] ) ) {
        // check user by email
        $user = get_user_by( 'email', $_POST['user_login'] );
    } elseif ( is_numeric( $_POST['user_login'] ) ) {
        // check user by phone number
        global $wpdb;
        $tbl_usermeta = $wpdb->prefix.'usermeta';
        $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) );

        $user = get_user_by( 'ID', $user_id );
    } else {
        // check user by username
        $user = get_user_by( 'login', $_POST['user_login'] );
    }

    if ( ! $user ) {
        return new WP_Error('wrong_credentials', 'Invalid credentials.');
    }

    // check the user's login with their password.
    if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) {
        return new WP_Error('wrong_credentials', 'Invalid password.');
    }

    wp_clear_auth_cookie();
    wp_set_current_user($user->ID);
    wp_set_auth_cookie($user->ID);

    wp_redirect(get_bloginfo('url'));
    exit;
}

Here, we first verified the nonce to protect the form from certain types of misuse, malicious code, and CSRF attacks. 

Next, based on the is_email() or is_numeric() method, it checks for valid email and phone number. If the entered value is neither an email nor a phone, we check for a username.

On entering valid credentials, users log into the system and redirect to the home page. In your case, you can change this redirection to something else.

It’s all about adding a login with a phone number in WordPress. I hope it will help you with your project. If it is found useful, share your thoughts and suggestions in the comment section below.

Related Articles

• Load Dynamic Content on Bootstrap Modal in WordPress
• How to Build Custom Elementor Widget
• How to Add Custom Endpoints to WordPress API

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.