In this article, we’ll go through creating a custom WordPress front-end login page without using any plugin.

Anzeni - WordPress login page Customization

If you would prefer to customize the existing WordPress login page, check out article on “Custom WordPress Login Page Without Plugin

What if you want to do more than just changing logos and links?

Yes! You absolutely can! WordPress allow you to create your own login page and replace the WordPress default one with yours.

Just follow our steps below. Please note that this guide requires a little coding knowledge. If you aren’t familiar with codes, use plugins instead.

Remember to back up your site before getting started.

1: Create a New Template File

C-panel File manager WordPress
C-panel File manager WordPress

To do that, go to your servers WordPress installation folder (“cPanel File Manager”);

  • wp-content
  • theme
  • “Your Child Theme”.

Inside the child theme folder, add a new .php file and name it to what you’d like, e.g., custom-login-page.php.

2: Customize Your Template File

To do that, go to your WordPress Dashboard > Appearance > Theme File Editor.

The next step is to add PHP codes to create a complete login form.

A: Add a Login Form

<?php
/**
* Template Name: Custom Login Page
*/
get_header();
if ( ! is_user_logged_in() ) {
    $args = array
        'redirect' => admin_url(), // redirect to admin dashboard.
        'form_id' => 'custom_loginform',
        'label_username' => __( 'Username:' ),
        'label_password' => __( 'Password:' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log Me In' ),
         'remember' => true
    );
wp_login_form( $args );
}
get_footer();
<?php /* Template Name: Custom Login Pages */ ?>

This action will make your created PHP file a page template. Accordingly, you’ll see the template name when editing pages in the backend.

B: Redirect wp-login.php to Custom Login Page

You’ve successfully created a custom login page. However, users still can get directly to the WordPress default login page by typing wp-admin or wp-login.php after your site URLs.

To avoid this from happening, you need to redirect users from WordPress default login URLs to your custom ones.

To do that, add the following custom codes to your (child) theme’s functions.php or Code Snippets plugin.

function redirect_login_page() {
    $login_url  = home_url( '/login' );
    $url = basename($_SERVER['REQUEST_URI']); // get requested URL
    isset( $_REQUEST['redirect_to'] ) ? ( $url   = "wp-login.php" ): 0; // if users ssend request to wp-admin
    if( $url  == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')  {
        wp_redirect( $login_url );
        exit;
    }
}
add_action('init','redirect_login_page');
Login Redirect

You can also set a redirect function to that using the function.php file, check out article on “WordPress login redirect using a function

C: Login Error Handling

Once you’re done creating a custom login page, users who enter correct login details will get to the dashboard. Failed login requests will be redirected to WordPress default one.

To deal with failed login attempts, add the following code to your (child) theme’s functions.php file.

function error_handler() {
    $login_page  = home_url( '/login' );
    global $errors;
    $err_codes = $errors->get_error_codes(); // get WordPress built-in error codes
    $_SESSION["err_codes"] =  $err_codes;
    wp_redirect( $login_page ); // keep users on the same page
    exit;
}
add_filter( 'login_errors', 'error_handler');

Next, add the following codes to the custom_login_page.php.

$err_codes = isset( $_SESSION["err_codes"] )? $_SESSION["err_codes"] : 0;
    if( $err_codes !== 0 ){
        echo display_error_message(  $err_codes );
}
function display_error_message( $err_code ){
    // Invalid username.
    if ( in_array( 'invalid_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: Invalid username.';
    }
    // Incorrect password.
    if ( in_array( 'incorrect_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The password you entered is incorrect.';
    }
    // Empty username.
    if ( in_array( 'empty_username', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The username field is empty.';
    }
    // Empty password.
    if ( in_array( 'empty_password', $err_code ) ) {
        $error = '<strong>ERROR</strong>: The password field is empty.';
    }
    // Empty username and empty password.
    if( in_array( 'empty_username', $err_code )  &&  in_array( 'empty_password', $err_code )){
        $error = '<strong>ERROR</strong>: The username and password are empty.';
    }
return $error;
}

3: Create a New Page & Assign Created Template to Custom Page

Now, navigate to the Pages section under your admin dashboard and create a new page.

Under the Template dropdown under the Page Attributes section, select your created template.

PPWP Pro: Create Custom Login Pages

Save the page.

Now you have your own login page.

Have You Successfully Created Your Custom Login Page?

We’ve walked you through detailed steps to customize your admin login page.

You can change the logo and associated URL in the WordPress default login form.

Alternatively, you can create your own WordPress custom login page by creating a new page template. While the 2nd solution seems to require coding knowledge at first, it’s pretty easy with our clear step-by-step guide. So don’t worry at all.

Have you managed to create your custom login page yet?

Do you need any further information?

Let us know in the comment section below!

About Brian Gathu

mmGathu is a business and tech geek who spends half of his day, branding and designing. While the nights are spent on writing. You can check out-