Create Your Own WordPress Login Design
WordPress 2.7 has been released these days and comes with some updates to the backend design. I think most of you already know that there is a new login-section. The design is now equal to the new backend’s and the team did only little changes.
From my point of view this is very important to an all-inclusive-package, like a theme – or a corporate design.
The CSS changed a bit and if anybody wants to customize the login-section, I will show how to achieve it. The CSS is also included as a good starting point for your own custom design.
Loading the Stylesheet
I have to use a simple function, which I put in functions.php
of the current theme and integrate it via hook login_head
into the login-head to load the css for the login-section. This will make the custom css being referenced only by one specific theme and if I switch to a different, a different css will also be loaded.
// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
}
add_action('login_head', 'fb_custom_login');
The stylesheet comes with the name custom-login.css
and is located in /custom-login
in the folder of the theme.
The Stylesheet
Like I already said, here is tiny example, which includes classes and id’s of the login-section, so you can customize it very easily.
html {
background-color: #fff;
}
#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}
#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}
#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}
The example above is just one way to customize the style. As usual there are unlimited possibilities with css and the art of it. A recommendational note from me, is to use the Firebug extension, which is really helpful when customizing css live. I can’t mention this enough.
A very useful and handy tutorial! Thanks, needed it. 🙂
Cool. Thanks for that idea. I had wondered about that, but it never really mattered to me, since I am the only one who logs into my blog…
Hi Haris, looks like perfect timing 🙂
Is there a good page to look up hooks and actions?
This tip is great. I am using this in my theme. thanks for sharing this info 🙂
sir/madam,
i want to know how to store the details of username & password in database
Just wanted to let you know that I created a plugin that allows you to not only brand the login screen but also the admin header and footer as well.
Its really great for installs you’ve created for a client and want to give it a personal touch.
You can find it here:
http://pressingpixels.com/wordpress-custom-admin-branding/
This is a great plugin. I want to say thanks for making it. I don’t think enough people are aware of it, or most everyone would be using it.
I am getting an error where the words don’t show up on internet explore for the register screen. It works on the login.php screen, but on the register screen it show the new logo, but no words. Eg. User name password.
I am wondering if this is something you have come across?
Thanks.
The above message was for Josh Byers.
Greatest trick. Thank you. I use this.
hi, my login page > http://www.sunset.gen.tr/wp-login.php 🙂
Hello,
I’m using this way of customizing the wp-admin login page. There is something I would change but the only way I see it possible now is by using jQuery: the wordpress.org link on the logo.
Is there another way of doing this?