The WordPress standard log-in screen is pretty dull to say the least. There is a simple way to create a plug-in that customizes the log-in screen. [This has been tested for WordPress 3.0.1] .
The first question I guess is “why use a plug-in instead of hacking into the plain source code?” The solution is simple, if you make changes to your source code in the wp-admin folder you will not only probably have to redo it when updates are made to the WordPress framework, you will have to redo all your work. Doing it via plug-in keeps it all separate and neat, you can also carry the plug-in to multiple blog sites for repeat use with no hassles. I have included the entire plug-in at the end of this tutorial if you are having trouble or just plain lazy 🙂
Lets get started (be sure that you do this in a real web editor, notepad will mess up the formatting).
Step #1 Create a new folder for your plug-in
If you are not sure where your plug-ins are located, just open a FTP client, go into your blog root folder –> wp-content –> plugins (you will likely see Akismet folder that comes with WordPress). Create a new folder named loginscreen and upload it here.
Step #2 The actual plug-in
Inside your ‘loginscreen’ folder, create a text document and rename it custom-wp-login-page.php the code below is to be inserted into the new php file custom-wp-login-page.php.
Start with your code:
A. Author information
/*
Plugin Name: Custom WordPress Log-in Page
Plugin URI: http://www.20MilesNorth.com
Description: Customize your WordPress Log-in Page, find more at 20 Miles North Website Design & Hosting
Version: 1.0
Author: Rob Jenkins
Author URI: http://www.20MilesNorth.com
*/
This code is what will come up inside your WordPress administration panel when you look in your plug-ins tab to the left. It will be clear to you once you have everything uploaded.
B. Functions
function custom_wp_login_page () {
$url = get_settings(‘siteurl’);
$url = $url . ‘/wp-content/plugins/loginscreen/login-page.css’;
echo ‘ ‘;
}
This section of code will call up a new stylesheet that will restyle the admin log-in page. We will be building and explaining this stylesheet further down below.
function addContent($content = ”) {
$content .= ”
GET IN HERE!
“;
return $content;
}
This section of code adds a line of text for you to edit that appears right above the log-in box
function addHeader($htext = ”) {
$htext .= ” Developed by 20 Miles North Web Design”;
return $htext;
}
This fuction adds text to the title tag of the customized WordPress logo. Be sure to leave that space as the first character.
C. Actions and filters
//Actions
add_action (‘login_head’, ‘custom_wp_login_page’);
//Filters
add_filter(‘login_message’, ‘addContent’);
add_filter(‘login_headertitle’, ‘addHeader’);
?>
This section of code hooks your actions and filters into the main login.php file and tells it where to put each of your functions.
Here is the entire code that should go into the custom_wp_login_page.php
/*
Plugin Name: Custom WordPress Log-in Page
Plugin URI: http://www.20MilesNorth.com
Description: Customize your WordPress Log-in Page, find more at 20 Miles North Website Design & Hosting
Version: 1.0
Author: Rob Jenkins
Author URI: http://www.20MilesNorth.com
*/
function custom_wp_login_page () {
$url = get_settings(‘siteurl’);
$url = $url . ‘/wp-content/plugins/loginscreen/login-page.css’;
echo ‘ ‘;
}
function addContent($content = ”) {
$content .= ”
GET IN HERE!
“;
return $content;
}
function addHeader($htext = ”) {
$htext .= ” Developed by 20 Miles North Web Design”;
return $htext;
}
//Actions
add_action (‘login_head’, ‘custom_wp_login_page’);
//Filters
add_filter(‘login_message’, ‘addContent’);
add_filter(‘login_headertitle’, ‘addHeader’);
?>
3. Getting your CSS file
The best way to do this is to start with a framework that WordPress already provides. What I did was go to wp-admin –> css –>login.css and copy that file, rename it login-page.css, and save to the loginscreen folder. As you dissect what is here in the CSS and tinker around with it, make sure after every item you change you put !important before the closing ;. This makes sure it overrides any other CSS information that may be defaulted elsewhere. You can see the ids and classes I have changed in the sample CSS below.
4. Activate your plug-in
Make sure all your files are uploaded into the right folders, then log-in to your WP admin and select plug-ins from the left menu and activate your new plug-in. It will not work until you do so.
As you can see in my sample I have customized almost every field, just look for the !important tags in the sample CSS to see where I made edits. Try a few things on your own and see what you can come up with, I welcome a url in the comments field for show and tell.
REMINDER: The base logo for the WordPress log-in page is in wp-admin –>images–>logo-login.gif
The source files: loginscreen.zip