Skip to content
No results
  • Tutorials
  • Blog
  • About
    • Freelance
  • Contact
Easy Web Design Tutorials

WordPress tutorials and more

  • Tutorials
  • Blog
  • About
    • Freelance
  • Contact
Easy Web Design Tutorials

WordPress tutorials and more

Creating a client friendly login screen

  • 03/05/2022
  • Development, WordPress
  • Login Screen
Home Tutorials WordPress Development 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.

Tutorial Tags
# Login Screen
Share the article:
WordPress adding columns reordering and content
Previous Tutorial Adjusting list columns in backend
Next Tutorial Contact Form 7 Customization tutorial
Contact Form 7 WordPress plugin Form screen

Related Posts

Gullhuset WooCommerce products archive page

On hover – switch WooCommerce product image to gallery image

  • 18/05/2025
  • Development / WooCommerce / WordPress
Attach file to WooCommerce order email

Attach files to WooCommerce emails

  • 14/05/2025
  • Development / WooCommerce / WordPress
Prime Mover – Migrate WordPress Website & Backups

Using Prime Mover WordPress backup and clone plugin

  • 10/05/2025
  • Plugins / WordPress
File Manager - new WordPress web site

Install WordPress manually

  • 09/05/2025
  • Development / WordPress
Break Row and styling of Post titles through the Gutenberg Code Editor.

How to style and split the text in the post title of the Gutenberg editor

  • 07/05/2025
  • Gutenberg / WordPress
WordPress Blog frontend

An introduction to WordPress

  • 15/12/2024
  • Development / WordPress

Leave a ReplyCancel Reply

Your email address will not be published. Required fields are marked *

Get a real sustainable laptop: https://frame.work/

The laptop is 13.5″.
Here is a comparison between 13.5 and 15 inch screens.

Need to improve your plugin but do not know how? Connect and I will go through and find areas that need improvement.

Copyright © 2025 - The awesome WordPress Theme by CreativeThemes
Check out the Blocksy theme.