The WordPress login page, while functional, provides such a basic once size fits all solution for logging into the back end of your site. This will be a quick tutorial on how to change the default logo to your logo & the background to anything you want.
Now before I show you the code… here is what the final product will look like:
Step 1
The first thing we will do is update the functions.php in your theme. We will be linking it to a new CSS style sheet called custom-logins.css which we will create in the next step.
Add the following code to the bottom of your functions.php file.
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'url to your custom-login.css file" />';
}
add_action('login_head', 'my_custom_login');
Step 2
Now were going to create a new ccs file & name it custom-logins.css or what ever you want as long as you link it correctly… Now just style body.login #login h1 a as you see fit for the logo & the same for body.login for the login.
Here is an example on how your code should look in the end.
body.login #login h1 a { background: url('url to your logo image') no-repeat top transparent; height: your height; width: your width; } body.login { background-attachment: fixed; background:url('url to your background image') no-repeat center center; min-height:100%; background-size:cover; }
Now there you have it, a quick & easy way to customize the WordPress login screen for your clients.
Comments are closed.