Custom WordPress Login Logo

You don’t have favorites among your children, but you do have allies.
–Zadie Smith

You’re a designer so ultimately, you’re something of a performer wont to wow observers with impressive feats of legerdemain; you always have a card up your sleeve.

Note: this is a bit of a rambling intro. You can safely skip down to the “Defining the function” section.

That card up your sleeve, though, is just a party trick. Your loyal Dribbble gawkers (and your mom) think its cool but otherwise only your super local clients think it solves their problem. Long story short: your card is a bit parochial, sorry to say. It doesn’t keep you Ron Burgundy “San Diego” classy.

Luckily, WordPress does. Even before your clients know what they want, you already know theres a WordPress function for that! Of all your bratty and entitled design kids, WP is the least entitled. You can mostly tell it what to do and it will (for the most part) do just that.

More to the point, when you finally get that whopper of a gig that encompasses everything from branding to interactive, sometimes it helps to shelve the shenanigans. You’re gonna be designing a logo that eventually will be animated (hopefully by some other super talented schmoe) but in between it all, there will be a website. A ha! Website! That website, you promptly decide, will run on WordPress. Practical, intuitive, client will understand it quickly, etcetera.

Once you start solving the branding problem—long before you inevitably arrive at Descartes’s “Cogito ergo sum”—you open-mindedly set off on the unfathomably grueling quest to find your client’s identity.

Apparently you graduated from college with a degree that allows someone else to pay you to tell them who they are! They actually dole out degrees for this! Its absurd.

Naturally, because you willingly took that fat 50% multi-zero deposit which with a mama-would-be-proud grin promised nothing short of glorious results, must arrive at some sort of campaign, graphic, exposé, etc that describes to your client whom, effectively, they are. You, having only recently met them (and I mean met in the email, Skype and twitter but never physically met, met sense) will convincingly deliver unto them their very purpose of being.

Good luck to you! I really can’t help you there. In reality, as far as branding, you’re on your own. Typically, though, if you’re solving a comprehensive problem, you’ll at a minimum have to deliver a logo. That logo will get emblazoned on passé print collateral and will inevitably get used in web media.

If you’re lucky enough to get an all-in-one, you’ll want to marry all things and create a cohesive brand image. When WordPress comes into that picture, you’ll likely want to replace the WP branding with your client’s. At the very least, on the login page.

Naturally, there’s function for that!!!

WordPress is beautiful. As of version 3.8, the admin screens are simplified, streamlined and stripped of extraneous design fluff and polished to near-perfect minimalism.

Before logging in to this beautiful admin area however, you come upon the very familiar log-in page. As discussed in Style the Visual Editor, if you’ve taken the time to craft your theme ever so beautifully, sometimes all a theme needs to push it from good to great is that extra touch of custom[ized] detail.

Not that there’s anything wrong with the WordPress default UI in and of itself but perhaps — for the sake of branding and to help complete the illusion of cohesiveness — what logo accompanies your theme makes more sense than the default iconic W that sits atop the log-in form.

Luckily, its a rather simple thing to change out the default iconic W for your own custom logo.

Defining the function

Before we get into defining the function, its important to understand the markup and styles. This is what the relevant part of the WordPress login page looks like:

<body class="login login-action-login wp-core-ui">
  <div id="login">
    <h1>
      <a href="http://wordpress.org/" title="Powered by WordPress">noms</a>
    </h1>
    <form name="loginform" id="loginform" action="/wp-login.php" method="post">
      <!-- login form fields here -->
    </form>
    <!--  additional page content -->
  </div>
  <!--  additional page content -->
</body>

WordPress targets the <a> inside the <h1> and inserts the logo as a background-image. If you view source while on the wp-login page, you’ll find that in wp-admin.css, WordPress is declaring styles for .login h1 a {}

There are two options to define and overwrite styles for this:

  1. Embedded stylesheets or
  2. Linked stylesheets.

Embedded Stylesheets

With this approach, you define a function that outputs your desired CSS right in the <head> by using the login_enqueue_scripts hook. In functions.php, you’d include the following function:

function butter_login_logo() { ?>
  <style type="text/css">
    body.login div#login h1 a {
    background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/butter-login-logo.png);
  }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'butter_login_logo' );

The above function butter_login_logo() uses the login_enqueue_scripts hook to output our embedded style in the <head> section of the login page. Notice that while the core-defined CSS for outputting the logo is simply .login h1 a {} we’re being a lot more specific with our declaration: body.login div#login h1 a {}

This is because, in CSS, the more specific your declarations, the more precedence they take. In addition, embedded stylesheets (styles that appear in the <head>) take more precedence over linked stylesheets.

With the above function in place, all you have to do is make sure that you have an image file (your custom logo) named login-logo.png placed inside the image/ directory of your theme.

Linked Stylesheets

You can essentially style and customize every element on the login screen: the logo, the form and form fields, the background, etc. For that fact, it might make sense—even if our only interest currently is in the logo—to put the styles in a separate CSS file as opposed to outputting them directly in the. This way as the build continues and if you should need to, you can easily update your styles.

We’re still going to be using the login_enqueue_scripts hook but instead of outputting our embedded stylesheet, we’ll use a linked stylesheet.

Start by creating a new CSS file, name it e.g. custom-login-styles.css (or whatever you prefer, just make sure to adjust the function accordingly) and save it in the css/ folder inside your theme directory.

As before we define the function like so:

function butter_login_styles() { ?>
  <link rel="stylesheet" id="custom_login_styles"  href="<?php echo get_stylesheet_directory_uri() . 'css/butter-login-styles.css'; ?>" type="text/css" media="all" />
  <?php }
add_action( 'login_enqueue_scripts', 'butter_login_styles' );

With that in place, while on the login screen, WordPress will now link to your new butter-login-styles.css and what CSS declarations are present will be applied.

In the newly created butter-login-styles.css, target body.login div#login h1 a {} and set your logo as the background. e.g.

body.login div#login h1 a {
  background-image: url(../images/login-logo.png);
}

The WordPress Codex provides the following highly specific CSS selectors that you can use in the stylesheet you just created to customize the look of the login page.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}