How to Change the WordPress Admin Login or Signup Logo Easily
Last updated on
WordPress is without a doubt one of the most popular content management systems (CMS) being used today. The reason for this is that WordPress is cheap, in fact free as well as being open source so it’s easy to get started and then customise it depending on budget. As a WordPress developer an often requirement is to add personalisation for each client and one of those things could be modifying the admin interface for your client. One of the quick ways to do that is to replace the WordPress logo for the client logo on login. We’ll be changing the logo without a plugin.
The WordPress logo on the login screen is an image but it’s shown through the use of the background-image CSS property. To change the logo first we’ll need to add this function to the functions.php file. What this code does is that it specifies that you want to load a stylesheet for the admin area. As well as adding that code you’ll also need to create the CSS file (in this case admin.css) in your template directory.
// Update CSS within in Admin
function admin_style() {
wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');
By this point your WordPress site should be loading in the stylesheet in the admin area but currently the CSS file is blank inside, so let’s add some CSS in. The selector that WordPress uses is .login h1 a, with this in mind the following CSS should work:
body .login h1 a {
background-image: url('path/to/client-logo.png');
}The CSS above should change the default WordPress logo to an image of your choosing. You may need to adjust background-size dimensions to ensure the image displays correctly. These little tweaks make the difference and can impress your clients that little bit more.
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects