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 '';
}
 
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.


Posted

in

by

Comments

23 responses to “Create Your Own WordPress Login Design”

  1. […] 在Wordpress 2.6的使用过程中,我也曾经对WP的登陆页面进行过自定义,包括修改其样式,或者改变页面内容。现在Wordpress升级到2.7了,WP开发者对登陆页面进行了一些改动,但是要实现登陆页面的美化还是不复杂的,Frank就提供了一个简单的方法。 首先,在你的主题的functions.php里添加以下代码,如果你的主题没有functions.php,可以自己建立一个。 […]

  2. Haris Nadeem Avatar

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

  3. Jim Gaudet Avatar

    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…

  4. Alex Avatar

    Hi Haris, looks like perfect timing 🙂

  5. […] Shared a link on Google Reader. Create Your Own WordPress Login Design […]

  6. […] WPengineer potete trovare un interessante articolo che mostra dare un tocco personale alla maschera di login del nuovo WordPress […]

  7. Tobias Avatar

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

  8. Sabuj aka manchumahara Avatar

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

  9. […] Créez votre propre design de page de connexion WordPress […]

  10. madhu Avatar
    madhu

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

  11. Josh Byers Avatar

    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/

  12. […] release”. The integration of themes with the login page is possible already, as noted on the WPEngineer blog itself and there are no plans to change this at all. Thoughts to implement the depiction of […]

  13. Ted Avatar
    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.

  14. Ted Avatar
    Ted

    The above message was for Josh Byers.

  15. […] Create You Own WordPress Login Design – WPEngineer.com […]

  16. […] area for those maintaining the site. Just a little something to bring it all together.  I found a great tutorial at wpengineer.com which uses a php hook and some simple […]

  17. tasarım blogu Avatar

    Greatest trick. Thank you. I use this.

  18. conualfy Avatar
    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?