Add Broder Around the Posts in Thesis To Make it More Stylish
October 26, 2010
How to Customize WordPress Login and Register Page
WordPress is a great platform and it provides you a lot of features. You can customize your blog according to your own specifications. Today i thought i would share a tutorial about customization of wordpress login page. If you have noticed the TechMaish Login and Register page, it is totally different from the normal page.
You can also change your blog Custom Login and Register page to whatever design you like. You can change the background color, text color and even you can change the default logo.
How to Customize WordPress Login Page?
For customization you will have to edit 2 files.
- 1. wp-login.php
- 2. login.css
You will have to access your FTP account to edit the files.
1. Changing Logo and Link
The first thing you will have to do is to change the default logo and link for your login and register page. However you will have to access your hosting account to make the necessary changes.
Open Wp-Admin.php and find the below sentence.
<div id=”login”><h1><a href=”<?php echo apply_filters(‘login_headerurl’, ‘http://wordpress.org/‘); ?>” title=”<?php echo apply_filters(‘login_headertitle’, __(‘Powered by WordPress’)); ?>”><?php bloginfo(‘name’); ?></a></h1>
Now replace the link wordpress.org and add your blog link. Save the file.
Changing the Logo
Now open Login.css and find the below code.
h1 a {
background: url(../images/logo-login.gif) no-repeat top center;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
Now change the logo URL to your uploaded logo URL.Save the file.
Customizing Login Box
From Login.css file you can tweak your login page. For example you can change background color, add lines around the login box etc..
For example
form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;
Similarly you can make other necessary changes to make your Login and Register screen cool. Let me know if you have any problem.
Related Posts
Search Here
28 comments
Libin
I know this is an old post. But it is not at all recommended to edit core files. Instead of that you can use a plugin.
I had developed a plugin called “Erident Custom Login and Dashboard”. It has a tons of features. You can completely change your WordPress Login Page with some simple clicks. Just try it: http://wordpress.org/extend/plugins/erident-custom-login-and-dashboard/
Anyway its a great post when considering the date of post. 🙂
Best Wishes.
Bilal Ahmad
Libin@ What happens to the customizations, when wordpress upgrade is made. They are lost or carried forward with the new version.
Libin
Definitely, You will not loose any customization. Whenever WordPress makes an upgrade, the plugin author will check for compatibility. If it is not working, the plugin author will make necessary changes to make it working. So the users just need to hit the update button only. Cool, right?
Once you try, you will love this plugin for sure. If you need any support or have a feature request, just drop it here: http://wordpress.org/support/plugin/erident-custom-login-and-dashboard
Bilal Ahmad
Libin@ Sounds good.
Libin
Also the plugin is using WordPress hooks. So it is not at all touching any WordPress core files. Changes only need when WordPress change it hooks. Otherwise the plugin will be stable on WordPress upgrades.
So you don’t need to worry about WordPress upgrades.
Sisyphus
This is not the right way to change core wordpress file. What will happen, if I want to upgrade wordpress version?
WordPress is great because you can filter there core functions without effecting the core files. Look how easy to change the Header URL of login page. Just add this function into your theme function file.
add_filter( ‘login_headerurl’, ‘change_login_headerurl’);
function change_login_headerurl(){
return home_url(‘/’);
}
Abhishek
Nice trick. Thanks
Vince
Thanks Bilal for this tutorial. It’s really nice to have a customized login page rather than the WP default look. Will definitely give it a try and will have to update my backup procedure to include these instructions in case of WP upgrade.
If someone also knows of a clean plugin to achieve the same that would save to lose the customisation in case of WP upgrade.
Oren
hi.
how can i change the text in the login page ?
thanks
Pete Omlin
Thanks so much for the great code! I’ve been wanting to do this for some time, but didn’t want to use a plugin, and the code I tried in functions.php didn’t work out, though it was probably my error. This is great though, and it’s really not a big deal to switch out the 2 files every time an upgrade occurs. Keep the files saved in your notepad, and it takes less than 1 minute to upload both, and rename them upon upgrade. Easy. One question though, I can’t figure out where the code is for the Log In button. I’d like to change the color of the button, and possibly the font color. If you have any ideas, that be great, but if not, thanks anyway for the great code!
Bilal Ahmad
Pete@ Hmm i will have to go to the file. I will check it and tell you. Thanks for your appreciation.
Robin
Thank you for sharing this. We had used this method for various client’s login pages. A plugin would be the best option so that the customization does not have to edited each time WordPress is upgraded.
Kevin
Very nice like it indeed
Bhaveek Patel
Bilal it is really nice to see such interesting. But I would rather search for plugin which will do the same. As I am not that professional in editing those files.
Hieu Martin@Blog Tips
Nice to change wordpress login theme. Thanks chand
Chand
Aslam@ The following list can help in your link building project.
http://www.techmaish.com/700-dofollow-forums-list/
http://www.techmaish.com/list-of-230-free-url-shorteners-services/
Fan Aslam
Hey Billal
I liked your blog, its lay out and informative Contents.
It does not look like the work of a part time blogger,
for sure.
Bilal Ahmad I am looking information, to use links for
traffic to my blog. I have to understand link building thoroughly to apply. If you may send me some sites or articles to read I will appreciate it very much.
Fran Aslam
Chand
Yes for guest bloggers it is a very useful element.
Mani Viswanathan
Customizing the login page is pretty important when it comes to guest blogging.
Robert @ Techinfo-4u.com
Very nice hint, never even dawned on me that you could change the wordpress log in page, not that many people would see it, it’s still a nice touch though