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.
- Is Social Networking Marketing Helpful for Each Business?
- Five Methods of Becoming More Valuable to Your Social Networking Audience
- Invoicera- An Extraordinary & Cost-Effective Solution To Tackle Your Invoicing Requirements Effortlessly
- Blunders you Need to Avoid In an Email Marketing Campaign
- Things to Lookout for When Finalizing Topics For Guest Blogging
{ 20 comments… read them below or add one }
Hey Bilal, this is a nice feature to have, especially when you have guest posters logging in. These are pretty thorough instructions, so I’ll let you know how I make out. Thanks!
Rather than do this by modifying the core Wordpress files I highly recommend you use a plugin instead. Plugins will survive and change stay intact during Wordpress upgrades without potentially having to do the modifications again. I wrote a review on the plug-in I am using and you can see my blog wp-admin page for an example of what you can do with it.
Let me know if I can post the link to my WP-Plugin review, I don’t like posting links in my comments without permission.
I agree with Ileane it’s always nice having a unique login. Great instructions Bilal hopefully everyone will be successful when trying it out. Good luck Ileane!
Justin Germino@ You are welcome to share the plugin with our readers. Thanks for your help.
bbrian017@ Thanks for your comment.
Very nice idea,
however I agree with Justin Germino as I don’t want to do those things again after each time wordpress is updated.
Using plugin is maybe a better solution.
I agree with @Justin Germino since if you were to upgrade your WP installation you would lose custom changes to the code… you’d have to repeat this process. A plugin will automate and simplify… so Justin, which plugin is it?
Using third party plugins are always risky. However if the plugin is developed by a well known developer then its ok.
I hope Justin will soon share the plugin with our readers.
[Well if upgrading is the problem then you can copy the code before upgrading your blog version. ]
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
Customizing the login page is pretty important when it comes to guest blogging.
Yes for guest bloggers it is a very useful element.
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
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/
Nice to change wordpress login theme. Thanks chand
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.
Very nice like it indeed
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.
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!
Pete@ Hmm i will have to go to the file. I will check it and tell you. Thanks for your appreciation.
hi.
how can i change the text in the login page ?
thanks
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.