web
analytics
≡ Menu

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.

wordpress login pageYou 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.

{ 28 comments… add one }
  • Ileane @ Basic Blog Tips

    July 28, 2010, 10:26 am

    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!

    Reply
  • Justin Germino

    July 28, 2010, 2:22 pm

    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.

    Reply
  • bbrian017

    July 28, 2010, 2:25 pm

    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!

    Reply
    • sai krishna

      April 4, 2012, 10:48 am

      Glad to see you here brian 🙂 unique login logo is always good for branding ..

      Reply
  • Chand

    July 28, 2010, 2:35 pm

    Justin Germino@ You are welcome to share the plugin with our readers. Thanks for your help.
    bbrian017@ Thanks for your comment.

    Reply
  • Tek3D

    July 29, 2010, 6:26 am

    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.

    Reply
  • Daniel Snyder

    July 29, 2010, 1:41 pm

    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?

    Reply
  • Chand

    July 29, 2010, 1:46 pm

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

    Reply
  • Robert @ Techinfo-4u.com

    July 29, 2010, 7:12 pm

    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

    Reply
  • Mani Viswanathan

    July 29, 2010, 10:08 pm

    Customizing the login page is pretty important when it comes to guest blogging.

    Reply
  • Chand

    July 30, 2010, 7:03 am

    Yes for guest bloggers it is a very useful element.

    Reply
  • Fan Aslam

    July 31, 2010, 1:49 am

    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

    Reply
  • Chand

    July 31, 2010, 1:12 pm Reply
  • Hieu Martin@Blog Tips

    August 3, 2010, 1:23 am

    Nice to change wordpress login theme. Thanks chand

    Reply
  • Bhaveek Patel

    August 4, 2010, 8:45 am

    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.

    Reply
  • Kevin

    October 9, 2010, 11:50 am

    Very nice like it indeed

    Reply
  • Robin

    November 30, 2010, 1:32 pm

    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.

    Reply
  • Pete Omlin

    December 11, 2010, 12:29 pm

    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!

    Reply
    • Bilal Ahmad

      December 11, 2010, 4:12 pm

      Pete@ Hmm i will have to go to the file. I will check it and tell you. Thanks for your appreciation.

      Reply
  • Oren

    January 13, 2011, 12:42 pm

    hi.
    how can i change the text in the login page ?
    thanks

    Reply
  • Vince

    February 6, 2011, 9:43 am

    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.

    Reply
  • Abhishek

    June 21, 2012, 7:43 pm

    Nice trick. Thanks

    Reply
  • Sisyphus

    August 16, 2012, 11:24 pm

    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(‘/’);
    }

    Reply
  • Libin

    August 17, 2012, 9:12 am

    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.

    Reply
    • Bilal Ahmad

      August 17, 2012, 6:44 pm

      Libin@ What happens to the customizations, when wordpress upgrade is made. They are lost or carried forward with the new version.

      Reply
      • Libin

        August 17, 2012, 9:18 pm

        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

        Reply
        • Libin

          August 17, 2012, 9:32 pm

          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.

          Reply
        • Bilal Ahmad

          August 17, 2012, 11:06 pm

          Libin@ Sounds good.

          Reply

Leave a Comment