14
How to Customize Wordpress Login Page

How to Customize Wordpress Login Page

Customize your Wordpress blog login/register page for better branding without using any plugin with the help of simple code snippet.

Open functions.php file of your theme and paste the following code there:

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}

Now create a CSS file with the name custom-login.css in your theme directory, there you can style property for various tags to customize your wordpress login page look.

You can start with the following sample CSS file:

/* Custom Wordpress Login Page Style */

/* Page Background */
html {
	background: #eae2d5 url(bgi-mage-path);
	margin: auto;
	font-weight:bold;
}
/* Wordpress Logo Replacement (Don't forget to change width and height */
h1 a {
	background:url(logo-path) 0 0 no-repeat;
	width:290px;
	height:150px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
/* Top Bar Background Color */
body.login {
	border-top-color:#dac6ad;
}
.message {
	margin-bottom: 0px;
}
/* Login Button */
#wp-submit {
	background: #bc3d1d;
	border: #f24643;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
	color: #443030!important;;
}
/* Top Bar Link */
.login p#backtoblog a:link, .login p#backtoblog a:visited {
	color:#443030;
	font-weight: bold;
}
.login p#backtoblog a:hover, .login p#backtoblog a:active {
	color:#443030;
	text-decoration:underline;
}

Download sample custom-login.css

Take a look on some uniquely designed Custom Wordpress Login Pages.

Kennedy's Garage
March 3, 2010 21:47 PM

This is great little snippet. Just a little note to all: Be sure to back up this information. If you update Wordpress to the latest version, “functions.php” will also update. In return some of your work will be lost.

Reply
    Chris
    March 4, 2010 11:56 AM

    That’s only true if you’re using one of the default WordPress themes. If you’re using a 3rd party theme, a custom theme or a child theme, WordPress doesn’t touch files in there.

    Reply
      Kennedy's Garage
      March 4, 2010 14:06 PM

      I tried to do some research on this matter a little more. According to the Wordpress site ( http://codex.wordpress.org/Upgrading_WordPress ). It states “Delete your old wp-includes and wp-admin directories” when updating. This also happens with the auto-upgrade. functions.php is included inside wp-includes.

      Reply
        Wordpress Chef
        March 4, 2010 15:47 PM

        We are talking here about theme’s functions.php file which lies in themes directory and it is not effected by Wordpress Upgrade, unless you are using Default or Classic theme.

        Reply
          Kennedy's Garage
          March 4, 2010 16:25 PM

          I apologizes, I do not know what I was thinking. Has there always been a functions.php file in the themes folder? It must have been an old bad habit. I have just updated all my sites. Thanks for this knowledge on both subject.

Elas Beauty
March 4, 2010 13:14 PM

Great.
Now i can get rid of that ugly login page.

Reply
Dustin
March 4, 2010 14:44 PM

Since the file functions.php is a “theme” file a regular WordPress upgrade would not affect it. Themes like Classic and Default are bundled with the WordPress core these themes will be overwritten with any WordPress core upgrade. So if you use Classic or the Default theme you will have to back up your theme before upgrading or you will lose any custom changes.

Reply
Yimbo
March 5, 2010 21:27 PM

I can’t get it to work.

Reply
    Wordpress Chef
    March 6, 2010 11:42 AM

    What problem are you facing??

    Have you added the code snippet in your theme’s functions.php file?
    Make sure to put the custom-login.css file in your theme’s directory.

    Reply
USMCsky
March 7, 2010 21:52 PM

I have both pieces in place. Still not working for WP 2.9.2. I went so far as to strip all WP plug-ins from my localhost to ensure that there was no interference. This would be a beautiful tool if I could get it to work. My gun club has this exact need for its members. A custom login…

Nothing is ever easy in my world. But we grow from the experience.

Reply
    Wordpress Chef
    March 8, 2010 8:20 AM

    Make sure you added the first code snippet within tags of your theme’s functions.php file and also send me the link of your blog where you are trying this hack.

    Reply
Huw
April 1, 2010 11:44 AM

Hi,
I cannot get this to work either? I tried it on local machine first which worked, and just copied the files over – now nothing happens at all. Just normal wordpress login.

Any help would be appreciated.

Reply
    Wordpress Chef
    April 2, 2010 11:42 AM

    Make sure you have overwritten functions.php file on server within active theme’s directory.

    You may also post functions.php code here so we may check.

    Reply
Claudio
May 11, 2010 23:21 PM

Hi,
many thanks for ur tips, being new to wordpress world, they were precious!
Anyway, at the first attempt, just modifying the functions.php file, it didnt work.
At the end I could find that addind the code

add_action(‘login_head’, ‘custom_login’);

just after “custom_login” declaration it works fine!
May be this tip could be helpfull to somebody!

P.S. I’m using WP 2.9.2 version

Reply

Leave a Reply