Implement a Frontend Login Page in WordPress with Pure Code

Many WordPress developers want a custom login page that matches their site's design, rather than using the default wp-login.php page. This guide explains how to create a fully functional frontend login page using only code, without plugins.

Create a Custom Login Page Template

First, create a custom page template for your login form.

1. In your active theme directory, create a new PHP file named page-login.php.
2. Add the template header at the top of the file:

<?php
/*
Template Name: User Login Page
*/
get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php wp_login_form(); ?>
    </main>
</div>

<?php get_footer(); ?>

3. In the WordPress admin, create a new page (e.g., "Login"). In the Page Attributes meta box, select the "User Login Page" template and publish it.

Redirect Default Login to Your Custom Page

To fully replace the default login, redirect all access to wp-login.php to your new page and handle login/logout redirects. Add this code to your theme's functions.php file. Replace /login/ with your page's actual slug.

<?php
// 1. Redirect wp-login.php requests to custom page
function custom_redirect_login_page() {
    $custom_login_url = home_url( '/login/' );
    $requested_page = basename( $_SERVER['REQUEST_URI'] );
    if ( $requested_page == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET' ) {
        wp_redirect( $custom_login_url );
        exit();
    }
}
add_action( 'init', 'custom_redirect_login_page' );

// 2. Handle login failure
function custom_login_failed() {
    wp_redirect( home_url( '/login/' ) . '?login=failed' );
    exit();
}
add_action( 'wp_login_failed', 'custom_login_failed' );

// 3. Check for empty credentials
function custom_verify_username_password( $user, $username, $password ) {
    if ( empty( $username ) || empty( $password ) ) {
        wp_redirect( home_url( '/login/' ) . '?login=empty' );
        exit();
    }
}
add_filter( 'authenticate', 'custom_verify_username_password', 1, 3 );

// 4. Redirect after logout
function custom_logout_redirect() {
    wp_redirect( home_url( '/login/' ) . '?login=loggedout' );
    exit();
}
add_action( 'wp_logout', 'custom_logout_redirect' );
?>

Display Status Messages on the Login Page

In your page-login.php template, before the wp_login_form(); call, add this code to show messages based on URL parameters:

<?php
$login_status = isset( $_GET['login'] ) ? $_GET['login'] : '';
if ( $login_status === 'failed' ) {
    echo '<p class="login-error"><strong>Error:</strong> Invalid username or password.</p>';
} elseif ( $login_status === 'empty' ) {
    echo '<p class="login-error"><strong>Error:</strong> Username and password cannot be empty.</p>';
} elseif ( $login_status === 'loggedout' ) {
    echo '<p class="login-success">You have been logged out.</p>';
}
?>

Customize the Login Form Styling

The wp_login_form() function outputs HTML with specific CSS classes. You can style these in your theme's style.css to match your design. Key classes include:

• .login-form (form container)
• .login-username, .login-password (input fields)
• .login-remember ("Remember Me" checkbox)
• .login-submit (submit button container)
• #wp-submit (submit button)

Important Notes and Extensions

1. Security: This method only changes the frontend; WordPress core authentication remains secure.
2. Registration & Lost Password Links: The default form lacks these. You can add them manually using wp_register() and wp_lostpassword_url().
3. Post-Login Redirect: Use the 'redirect' parameter in wp_login_form() to specify a URL after successful login.

Following these steps gives you a fully custom, frontend login page without plugins.