Customize the Default WordPress Login Page Without Plugins

Let’s take a look at how to customize the default WordPress login page without using any plugins.

Changing the Logo

First, open your functions.php file in your child theme and drop in the following function:

function my_loginlogo() {
  echo '<style type="text/css">
    h1 a {
      background-image: url(' . get_template_directory_uri() . '/path/to/your/logo.png) !important;
    }
  </style>';
}
add_action('login_head', 'my_loginlogo');

Just keep in mind that get_template_directory_uri() returns the root directory of your parent theme. To return the root directory of your child theme, use get_stylesheet_directory_uri(). If your logo is someplace else, like in your uploads directory for example, you can use the wp_upload_dir() function instead.

A Note about wp_upload_dir()

wp_upload_dir() actually returns an array, so if you call it in a function like this, expecting it to return a url or a file path, you’ll end up getting an error, and could potentially lock you out of your site.

In my case, I’ve saved my logo in my uploads directory, so I used the ['baseurl'] item in the returned array. Here’s another example of what your image URL path could look like from the above function call:

function my_loginlogo() {
  echo '<style type="text/css">
  h1 a {
    background-image: url(' . wp_upload_dir()['baseurl'] . ' path/to/your/logo.png) !important;
    }
</style>';
}
add_action('login_head', 'my_loginlogo');

Also, don’t forget to use single quotes inside your array selector for wp_upload_dir(). If you try something like wp_upload_dir()[baseurl], it won’t work.

Change the Logo URL

Now that you’ve got the custom logo loaded, you can have it link to anywhere with another functions.php call

function my_loginURL() {
    return 'https://www.myawesomelink.com';
}
add_filter('login_headerurl', 'my_loginURL');

Change the Logo Tooltip

If you’re getting an annoying tooltip on your logo that says “WordPress” by default, you can change it like so:

function my_loginURLtext() {
    return 'A Better Tooltip or nothing at all';
}
add_filter('login_headertitle', 'my_loginURLtext');

Add Custom CSS

Enqueue the new stylesheet, specifically for the login page like so:

function my_logincustomCSSfile() {
    wp_enqueue_style('login-styles', get_stylesheet_directory_uri() . '/path/to/your/styles.css');
}
add_action('login_enqueue_scripts', 'my_logincustomCSSfile');

Add Custom Link(s) Below Form

function my_loginfooter() { ?>
    <p style="text-align: center; margin-top: 1em;">
    <a style="text-decoration: none;" href="https://www.myawesomesite.com/">If you have any questions, visit my awesome site
        </a>
    </p>
<?php }
add_action('login_footer','my_loginfooter');

Bonus: Redirecting Users After Logging In

function my_loginredrect( $redirect_to, $request, $user ) {
  if ( isset( $user->roles ) && is_array( $user->roles ) ) {
    if( in_array('administrator', $user->roles)) {
      return admin_url();
    } else {
      return site_url();
    }
  } else {
      return site_url();
  }
}
 
add_filter('login_redirect', 'my_loginredrect', 10, 3);

Hiding or Changing the Login Page URL

It should be noted that this isn’t recommended from a “security through obscurity” standpoint as elaborated on by the CEO of Wordfence.

But if you still want to proceed, it’s pretty straightforward, again, without using plugins, just duplicate your wp-login.php file and name it something else like new-login.php. Inside the new file, you’ll want to run a search and replace for wp-login within that file and replace it with whatever you named your new login file. So in my example, you’ll run a search within wp-login.php and replace every instance of wp-login with new-login

Next, you’ll need to register your new login URL in functions.php:

/*
 * Change WP Login file URL using "login_url" filter hook
 * https://developer.wordpress.org/reference/hooks/login_url/
 */
add_filter( 'login_url', 'custom_login_url', PHP_INT_MAX );
function custom_login_url( $login_url ) {
	$login_url = site_url( 'new-login.php', 'login' );	
    return $login_url;
}

Once you’ve dropped that in your functions.php and uploaded your new-login.php file, you’ll want to test your new login URL to ensure it’s working properly. If everything checks out, you can trash your original wp-login.php file.