Customizing Your WordPress Login Page
We love WordPress, that must be said. In fact, most of our clients websites are built using WordPress. That said, if you are anything like us, you would occasionally want to customize certain aspects of the WordPress installation. Today, lets customize the WordPress Login Page.
By default, the WordPress Login Page looks like, well, WordPress. So, generally, we would like to make it look different, this adds a layer of professionalism to the website overall (especially if you allow multiple users login).
Creating the Custom Login Page
Lets start by creating a login.css file. We will place this in our WordPress theme root directory (You can also create a plugin to implement this, but for the sake of simplicity we’ll assume you can edit your theme).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body.login { | |
background: #242628; } | |
.login h1 { | |
background-color: transparent; } | |
.login h1 a { | |
background-image: url("../logo.png"); /* Change Me to the correct path to your logo */ | |
-webkit-background-size: 100px 100px; | |
background-size: 100px 100px; | |
width: 100px; | |
height: 100px; | |
margin-bottom: 0; | |
padding-bottom: 10px; | |
padding-top: 10px; | |
background-position: center; } | |
.login form { | |
margin-top: 0; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
background-color: transparent; } | |
.login form input[type=text], .login form input[type=password] { | |
margin-top: 10px; | |
font-size: 16px; | |
padding: 15px; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
color: #888; } | |
.login p.forgetmenot, .login #login_error, .login p#backtoblog, .login p#nav { | |
display: none; } | |
.login #wp-submit { | |
margin-top: 10px; | |
float: none; | |
width: 100%; | |
height: 45px; | |
border: 0; | |
border-radius: 0; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
background-color: #d41343; | |
text-transform: uppercase; } |
Now, we need to load the CSS we just created. Edit your themes functions.php and input the next blocks of code. This block will load the custom CSS file so the WordPress login page can use it when styling. It will also hide the “Remember Me”, “Forgot Password”, and “Log in error” messages. This can be useful for security.
In your functions.php file, append this to the bottom:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if ( ! function_exists( 'ck_custom_login_css' ) ) | |
{ | |
/** | |
* Load the custom login page CSS. | |
* | |
* @return void. | |
*/ | |
function ck_custom_login_css() | |
{ | |
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login.css" />'; | |
} | |
} | |
add_action('login_head', 'ck_custom_login_css'); | |
if ( ! function_exists('ck_rememberme_checked')) | |
{ | |
/** | |
* Checks the "remember me" by default. | |
* | |
* @return void | |
*/ | |
function ck_rememberme_checked() | |
{ | |
echo "<script>document.getElementById('rememberme').checked = true;</script>"; | |
} | |
} | |
add_action('login_footer', 'ck_rememberme_checked'); | |
// Hides the login error message | |
add_filter( 'login_errors', create_function( '$a', "return null;" ) ); | |
// Changes login logo URL to your homepage | |
add_filter( 'login_headerurl', create_function( '$a', "return '".get_bloginfo('url')."';" ) ); | |
// Change logo link title to your site name | |
add_filter( 'login_headertitle', create_function( '$a', "return '".get_bloginfo('name')."';" ) ); |
There we go, your WordPress login page should be looking pretty hot right about now. You can change the colors of your CSS file to reflect your brand. Here’s how we have made ours look.