How to Customize the WordPress Login Page Logo and CSS (No Plugin)

Every WordPress site has the same login page, with the WordPress logo and a plain grey background. You can customize the WordPress login page logo and CSS in a few minutes, so it carries your own logo, colours and link instead. It looks more professional for clients, team members and authors who log in every day, and it reinforces your brand. Here’s the code we use, updated for current WordPress versions, plus a no-code plugin option.

Quick answer: Add a function to your child theme’s functions.php hooked to login_enqueue_scripts that prints CSS to replace the logo (#login h1 a) and change the background. Then use the login_headerurl and login_headertext filters so the logo links to your site. Or install a plugin like LoginPress for a visual editor.

The default WordPress login page

By default, the WordPress login screen at /wp-login.php (or /wp-admin/) looks the same on every site:

And here’s our customized WordPress login page:

We simply replaced the WordPress logo with our site logo and changed the light grey background to black. It’s a small change, but it makes a big difference to branding.

How to customize the WordPress login page logo and CSS

Add this code to your child theme’s functions.php file, or to a code snippets plugin. Back up the file first: a typo in functions.php can take your site offline, and you’d need FTP or your host’s file manager to fix it.

function qot_login_styles() { ?>
  <style>
    #login h1 a, .login h1 a {
      background-image: url( "<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/logo.png" );
      width: 200px;
      height: 30px;
      background-size: 200px auto;
      background-repeat: no-repeat;
    }
    body.login { background: #000; }
    .login form { background: #333; border: 0; }
    .login label { color: #fff; }
    .login #nav a, .login #backtoblog a { color: #ccc; }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'qot_login_styles' );

What it does:

1. Replaces the logo: the first rule swaps the WordPress logo for your own image, stored in your theme’s images folder. Set the width and height to your logo’s size. Upload a logo at twice that size so it looks sharp on retina and 4K screens, or use an SVG.
2. Changes the colours: the rest sets a black background, a dark grey login box, and lighter text and links so everything stays readable. Pick colours that match your brand.

WordPress recommends the login_enqueue_scripts hook for login page styles. The older login_head hook, which we used when we first wrote this post, still works, but login_enqueue_scripts is the documented way.

Link the logo to your site

By default, the login logo links to WordPress.org. Point it at your homepage instead:

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

Use a separate stylesheet (optional)

For larger designs, put your CSS in a file such as login.css in your child theme and load it properly:

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

This is also the cleanest way if you already use custom CSS for the WordPress editor.

No-code option: use a plugin

If you’d rather not edit code, plugins like LoginPress let you change the logo, background, colours and form style visually in the Customizer. Some themes, such as Kadence and Astra, also include login page options.

Don’t edit WordPress core files

Years ago, a quick trick was to replace the WordPress logo image via FTP in the wp-admin folder. Avoid that today: WordPress updates overwrite core files, so your logo disappears with the next update. Use the theme code or a plugin instead.

Make the login page secure too

While you’re customizing the login page, protect it as well: use strong passwords, turn on two-factor authentication with a security plugin, and limit login attempts. If you ever get locked out, here’s how to change a WordPress password with phpMyAdmin.

Frequently asked questions

Will my custom login page survive WordPress updates?

Yes, if you add the code to a child theme or plugin. Code in a parent theme’s functions.php is lost when the theme updates.

What size should my login logo be?

The default area is 84 × 84 pixels, but you can set any width and height in CSS. Around 200–320 pixels wide works well, with a 2x image for sharp display.

Can I change the login page URL?

Yes, with a security plugin that offers a custom login URL. It reduces bot traffic but isn’t a substitute for strong passwords and 2FA.