Customizing the WP-Login form without playing with the WP Core
When creating a membership site with WordPress, it is often desirable to have a Login form that reflects the themeing of your site – not the standard WP-Login form.
There are some excellent plugins around that give a lot of flexibility around the login form (my fave is Theme My Login) however, with the updates coming through in WP 3.0 and other associated plugin updates, some of these plugins aren’t working….
Today, I’m going share how to change the formatting on the standard wp-login.php screen – without changing the wordpress core software.
You’ll need a few things to do this:
- Style sheet for login form – you can download a sample called custom-login.css by clicking here.
- Function to add to your functions.php file (in your theme folder). Download a copy from here so you can just copy and paste it in.
I also recommend you use the Firefox browser and have the Firebug add on installed, as this will help the styling of your login form.
Step 1: Upload the custom-login.css file to your theme folder
I use FTP to upload my files, but you can also use the file manager that is part of CPanel or if your administration panel provides one.
The custom-login.css file provided looks like this:
/*
Document : custom-login
Created on : July 12 2010
Author : Charly Leetham
Description: Style the WordPress Login page.
*/
html {background:#F9F9F9 !important;}
body{border-bottom-style:solid;border-bottom-width:30px;border-top-style:solid;border-top-width:30px;}
body, #wpbody, .form-table .pre {color:#333333;}
body.login {border-bottom-color:#464646;border-top-color:#464646;}
h1 a{background:url("/wp-admin/images/logo-login.gif") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:310px; height: 70px; margin: 0 auto}
#login {margin:15% auto;width:350px;}
form{background:none repeat scroll 0 0 #ffffff !important;}
As we progress through this tutorial, this file will be edited to match your theme.
Step 2: Add function to your theme functions file
Add the function located in the wp-login-screen-function.txt file to the functions.php file in your theme folder. This text must be added between the <?php and the ?> markers in the file.
I recommend pasting it at the bottom of the file just above the ?> marker to make it easy.
/*Styling the WP Login Screen */
function add_my_stylesheet() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login.css" />';
}
add_action('login_head', 'add_my_stylesheet');
This function will add the stylesheet custom-login.css to the header of wp-login.php automatically.
Step 3: Change the style in custom-login.css to change the background color of the login page
To change the background color of the wp-login.php screen, modify the style:
html {background:#F9F9F9 !important;}
This code uses a background color of #F9F9F9 – a light grey. Change the #F9F9F9 to match the background color of the main site.
To add a background image, change the code as follows:
html {background:#F9F9F9 url("thepathtoyourfile/filename.ext") repeat-x !important;}
The text thepathtoyourfile/filename.ext should be changed to be the exact location of the background image.
The text repeat-x may need to modified depending on the theme styling. I recommend using the style.css file, or Firebug, to get the correct syntax for this style.
Step 4: Change the WP logo for a custom logo (or remove the logo completely)
The logo on the wp-login screen is controlled by this style:
h1 a{background:url("/wp-admin/images/logo-login.gif") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:310px; height: 70px; margin: 0 auto}
Replace the text /wp-admin/images/logo-login.gif with the url of the logo to display
Change the text width:310px; and height: 70px; to the dimensions of the logo used.
Step 5: If needed, modify the width of the Login form
The width of the login form is set to 350px. If the logo being displayed is wider than 350px, it may be necessary to modify the width of the form for the logo to display nicely.
Locate the code:
#login {margin:15% auto;width:350px;}
and modify the text width:350px; to match the width of the logo (at least)
Step 6: Change the color of the login form background
The standard form background can be a bit boring, and it’s possible to add a little pizazz to the form by changing the form background.
Locate the line:
form{background:none repeat scroll 0 0 #ffffff !important;}
Replace the text #ffffff with the color to display instead.
Of course, you can add an image to the background by adding the text url(“/wp-admin/images/logo-login.gif”) to the style… remember to change the /wp-admin/images/logo-login.gif to the url of the image to use.
And your done…. when you navigate to the wp-login page on the website it should now be formatted similarly to your theme….
I did similar with The WP Warrior Login page:
