How to Change the WordPress Login Page Logo and Styles

Customization

September 9, 2025

The WordPress login page displays the default WordPress logo and blue styling. If you want to brand your site, you can replace the logo with your own and apply custom styles. This is especially useful for client sites or membership websites where branding matters.

Step 1: Replace the Login Logo

Use the login_enqueue_scripts hook to add custom CSS that changes the login logo.

// Change the WordPress login logo
function my_custom_login_logo() {
    echo '<style>
        .login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png);
            height: 80px;
            width: 250px;
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'my_custom_login_logo');

In this example:

Upload your logo to your theme folder (e.g., /images/custom-logo.png).
Adjust height and width to fit your logo.

Step 2: Change the Logo Link

By default, the login logo links to wordpress.org. You can change it to your site’s homepage.

// Change login logo URL
function my_login_logo_url() {
    return home_url();
}
add_filter('login_headerurl', 'my_login_logo_url');

// Change login logo title text
function my_login_logo_title() {
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'my_login_logo_title');

Step 3: Customize the Login Page Styles

You can also style the background, form, and button with CSS.

// Add custom login page styles
function my_custom_login_styles() {
    echo '<style>
        body.login {
            background-color: #f1f1f1;
        }
        .login form {
            background: #fff;
            border-radius: 8px;
            padding: 26px 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.13);
        }
        .login form .button-primary {
            background: #0073aa;
            border: none;
            text-shadow: none;
        }
        .login form .button-primary:hover {
            background: #005177;
        }
    </style>';
}
add_action('login_enqueue_scripts', 'my_custom_login_styles');