Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

How to Change the WordPress Admin Login Logo

By  on  

There are numerous content management systems that thrive these days but none are as prolific as WordPress. Every client wants the ability to change their website at a moment's notice and they want to do it themselves, and again, WordPress is the best fit for that. You fit the client with WordPress, customize it with plugins for the features they need, and give them the login URL...where they would see a WordPress logo...which cheapens the work you've done. Going the extra mile to customize the admin interface for your client will make a world of difference, the most prominent of changes is showing the client's logo at the admin login screen.

The logo displayed at the admin login screen is an image but it's displayed via CSS background-image. To change that image, you'll need to change a CSS selector within admin, and the safest way to do that is with a custom WordPress admin stylesheet:

// 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');

The selector that WordPress uses or the log is .login h1 a, so to safely change the logo, the following specificity update is a good bet:

body .login h1 a {
  background-image: url('path/to/client-logo.png');
}

The CSS snippet above will 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.

Most clients wont have a concept of what WordPress is, nor should they need to -- they simply want a website admin panel that looks like it was made just for them...and branding is the easiest way to do that.

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Create a Simple Slideshow Using MooTools, Part II: Controls and Events

    Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by: Adding "Next" and "Previous" controls. Adding...

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

Discussion

  1. Vladimir

    This is work for me:

    function admin_style() {
    wp_enqueue_style('admin-styles', get_template_directory_uri().'/css/admin.css');
}
add_action('login_enqueue_scripts', 'admin_style');

    body.login #login h1 a {
    background-image: url('../img/logo.png');
}
  2. Noah Owen

    Thank you for sharing an amazing guide for changing logo.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!