How to customize the WordPress login page

The WordPress login page is the gateway to the admin panel, and customizing it can give a more professional touch aligned with your brand identity. In this article, you will learn how to change the logo, background, colors, and make other design modifications.

1. Change the WordPress logo

By default, WordPress displays its own logo on the login page. We can replace it with our brand logo by adding the following code to the  functions.php file of your active theme:

<?php
function custom_login_logo() {
    echo '<style type="text/css">
        #login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png);
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>';
}
add_action('login_head', 'custom_login_logo');

Make sure to upload your logo to the images folder within your active theme and adjust the size as needed.

2. Change the login page background

If you want to change the login page background, use this code:

<?php
function custom_login_background() {
    echo '<style type="text/css">
        body.login {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/login-background.jpg);
            background-size: cover;
            background-position: center;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_background');

3. Make the background transparent

If you prefer a transparency effect on the login form, you can use:

<?php
function custom_login_transparent_form() {
    echo '<style type="text/css">
        .login form {
            background: rgba(255, 255, 255, 0.5) !important;
            border: none;
            box-shadow: none;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_transparent_form');

4. Change the form colors

To change the colors of the buttons and links, add this code:

<?php
function custom_login_colors() {
    echo '<style type="text/css">
        .wp-core-ui .button-primary {
            background: #ff6600 !important;
            border-color: #cc5200 !important;
        }
        .login #backtoblog a, .login #nav a {
            color: #ff6600 !important;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_colors');

5. Redirect the logo to home instead of WordPress.org

When you click on the login logo, by default it takes you to WordPress.org. To change it and direct it to your homepage, use this code:

<?php
function custom_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'custom_login_logo_url');

function custom_login_logo_title() {
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'custom_login_logo_title');

Customizing the WordPress login page is an excellent way to improve user experience and reinforce brand identity. You can do it with code according to your preference.

We hope this guide has been helpful! If you have any questions, leave them in the comments.