Creating a client friendly login screen | Easy Web Design Tutorials

How to give the customer a customized login screen.

The finished results looks like this:
(I believe the image was purchased some time ago through Medialoot.com)

A custom Login screen

Inside the Functions.php

The following are code snippets that can be added to the child theme functions.php file.
Or in a custom-functions plugin. Or as an external file included into the functions.php file.

<?php

/* Custom login code - Modified from: https://premium.wpmudev.org/blog/customize-login-page/ */

// URL link of logo.
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

// Name of site alt text.
function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

// Remove error message
function login_error_override()
{
 return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');


// 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>";
}

The CSS

Add the following to your stylesheet. (Normally style.css.)

/* Add your own background image */
body.login {
 background: #fbc44e url('../images/Blue-bubbles.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: 294px;
 height: 132px;
 background: url('../images/easy-web-design-tutorials-logo.png') no-repeat left top; */
 }
 
 
#login form { 
 box-shadow:0 2px 3px #444 !important;
 border-radius: 7px;
 background: #eeecec;
 font-size: 18px;
}

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

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

/* Hides back to site arrow and text */
p#backtoblog {
 display: none;
}


/* 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);
}

Another option for the login screen. The following I have added above the form the English words with the Portuguese beside so that Portuguese readers will understand the English words.

Code used. Insert the following into the functions.php file or another file.

// 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(https://direitoshumanosangola.org/dev/wp-content/uploads/2018/04/ScanStockPhoto_image_3547191.jpg) no-repeat center center fixed; */
}

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

.login h1 a {
background-image:url(https://direitoshumanosangola.org/dev/wp-content/uploads/2018/10/governance-group-logo-smaller-1.png) !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:

My main resource is: https://premium.wpmudev.org/blog/customize-login-page/

https://github.com/JiveDig/baseline/blob/master/functions.php
https://wpsnipp.com/index.php/functions-php/login-with-username-or-email-address
https://www.yourbusybee.com/easily-modify-wordpress-login-page-code-snippets/

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/