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.

Comments are closed.

23 comments

  1. Haris Nadeem

    A very useful and handy tutorial! Thanks, needed it. 🙂

  2. Jim Gaudet

    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...

  3. Alex

    Hi Haris, looks like perfect timing 🙂

  4. Tobias

    Is there a good page to look up hooks and actions?

  5. Sabuj aka manchumahara

    This tip is great. I am using this in my theme. thanks for sharing this info 🙂

  6. madhu

    sir/madam,
    i want to know how to store the details of username & password in database

  7. Josh Byers

    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/

  8. Ted

    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.

  9. Ted

    The above message was for Josh Byers.

  10. tasarım blogu

    Greatest trick. Thank you. I use this.

  11. sunset

    hi, my login page > http://www.sunset.gen.tr/wp-login.php 🙂

  12. conualfy

    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?

11 pingbacks

  1. 美化Wordpress登陆页面 | 葛小飞
  2. Diary of a RockStar » Daily Digest for 2008-12-17
  3. AndySowards.com :: Web Development Nerdy Daily Links For 12/18/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
  4. Δημιουργήστε το δικό σας logging screen στο Wordpress 2.7 | Web Design Blog x2interactive. Ένα blog για το Internet και το Web Design
  5. Personalizzare la maschera di login di WordPress 2.7 | Bloggare
  6. WordPress Links - Week 51 2008 | WPStart.org - WordPress themes, plugins and news
  7. The spirit of Wordpress #5 ! | le blogueur masqué
  8. Enough With the Speculation < Hello, Dolly
  9. CoffeeBear.net » Blog Archive » Updating VectorLover Theme
  10. A Collection of 15 Useful WordPress Tutorials for 2008 » Papertree Design
  11. Wrecking Ball Fight Facility 4th and final redesign. Using Wordpress as a CMS. | JonFlood.com