≡ 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 }
  • 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
  • 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
  • Abhishek

    June 21, 2012, 7:43 pm

    Nice trick. 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
  • Oren

    January 13, 2011, 12:42 pm

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

    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
  • 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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.