Creating a Custom WordPress Log-In Screen

So you want to spruce up your log-in screen from the standard WordPress look, where do you start?

The easiest way to implement a custom look is via plug-in. You could easily hack the WordPress admin files and CSS but that would make it a pain when you update your WP or change themes. Creating a plug-in will make it simple to transfer the custom look onto other themes and websites.

The first thing you have to do is create a plug-in. If you’ve never created a plug-in, it’s simple, it’s much like creating a custom theme.

Step #1: Create the plug-in folder
Create a folder for your plug-in files. Make sure the folder is created in your ‘plugins’ folder in the ‘wp-content’ directory. Name the folder as your new plug-in name, in this case, we’ll name it “custom-wp-login”. Make sure when you create the plug-in to use a unique name so it doesn’t interfere with existing plug-ins.

Step #2: Create the plug-in page
The plug-in consists of one main php file. You should match your php file name to your plug-in name. In this case the php file will be called “custom-wp-login.php”.  After creating the php file, add the proper identifiers and details at the top, much like theme template files and CSS files. See an example of the php header below:

/*
Plugin Name: Custom WP Login
Plugin URI: http://www.redicedesigns.com/
Description: A custom login look provided by Red Ice Designs
Version: 1.0
Author: Joe Valdez
Author URI: http://www.redicedesigns.com/
*/

Step #3: Create a function
The next step is to add the meat of the plug-in, where the actual work will take place. You will first need to create a function so that the plug-in loads your custom CSS file (which we’ll create later),  which will override the default WordPress CSS styles.

The function will include the location of the custom CSS file and the html mark-up to include the CSS file in the header. In this case, we’ll name our custom CSS file ‘login.css’.  The new custom CSS file be saved in the plug-in folder, ‘custom-wp-login’. See below:

function custom_wp_login () {
$url = get_settings('siteurl');
$url = $url . '/wp-content/plugins/custom-wp-login/login.css';
echo '<link rel="stylesheet" href="' . $url . '" type="text/css" media="screen"/>';
}

Step #4: Add the function to the header
The next step is to add a hook in the php file so that the function is loaded where you would like (header, footer, etc.). To achieve the custom log-in look, you’ll need to attach the hook to “login-head”. You will then need to tell the hook what to add to the “login-head”, which is the function you’ve just created.  Make sure you match your function name exactly in the action. See below:

add_action ('login_head', 'custom_wp_login');

See the entire ‘custom-wp-login.php’ file below:

Step #5: Create the CSS
Copy the contents of the default ‘login css’ file that WordPress uses into a new CSS file. You can find the default WordPress CSS file under ‘wp-admin/css/login.css’. Save the new CSS file as ‘login css’ in the ‘custom-wp-login’ plug-in folder.

Step #6: Activate your plug-in
Before you start on editing your custom CSS file in the plug-in folder, make sure that the plug-in will work. Upload (if you haven’t already) the new plug-in folder ‘custom-wp-login’ to your server. In your “Plug-ins” section of your WordPress admin area, you should see the new plug-in, activate it.

Step #7: Customize your login page
After you’ve activated your plug-in, you can start messing around with the ‘login.css’ file in your plug-in folder.

You’ll find that some of the styles in the WordPress log-in screen are not in the login.css’ file. Some of the default styles will be be in other WordPress admin CSS files. Using various developer applications like “firebug”, you can see the styles that are applied to every element on the log-in page. If there are styles that you’d like to overwrite, that are not in the original WordPress ‘login.css” file, add them to your the ‘login.css’ file in the ‘custom-wp-login’ folder.

If you do plan to overwrite some styles, not originally in ‘login.css’, one thing you may have to do is add “!important” in order to overwrite the WordPress defaults. See an example below:

.login #nav a {color:#CCC !important}