Posted: Oct 04, 2015 / Last modified: February 1st, 2017 TagsWordPress Leave a Comment

You’ve played with the simple (at the very bottom) and intermediate ways of customizing your login page, but now you’re ready for something way cooler-looking, right?

To get us started, here’s what we’ll end up with at the end:

Create your own custom login screen

For this you will want to use 2 plugins: Advanced Custom Fields, and the pro add-on Advanced Custom Fields: Options Page. Note that you can easily do this without either of these plugins by simply using the default items referenced in the various code below. But if you want the ability to change these items easily from the admin panel, using these 2 plugins will make the process much simpler. If you don’t want to use these plugins, skip to code to add to your functions page.

Once you have installed and activated these 2 plugins, create a group inside “Custom Fields” called Login.

Inside of this group, you will create the following 3 fields:

  1. Login Logo (login_logo) – choose Field Type Image, and select Return Value Image Object.
  2. Login Background Color (login_bkg_color) – Field Type should be Color Picker.
  3. Login Background Image (login_bkg_image) – The Field Type and Return Value should be the same as for the Login Logo.

    When you’re done, the area should look something like this:

  4. In the Location box below these fields you have created, you will next assign the following Rules:
    Show this field group if should be Options Page
    is equal to
    Options

  5. Next, you’ll add the following code to your functions file 
    /** NEW LOGIN PAGE */
/**
 * Load a custom stylesheet on the login page
 */
if ( ! function_exists( 'ybb_custom_login_stylesheet' ) ) :
function ybb_custom_login_stylesheet() {

	// Load CSS
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/login.css' );

    // Load JavaScript
    wp_enqueue_script( 'custom-login', get_stylesheet_directory_uri() . '/js/login.js', 'jquery' );
}
endif;

add_action( 'login_enqueue_scripts', 'ybb_custom_login_stylesheet' );


/**
 * Load custom design styles from theme options
 */
if ( ! function_exists( 'ybb_custom_login_styles' ) ) :
function ybb_custom_login_styles() {

	$login_logo = get_field('login_logo', 'option');
	$login_logo_url = $login_logo['url'];
	$login_bg_color = get_field('login_bg_color', 'option', '');
	$login_bg_color = ($login_bg_color === '#') ? '' : $login_bg_color;
	$login_bg_image = get_field('login_bg_image', 'option');
	$login_bg_image_url = $login_bg_image['url'];
	$login_styles   = 'html { background: transparent !important; }';

	if (!empty($login_logo)) {
		$login_styles .= 'body.login div#login h1 a { background-image: url('.$login_logo_url.'); }'."n";
	}
	if (!empty($login_bg_color) || !empty('.$login_bg_image_url.')) {
		$login_styles .= 'html body.login { '."n";
		if (!empty($login_bg_color)) {
			$login_styles .= 'background-color: '.$login_bg_color.';'."n";
			if (empty($login_bg_image)) {
				$login_styles .= 'background-image: none;'."n";
			}
		}
		if (!empty($login_bg_image)) {
			$login_styles .= 'background-image: url('.$login_bg_image_url.');'."n";
		}
		$login_styles .= '}'."n";
	}

	if ( !empty($login_styles) ) {
	?>
		<style type="text/css">
			<?php echo  $login_styles; ?>
		</style>
	<?php

	}
}
endif;

add_action( 'login_enqueue_scripts', 'ybb_custom_login_styles' );
/** End New Login Page **/

    As you’ll notice in the above code, you need a few more files loaded into your child theme to make this work right.

  6. (if you don’t already have one) Create a css folder.
  7. Inside the css folder, create a file called login.css.
  8. Open that file and insert the following code 
    /* Custom login page styles */

body {
	padding: 0;
	margin: 0;
}


#login .message,
#login #login_error {
	padding: 15px;
	margin-bottom: 26px;
	border: 1px solid transparent;
	border-radius:3px;
}

#login .message a,
#login #login_error a {
	font-weight: bold;
}

#login .message,
#login #login_error {
	font-weight: 300;
	border-width: 2px;
	border-radius: 0;
}

.alert .alert-link,
#login .message a,
#login #login_error a,
.alert a {
	font-weight: normal;
	color: #fff;
	text-decoration: underline;
}

#login .message {
	background-color: #696f7a;
	border-color: #51565f;
	color: #f0f1f2;
}

#login #login_error {
	background-color: #ff0d24;
	border-color: #d90015;
	color: #ffffff;
}

body.login {
	background: url('../images/login-bgnd.jpg') no-repeat top center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#login {
	background: rgba(17,17,17,0.7);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	max-width: 100%;
	width: 80%;
	height: 100%;
	padding-top: 0%;
	padding-left: 10%;
	padding-right: 10%;
	margin-left: auto;
	margin-right: auto;
	display: table;

	position: relative;
	float: right;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

@media (min-width:768px) {
	#login {
		padding-left: 5%;
		padding-right: 5%;
		width: 45%;
		margin: 0;
	}
}

#login h1 {
	margin: 0 0 0 0;
}

#login h1 a {
	display: inline-block;
	height: 100px;
	width: 100%;
	max-width: 480px;
	margin: 0 auto 2em;
	background-image: url('../images/login-logo.png');
	-webkit-background-size: contain;
	background-size: contain;
	background-position: 50%;
	vertical-align: middle;
}

@media (min-width:768px) {
	#login h1 a {
		height: 200px;
	}
}

#loginform,
#login #lostpasswordform {
	max-width: 330px;
	padding: 15px 0;
	margin: 0 auto !important;
	background: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#loginform p,
#login #lostpasswordform p {
	margin-bottom: 0;
}

#loginform label,
#login #lostpasswordform label {
	color: #95979c;
	width: 100%;
	font-size: 15px;
}

#loginform .forgetmenot,
#login #lostpasswordform .forgetmenot {
	margin-bottom: 10px;
	font-weight: normal;
	float:none;
}

#loginform .forgetmenot label,
#login #lostpasswordform .forgetmenot label {
	line-height: 28px;
}

#loginform .forgetmenot #rememberme,
#login #lostpasswordform .forgetmenot #rememberme {
	margin: 0 2px 2px 0;
}

#loginform .forgetmenot #rememberme:focus,
#login #lostpasswordform .forgetmenot #rememberme:focus {
	outline: none;
}

#loginform input[type="text"],
#login #lostpasswordform input[type="text"],
#loginform input[type="password"],
#login #lostpasswordform input[type="password"] {
	height: auto;
	margin: 2px 6px 16px 0;
	padding: 6px 16px;
	font-size: 15px;
}

#loginform #user_login,
#login #lostpasswordform #user_login {
	margin-bottom: 5px;
}

#loginform #user_pass,
#login #lostpasswordform #user_pass {
	margin-bottom: 12px;
}

#loginform p.submit,
#login #lostpasswordform p.submit {
	text-align: center;
}

#loginform p.submit input[type="submit"],
#login #lostpasswordform p.submit input[type="submit"] {
	float: none;
	width: 100%;
	height: auto;
	-webkit-box-shadow: none;
	box-shadow: none;
	padding: 8px 16px;
	font-size: 16px;
	line-height: 1.6;
	border-radius: 3px;
	color: #ffffff;
	background-color: #6dc234;
	border-color: #6dc234;
}

#loginform p.submit input[type="submit"]:hover,
#login #lostpasswordform p.submit input[type="submit"]:hover,
#loginform p.submit input[type="submit"]:focus,
#login #lostpasswordform p.submit input[type="submit"]:focus,
#loginform p.submit input[type="submit"]:active,
#login #lostpasswordform p.submit input[type="submit"]:active,
#loginform p.submit input[type="submit"].active,
#login #lostpasswordform p.submit input[type="submit"].active,
.open>.dropdown-toggle#loginform p.submit input[type="submit"],
.open>.dropdown-toggle#login #lostpasswordform p.submit input[type="submit"] {
	color: #ffffff;
	background-color: #569a29;
	border-color: #529227;
}

#loginform p.submit input[type="submit"]:active,
#login #lostpasswordform p.submit input[type="submit"]:active,
#loginform p.submit input[type="submit"].active,
#login #lostpasswordform p.submit input[type="submit"].active,
.open>.dropdown-toggle#loginform p.submit input[type="submit"],
.open>.dropdown-toggle#login #lostpasswordform p.submit input[type="submit"] {
	background-image: none;
}

#loginform p.submit input[type="submit"].disabled,
#login #lostpasswordform p.submit input[type="submit"].disabled,
#loginform p.submit input[type="submit"][disabled],
#login #lostpasswordform p.submit input[type="submit"][disabled],
fieldset[disabled] #loginform p.submit input[type="submit"],
fieldset[disabled] #login #lostpasswordform p.submit input[type="submit"],
#loginform p.submit input[type="submit"].disabled:hover,
#login #lostpasswordform p.submit input[type="submit"].disabled:hover,
#loginform p.submit input[type="submit"][disabled]:hover,
#login #lostpasswordform p.submit input[type="submit"][disabled]:hover,
fieldset[disabled] #loginform p.submit input[type="submit"]:hover,
fieldset[disabled] #login #lostpasswordform p.submit input[type="submit"]:hover,
#loginform p.submit input[type="submit"].disabled:focus,
#login #lostpasswordform p.submit input[type="submit"].disabled:focus,
#loginform p.submit input[type="submit"][disabled]:focus,
#login #lostpasswordform p.submit input[type="submit"][disabled]:focus,
fieldset[disabled] #loginform p.submit input[type="submit"]:focus,
fieldset[disabled] #login #lostpasswordform p.submit input[type="submit"]:focus,
#loginform p.submit input[type="submit"].disabled:active,
#login #lostpasswordform p.submit input[type="submit"].disabled:active,
#loginform p.submit input[type="submit"][disabled]:active,
#login #lostpasswordform p.submit input[type="submit"][disabled]:active,
fieldset[disabled] #loginform p.submit input[type="submit"]:active,
fieldset[disabled] #login #lostpasswordform p.submit input[type="submit"]:active,
#loginform p.submit input[type="submit"].disabled.active,
#login #lostpasswordform p.submit input[type="submit"].disabled.active,
#loginform p.submit input[type="submit"][disabled].active,
#login #lostpasswordform p.submit input[type="submit"][disabled].active,
fieldset[disabled] #loginform p.submit input[type="submit"].active,
fieldset[disabled] #login #lostpasswordform p.submit input[type="submit"].active {
	background-color: #6dc234;
	border-color: #6dc234;
}

#loginform p.submit input[type="submit"] .badge,
#login #lostpasswordform p.submit input[type="submit"] .badge {
	color: #6dc234;
	background-color: #ffffff;
}

#login #nav,
#login #backtoblog {
	max-width: 330px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0;
}

#login #nav a,
#login #backtoblog a {
	color: #95979c;
}

#login #nav a:hover,
#login #backtoblog a:hover {
	color:#e9eaeb;
}

#login #nav {
	margin-top: 10px;
}

@media (min-width:768px) {
	#login #nav {
		margin-top: 24px;
	}
}

#login .message,
#login #login_error {
	max-width: 450px;
	margin: 1em auto;
	font-weight: 400 !important;
	border: none;
}

.mobile #login {
	padding: 20px;
}

.mobile #login h1 a {
	width: 100%;
	margin-bottom: 10px;
}

    You will notice in the above css that several image files are referenced. These are for default and will be overwitten by whatever is chosen in your Options page within the admin panel. You will want to make sure that these default files exist in your child theme’s images folder:

    login-logo.png (feel free to name this whatever you want, but it will need to match the CSS above)
    login-bgnd.jpg
  9. Next, (if you don’t already have one) create a js folder inside your child theme.
  10. Inside of that folder, create a file called login.js.
  11. Put the following code inside of that file 
    jQuery(document).ready(function($){

	// make sure the background covers on all devices
	$(window).resize( function(){
		// clear min-height
		$('html').css('min-height', '0');
		// get new value
		minHeight = $('#login').outerHeight();
		$('html').css('min-height', minHeight+'px');
	});

	// support mobile device rotation
	window.addEventListener("orientationchange", function() {
		$(window).trigger('resize');
	}, false);

	// trigger it to start
	$(window).trigger('resize');

});

    Save all of these files, and logout of your site. You should now see a default version of your login page with your customizations. To easily change this, simply log back in, scroll down to Options and choose your images and background color. Easy peasy.

Conclusion

This is obviously a somewhat higher-level of login page customization than might be needed. But it’s a fantastic additional opportunity for branding, and it leaves a lasing impression on your users/clients. It’s so easy to make these sorts of customizations, so why not do it?

Have you customized your login page in a unique way? Show us what you’ve done in the comments below.

thePixelPixie.com - WordPress boutique

Related posts

How to properly enqueue jQuery in a WordPress Site March 8, 2023
Group Posts under Category Titles – WordPress Loop November 7, 2021
Trouble getting style.css changes to load? December 1, 2020

Subscribe and receive my FREE eBook


4 MISTAKES You’re Making on Your Website that are Costing You MONEY!

  • This field is for validation purposes and should be left unchanged.

The Author

Save

Leave a 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.

Ready to chat about how ThePixelPixie can help?
Let's Get Started...
© 2000-2024 Copyright Laura Sage, aka ThePixelPixie.