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:
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.
Inside of this group, you will create the following 3 fields:
When you’re done, the area should look something like this:
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.
css
folder.css
folder, create a file called login.css
./* 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:
js
folder inside your child theme.login.js
.
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.
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.