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.
Comments
23 responses to “Create Your Own WordPress Login Design”
[…] 在Wordpress 2.6的使用过程中，我也曾经对WP的登陆页面进行过自定义，包括修改其样式，或者改变页面内容。现在Wordpress升级到2.7了，WP开发者对登陆页面进行了一些改动，但是要实现登陆页面的美化还是不复杂的，Frank就提供了一个简单的方法。 首先，在你的主题的functions.php里添加以下代码，如果你的主题没有functions.php，可以自己建立一个。 […]
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 🙂
[…] Shared a link on Google Reader. Create Your Own WordPress Login Design […]
[…] Create Your Own WordPress Login Design – WP Engineer Re-Design that wordpress Login! […]
[…] Article Code από WP Engineer: https://wpengineer.com/create-your-own-wordpress-login-design/ […]
[…] WPengineer potete trovare un interessante articolo che mostra dare un tocco personale alla maschera di login del nuovo WordPress […]
[…] Create Your Own WordPress Login Design […]
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 🙂
[…] Créez votre propre design de page de connexion WordPress […]
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/
[…] 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 […]
[…] custom login page — […]
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.
[…] Create You Own WordPress Login Design – WPEngineer.com […]
[…] 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 […]
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?