• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

9 February - 2016 By Paal Joachim Add a Comment
Last updated on: October 5, 2018

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)

WordPress Login screen

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.

multilingual-dual-language-login-screen

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/

 

Share this:

  • Email

Categories: Developer, How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Leave a Comment Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.