How to Customize WordPress Login and Register Page

Updated October 6, 2023
By

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

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

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

        • 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

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

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

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

  • 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

  • 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

  • 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

Leave a Reply to Bilal Ahmad (Cancel Reply)

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