WP-Login branding in 25 lines of code – without plugin

There are plenty of plugins and snippets on how to customize your website’s wp-login page. Unfortunately WordPress itself doesn’t provide settings page for thist. But thanks to hooks + CSS + JS it is possible to customize UI components there.

Here is the code piece that i wrote for my own websites, which includes some basic color changes, logo and link replacement etc.

add_action( 'login_enqueue_scripts', function(){
$color_code_from_your_logo='#e87817';//change this to own RGB code
?><style type="text/css">
  #login h1 a, .login h1 a {
  background-image: url(https://yoursite.com/logo.png);
  height:68px;
  width:auto;
  background-size: contain;
  background-repeat: no-repeat;
  padding-bottom: 5px;
  }
  #login .button {background: <?php echo $color_code_from_your_logo;?>;border: none;}
  #login .dashicons{color:white}
  .login .message, .login .success{border-left:4px solid <?php echo $color_code_from_your_logo;?> !important;}
  #loginform,#registerform{width:300px}
  #login{width:350px !important}
  input[type=checkbox]:focus, input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=radio]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus {
    border-color: <?php echo $color_code_from_your_logo;?> !important;
    box-shadow: 0 0 0 1px <?php echo $color_code_from_your_logo;?> !important;
  }
  </style>
  <script>
   document.querySelector('#login a').href="<?php echo home_url();?>";
  </script><?php 
});

Once you put this to your theme’s functions.php, try how it looks like in Incognito browser. Then start customizing sizes, colors etc. given in this code.