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

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

Like thePixelPixie on Facebook

Leave a Reply

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

Ready to chat about how ThePixelPixie can help?