July 05, 2023

Create a Custom Login Page in WordPress (Without a Plugin)

A login page in any web application is an interface that allows user to access the back-end of a web application by entering their login credentials. Learn how to create a custom login page in WordPress without using any plugin.

Custom Login Page in WordPress

WordPress comes with a default login page, which allows website admins and editors to log in to the WordPress back-end content management system. A login page ensures that only authorized users can access certain sections of the web application. In this post, we are going to create a WordPress front-end login page to allow front-end users to log in.

 

How to Create a Login Page in WordPress

In order to create a login page in WordPress, we need to create a PHP page in the current active theme. There are two ways to do this:

  1. Create a PHP page that matches the slug of the WP admin page.
  2. Add a template name to the PHP page and assign that template to the WP admin page.

We are going to cover both options on one page. We will create a PHP page "page-custom-login.php" in the active theme folder. We will use a template name "Custom Login Page" for this page and create a page in WP admin with slug "custom-login". The following are the steps to create a WordPress custom login page without any plugin:

 

Step 1: Create a PHP Page in WP Theme Folder

First step is to create a PHP page in the active theme directory with the file name "page-custom-login.php". Where custom-login is the slug of the page we are going to create in WP admin. You can replace the slug with the slug of your choice. After creating the page, add the following code to the page. Explanation of this code is:

  • Add Page template comment with template name "Custom Login".
  • Check if the user is already logged in, then redirect the user to the home page or dashboard page.
  • Include the theme header using the get_header() function.
  • Get the transient that we will create in functions.php to display authentication errors.
  • Check if errors are set, then the user was redirected from authentication failure and show error messages in a loop.
  • Create an array of arguments $args for the login form.
  • Add the WordPress login form using the function wp_login_form() and pass the $args as a parameter to this function.
  • Finally, add the theme footer using the get_footer() function.
<?php
/*
Template Name: Custom Login
*/

if (is_user_logged_in()) {
    // Redirect to home page or dashboard page if user is already logged in
    wp_redirect(home_url());
    exit;
}

get_header();
?>
    <section class="section py-5">
        <div class="container">
            <div class="wp-core-ui login">
                <div id="login">
                    <?php
                    $error = get_transient('custom_login_failed');

                    if (is_wp_error($error)) {
                        printf('<div id="login_error" class="notice notice-error">');
                        printf('<ul class="login-error-list">');

                        foreach ($error->get_error_codes() as $code) {
                            foreach ($error->get_error_messages($code) as $message) {
                                printf('<li>%s</li>', $message);
                            }
                        }

                        printf('</ul>');
                        printf('</div>');

                        delete_transient('custom_login_error');
                    } ?>
                    <div class="login custom-login-form">
                        <h1><?php _e('Login', 'text-domain'); ?></h1>
                        <?php
                        $args = [
                            'redirect' => home_url(), // Redirect after login
                            'form_id' => 'custom_login_form',
                            'label_username' => __('Username', 'text-domain'),
                            'label_password' => __('Password', 'text-domain'),
                            'label_remember' => __('Remember Me', 'text-domain'),
                            'label_log_in' => __('Log In', 'text-domain'),
                            'remember' => true
                        ];

                        wp_login_form($args);
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

<?php get_footer(); ?>

 

Step 2: Create a New Page in WP Admin

First step is to create a WP admin page by following these steps:

  • Log in to the Website's wp-admin area.
  • Go to Pages and click on "Add Page".
  • Add a title "Custom Login" and make sure the slug of the page is "custom-login".
  • You can also assign the template to this page if you are going to keep the slug different.
 

Step 3: Add WordPress Login Form CSS

The next step is to load WordPress core CSS for the login form, including button CSS. Add the following code snippet to the hook that is used to load theme styles.

wp_enqueue_style( 'login', [], false );
wp_enqueue_style( 'buttons', [], false );
 

Step 4:  Add Action and Filter Hooks for WordPress Failed Authentication

Next step is we want to redirect the user to the same custom login page if authentication fails. Add the following action and filter hooks in your functions.php to redirect the user if the login form was submitted without any credentials or with wrong credentials. We are adding a temporary transient to store the error message that we displayed in our PHP template file. This is what these hooks will do:

  • Check if the user submitted the form without any credentials, then set the error messages in transients and redirect to the custom login page.
  • Check if the user entered wrong credentials, then set the error messages in transients and redirect the user to the custom login page.
// Redirect when login authentication fails
add_action('wp_login_failed', 'custom_login_failed_redirect', 30, 2);
function custom_login_failed_redirect($username, $error): void
{
    set_transient('custom_login_failed', $error, 30);

    wp_redirect(home_url('custom-login'));
    exit;
}

// Redirect invalid/no credentials submitted (empty form submission)
add_filter('authenticate', 'custom_empty_login_fields', 30, 3);
function custom_empty_login_fields($user, $username, $password)
{
    if (is_wp_error($user)) {
        set_transient('custom_login_failed', $user, 30);

        wp_redirect(home_url('custom-login'));
        exit;
    }

    return $user;
}

We just demonstrated in simple steps how to add a login page for WordPress themes without using any plugin. Following these steps, you can easily add a custom login form to allow users to log in from the front-end of the website.

Home