How to Create a Custom Login Page in WordPress

Running your custom login page with WordPress improves user experience and develops a branded website interface. You can replace the wp-login.php default form to generate a login page that matches your site design and functionality. This tutorial demonstrates the steps for building a custom login page and user authentication with secure login procedures.

Why Create a Custom Login Page?

A custom login page offers several benefits:

• Branding: You can incorporate your site’s branding elements, such as logos and colors.
• User Experience: When account access is personalized, it becomes simpler for users to sign in to their accounts.
• Security: Customizing the login process can help protect against unauthorized access and brute-force attacks.

Follow the steps to create your custom login page.

Step 1: Create a Custom Login Page Template

What is a Custom Login Page Template?

A custom login page template is a PHP file that defines how your login page will look and function. You can create this template in your theme’s directory.

How to Create the Template

1. Create a New File: In your active theme’s folder (usually located in wp-content/themes/your-theme-name/), create a new file named custom-login.php.
2. Add Template Header: At the top of the file, to define it as a template, add the following code:

<?php

/*

Template Name: Custom Login

*/

get_header(); // Include the header

?>

7. Create the Login Form: Below the header, add the HTML for your custom login form. You can use the following example:

<div class="login-form">

    <h2>Login</h2>

    <form method="post" action="<?php echo esc_url( wp_login_url() ); ?>">

        <label for="username">Username</label>

        <input type="text" name="log" id="username" required>
        
        <label for="password">Password</label>

        <input type="password" name="pwd" id="password" required>
        
        <input type="submit" value="Login">

        <input type="hidden" name="redirect_to" value="<?php echo esc_url( home_url() ); ?>">

    </form>

</div>

13. Include Footer: At the end of the file, include the footer:

<?php get_footer(); ?>

Summary of the Template

This template creates a simple login form that submits the username and password to the WordPress login process. The redirect_to field ensures users are redirected to the homepage after logging in.

Step 2: Authenticate Users with wp_signon()

What is wp_signon()?

The wp_signon() function authenticates users based on the credentials provided in the login form. It checks the username and password against the WordPress database.

How to Use wp_signon()

1. Process the Form Submission: At the top of your custom-login.php file, add the following code to handle form submissions:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $creds = array();

    $creds['user_login'] = sanitize_user($_POST['log']);

    $creds['user_password'] = sanitize_text_field($_POST['pwd']);

    $creds['remember'] = true;

    $user = wp_signon($creds, false);

    if (is_wp_error($user)) {

        echo '<p class="error">' . $user->get_error_message() . '</p>';

    } else {

        wp_redirect(home_url()); // Redirect to homepage or desired URL

        exit;

    }

}

Explanation of the Code

• Form Submission Check: The code checks if the form has been submitted using the $_SERVER[‘REQUEST_METHOD variable.
• Sanitize Input: It sanitizes the username and password to prevent security issues.
• Authenticate User: The wp_signon() function attempts to log the user in.
• Error Handling: If there’s an error, the error message is displayed. If the redirection is successful, the user is redirected to the homepage.

Step 3: Control Post-Login URLs with login_redirect

What is login_redirect?

The login_redirect hook allows you to control where users are redirected after logging in. You can customize this to send users to a specific page based on their roles or other criteria.

How to Use login_redirect

1. Add the Hook: In your theme’s functions.php file, add the following code to customize the login redirect behavior:

add_filter('login_redirect', 'custom_login_redirect', 10, 3);

function custom_login_redirect($redirect_to, $request, $user) {

    // Check if the user is an administrator

    if (isset($user->roles) && is_array($user->roles)) {

        if (in_array('administrator', $user->roles)) {

            // Redirect administrators to the dashboard

            return admin_url();

       } else {

            // Redirect other users to the homepage

            return home_url();

        }

    }

    return $redirect_to; // Default redirect

}

Explanation of the Code

• Hook into login_redirect: This filter allows you to modify the redirect URL after a successful login.
• Check User Roles: The code checks if the logged-in user has the ‘administrator’ role and redirects them to the admin dashboard. Other users are redirected to the homepage.

Step 4: Replace the Default Login URL

Why Replace the Default Login URL?

Changing the default login URL can enhance security by obscuring the login page from potential attackers.

How to Replace the Login URL

1. You can modify the login URL through the functions.php file by implementing this code.

add_action('init', 'custom_login_url');

function custom_login_url() {

    if (strpos($_SERVER['REQUEST_URI'], 'wp-login.php') !== false) {

        wp_redirect(home_url('/custom-login')); // Redirect to your custom login page

        exit;

    }

}

Explanation of the Code

• Check for Default Login URL: The code checks if the current request is for wp-login.php.
• Redirect to Custom Page: If it is, it redirects users to the custom login page you created.

Step 5: Ensure Security with Nonces and HTTPS

What are Nonces?

Defending against CSRF attacks is possible through the utilization of security tokens known as nonces.

How to Implement Nonces

1. Add a Nonce Field to the Form: Modify your login form in custom-login.php to include a nonce field:

<?php wp_nonce_field('custom_login_action', 'custom_login_nonce'); ?>

1. Verify the Nonce on Submission: Update the form processing code to verify the nonce:

if (isset($_POST['custom_login_nonce']) && wp_verify_nonce($_POST['custom_login_nonce'], 'custom_login_action')) {

    // Process login

} else {

    echo '<p class="error">Nonce verification failed.</p>';

}

Use HTTPS

Ensure your site uses HTTPS to encrypt data transmitted between the user and the server, enhancing security during the login process.

Frequently Asked Questions

Conclusion

Creating a custom login page in WordPress improves the user experience and enhances security and branding. By following the steps outlined in this guide, you can successfully replace the default wp-login.php form, authenticate users, and control their post-login experience. Remember to implement security measures like nonces and HTTPS to protect your users’ data. Happy coding!

About the writer

Hassan Tahir wrote this article, drawing on his experience to clarify WordPress concepts and enhance developer understanding. Through his work, he aims to help both beginners and professionals refine their skills and tackle WordPress projects with greater confidence.