July 05, 2023

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

A login page in any web application is an interface which allows user to access back-end of 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 default login page which allows website admins and editors to login to WordPress back-end content management system. A login page ensures that only authorized users can access the certain sections of web application. In this post we are going to create a WordPress front-end login page to allow front-end users to login.

 

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 current active theme. There are two ways to this:

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

We are going to cover both options with one page. We will create a PHP page "page-custom-login.php" in 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". 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 active theme directory with file name "page-custom-login.php". Where custom-login is the slug of page we are going to create in WP admin. You can replace the slug with slug of your choice. After creating the page add the following code content to page. Explanation of this code is:

  • Add Page template comment with template name "Custom Login".
  • Check if user is already logged in then redirect user to home page or dashboard page.
  • Include theme header using the get_header() function.
  • Get transient which we will create in functions.php to display authentication errors.
  • Check if errors are set then user was redirect from authentication failure and show error messages in loop.
  • Create an array of arguments $args for login form.
  • Add the WordPress login form using function wp_login_form() and pass the $args as 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:

  • Login to Website's wp-admin area.
  • Go to Pages and click on "Add Page".
  • Add a title "Custom Login" and make sure the slug of 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

Next step is to load WordPress core CSS for login form including buttons CSS. Add the following code snippet to the hook which 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 user to same custom login page if authentication fails. Add the following action and filter hooks in your functions.php to redirect user if the login form was submitted without any credentials or wrong credentials. We are adding a temporary transient to store error message which we displayed in our PHP template file. This is what these hooks will do:

  • Check if user submitted form without any credentials then set the error messages in transients and redirect to custom login page.
  • Check if user entered wrong credentials, then set the error messages in transients and redirect user to 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 login page for WordPress themes without using any plugin. Following these steps you can easily add a custom login form to allow users to login from front-end of website.

Home