Creating a client friendly login screen

The result of adding custom code and CSS.

WordPress custom login screen — WordPress – custom login screen

I enqueued (fetched) the theme stylesheet in this code. It should be added to the functions file of the child theme or a code snippet plugin.

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

The CSS I added directly to the child theme stylesheet. It can also be added to a code plugin, into the customizer or probably somewhere else.

/* Customizing the login screen. */

/* Add your own background image */
body.login {
 background: #fbc44e url('https://dev.easywebdesigntutorials.com/wp-content/uploads/Blue-strips.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: #EEE;
 padding-top: 0;
}
 
#login {
 margin: 0 auto;
 padding: 30px;
}

#login h1 { 
 padding-top: 20px;
}
 
 /* Add your logo here */ 
#login h1 a { 
 width: 120px;
 height: 120px;
 opacity: 0.8;
 background: url('https://dev.easywebdesigntutorials.com/wp-content/uploads/ball.png') no-repeat left top;
 }
 
 
#login form { 
 box-shadow:0 2px 3px #444 !important;
 border-radius: 7px;
 background: #eeecec;
 font-size: 18px;
 opacity: 0.8;
}

.login label {
 font-size: 14px;
}
 
/* Lost your password? and back to site text. */ 
.login #backtoblog a, .login #nav a {
    text-decoration: none;
    color: #50575e;
}
 
 /* Lost your password? link */
.login #nav a {
 color: #0085ba; 
 font-size: 18px;
 padding: 5px 15px 5px 15px;
 
 background: #eeecec;
 border-radius: 3px; 
 opacity: 0.55;
}

.login #nav {
	margin-top: -1px;
	margin-left: 20px;
}

/* Back to site arrow and text */
.login  #backtoblog a {
  color: #0085ba; 
  
  padding: 9px;		
  background: #eeecec;
  border-radius: 3px; 
  opacity: 0.55;
}

.login #backtoblog {
	margin: 8px 0 0 20px;
}

.login .message, .press-this #message {
 background-color: #fff;
 border-left: 4px solid #7ad03a;
 
 box-shadow: 0 4px 18px #1D2736;
 border-radius: 5px;
}

/* Timed out pop up dialog box */
#wp-auth-check-wrap #wp-auth-check {
 position: fixed;
 left: 50%;
 overflow: hidden;
 top: 40px;
 bottom: 20px;
 max-height: 415px;
 width: 500px; /* changed */
 margin: 0 0 0 -190px;
 padding: 30px 0 0;
 background-color: #eee;
 z-index: 1000011;
 -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.3);
 box-shadow: 0 3px 6px rgba(0,0,0,.3);
}

Adding code into an external php file

Lets say you got lots of code snippets you want to add to your functions.php file.
One way is to add them into external php files including the following code in your functions file:

include_once( get_stylesheet_directory() . '/lib/custom-login.php' );

You can add multiple php files this way.

To add an external CSS stylesheet

// Add a custom CSS stylesheet. 
add_action( 'wp_enqueue_scripts', 'load_custom_style_sheet' );
function load_custom_style_sheet() {
wp_enqueue_style( 'custom-stylesheet', get_stylesheet_directory() . '/custom-login.css' , array(), 1.0);
}

Adding additional words to the login form.

The following was added for a customizer where two languages where used. English and Portuguese.

// https://github.com/JiveDig/baseline/blob/master/functions.php
/**
* Change login logo
* Max image width should be 320px
* @link http://andrew.hedges.name/experiments/aspect_ratio/
*/
add_action('login_head', 'tsm_custom_dashboard_logo');
function tsm_custom_dashboard_logo() {
echo '<style type="text/css">
body.login {
background-color: #fff;
/* background: #fbc44e url(IMAGE URL LINK) no-repeat center center fixed; */
}

#login {
margin: 25px auto;
padding: 15px;
width: 440px;
}

.login h1 a {
background-image:url(IMAGE URL LINK) !important;
background-size: 300px auto !important;
width: 100% !important;
height: 100px !important;

}

#login form { 
box-shadow:0 1px 2px #444 !important;
border-radius: 7px;
background: #eeecec;
font-size: 18px;
}

.login #nav {
font-size: 18px; 
}

</style>';
}

// Remember Me is checked
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

//* Add custom message to WordPress login page - https://smallenvelop.com/add-custom-message-wordpress-login-page/
function smallenvelop_login_message( $message ) {
if ( empty($message) ){
return "<p><strong>English - português</strong></p>
<p>Username or Email Address = Nome de Usuário ou Endereço de Email</p> 
<p>Password = Senha</p> 
<p>Remember Me = Lembre de mim</p>
<p> Register | Lost your password? = Cadastre-se | Perdeu sua senha?</p>
<p> Back to Human Rights Angola = De volta aos direitos humanos Angola </p> <p></p>";
} else {
return $message;
}
}

add_filter( 'login_message', 'smallenvelop_login_message' );

Resources:

https://github.com/JiveDig/baseline/blob/master/functions.php

codex.wordpress.org/Customizing_the_Login_Form
smallenvelop.com/add-custom-message-wordpress-login-page
wordpress.stackexchange.com/questions/76618/modify-wp-login-labels-username-to-email
https://wpsnipp.com/index.php/functions-php/login-with-username-or-email-address/

WordPress login plugins:
https://wordpress.org/plugins/custom-login/
https://www.hongkiat.com/blog/wordpress-plugins-customize-login-page/

This tutorial was originally published 9 February 2016.