How to Style Your WordPress Login Page

admin

October 16, 2025

Skills

Styling the login page not only improves your site’s visual appeal but also strengthens your brand identity. A well-designed login page helps your site look polished and trustworthy—especially if clients, members, or contributors log in frequently.

Create a Separate CSS File

To style the login page, you need to create a separate CSS file rather than using your theme’s default style.css.

Why: The WordPress login page (wp-login.php) loads before your theme’s regular styles, so adding styles to style.css usually won’t have any effect. By creating a dedicated login.css file and enqueueing it specifically for the login page, your styles will load correctly.

How:

1. Create a file called login.css in your theme or child theme folder.
2. Enqueue it in functions.php:

function custom_login_styles() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_styles' );

Styling the Logo

The default WordPress logo can be replaced with your own for better branding. Its a background image so can be changed in the CSS file you just created ie login.css.

CSS Example:

.login h1 a {
    background-image: url('your-logo.png');
    width: 220px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px; /* hide original text */
}

Changing the Logo URL

By default, clicking the login logo directs users to WordPress.org. You can change it to your website’s homepage. Add the code in functions.php:

add_filter( 'login_headerurl', function() {
    return home_url();
});

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

Other Styling

Beyond the logo, you can customize colors, buttons, backgrounds, and links. Some common adjustments:

body.login { background: #f9f9f9; }
.login #loginform { background: #fff; padding: 20px; border-radius: 8px; }
.login .button-primary { background: #0073aa; border: none; }
.login .button-primary:hover { background: #005c8c; }
.login #nav a, .login #backtoblog a { color: #333; }

Conclusion

Styling the WordPress login page is a small but powerful way to make your site feel professional and branded. By creating a separate CSS file, customizing the logo, updating its URL, and adding additional styling, you can transform the login page into a seamless part of your website’s design.