How To Change The Logo On The WordPress Admin Login

 — 

Looking to change the logo on the WordPress admin login page? All you may need to do is add some functions to restyle your WordPress login page.

Changing the logo of your WordPress admin login

Adding Your Logo

To add your logo, you need to tell WordPress where your logo file is located. You can do this by following the steps below.

  1. Make sure that your theme has theme support for using a custom logo;
  2. Navigate to Appearance > Customise from your WordPress Dashboard;
  3. Set your logo by clicking Site Identity.

Adding The Style

You need to access your WordPress theme’s functions.php file to restyle the admin login page. You can do this by following the steps below.

  1. Navigate to Appearance > Editor > Theme Functions from your WordPress Dashboard;
  2. Add in the code below and edit the hex colour codes to match your theme;
  3. Click Update File to save the changes.
function custom_login_logo() {
     echo '<style type="text/css">
     body {background-color: #000000 !important;}
     a {color: #FFFFFF !important;}
     h1 a {
          background-image:url("' . wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' )[0] . '") !important;
          -webkit-background-size: contain !important;
          background-size: contain !important;
          background-position: bottom !important;
          height: 150px !important;
          width: 100% !important;
          outline: none !important;}
     h1 a:focus {
          -webkit-box-shadow: none !important;
          box-shadow: none !important;}
     </style>';
}
add_action( 'login_head', 'custom_login_logo' );

Changing the logo URL of your WordPress admin login

You may also want to change the default URL on the logo from the WordPress website to your own. You can do this by following the steps below.

  1. Navigate to Appearance > Editor > Theme Functions in your WordPress Dashboard;
  2. Add in the code below;
  3. Click Update File to save the changes.
function custom_loginlogo_url( $url ) {
 return get_bloginfo( 'url' );
}

add_filter( 'login_headerurl', 'custom_loginlogo_url' );