Before giving a client access to their brand new website, customizing the login page to reflect the branding / design of the website is just icing on the cake. Clients always mention how nice it is and really appreciate the attention to detail. Putting in the work to achieve this really isn’t all that tough either. In just a few minutes of work, you can give the wordpress login page a new look that will resemble the website you’ve created and make the user experience for the website owner more seamless.
Also read: Content Marketing Tactics for Thought Leaders
Customizing the WordPress Login
Let’s take a look at where to get started:
First off we need to create a new css file that will contain the styles we’d like to apply to the login page. Let’s call this ‘style-login.css’ for the purposes of this tutorial. We’ll need to upload this file to the server and call it in the next step.
Next, navigate to the functions.php file and paste in the following code at the bottom:
function my_login_stylesheet() { ?>
<link rel="stylesheet" id="custom_wp_admin_css" href="<?php echo get_bloginfo( 'template_directory' ) . '/css/style-login.css'; ?>" type="text/css" media="all" />
<?php }
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );
Be sure to change the path to where you’ve created your new css file ‘style-login.css’.
That’s it! Now we can begin styling the various elements on the login page. Probably the first thing you’ll want to do is replace the wordpress logo with the logo of your client. To do this, we’ll target:
body.login div#login h1 a { background-image: url('../images/site-login-logo.png'); }
Again, you’ll want to change the path of the ‘background-image’ to that of your logo. The path is relative to where you’ve uploaded the ‘style-login.css’ file. In addition, you can use any other css properties to get the logo looking great.
The fun doesn’t stop there however. You can target just about any <html> element on the page. The key is to be as specific as possible when targeting each element so that your properties will override the properties targeted by the default wordpress css file. To make things a little easier for you, here is a list of the elements you can change to create a totally customized login page:
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}
Making every aspect of your client’s site look great isn’t all you should be doing for them. You should also make sure their site is secure— and we can help you do just that. Check out our 5 WordPress Security Tips to make sure you’ve got a secure site.
Author: Dylan Dunlop
