• X

    How to Customize The Default WordPress Login Screen

    By in WordPress

    Bluehost hosting

    Adding your logo or banner into your WordPress dashboard give another way to brand your site and specially if you have multi-author blog it is very useful. Some time back we talked about BM custom login wordpress plugin to change your WordPress dashboard logo. In this post WordPress developer Saorabh is talking about how you can customize your WordPress wp-admin login panel to brand your company or blog.

    Every wordpress site have a same login screen actually we get bored with the same login screen.This post will be helpful for those people who want to personalized his login window or login screen. Lets starts how to achieve our goal to customize WordPress login panel with your logo:

    wordpressdefaultloginscreen thumb1 How to Customize The Default Wordpress Login Screen

    For achieving this first we will modify our function.php, Every theme have a function.php If not available create a blank php file named function.php.

    Step 1: -

    Add the following code in function.php

    function custom_login() {
     echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login/custom-login.css" />';
    }
    add_action('login_head', 'custom_login');

    Step 2: -

    create a folder inside the theme directory named custom-login

    Step 3: -

    Create a file named custom.css and place it inside the custom-login which is inside the theme directory.

    Paste the following code in your custom.css file

    /* 
    Document   : custom-login
    Created on : date and time 
    Author     : created by 
    Description: Purpose of the stylesheet follows.
    */
    /* 
    TODO customize this sample style
    Syntax recommendation http://www.w3.org/TR/REC-CSS2/
    */
    html {background:#3e3e3e!important;}
    body{border-bottom-style:solid;border-bottom-width:30px;border-top-style:solid;border-top-width:30px;}
    body, #wpbody, .form-table .pre {color:#333333;}
    body.login {border-bottom-color:#464646;border-top-color:#464646;}
    h1 a{background:url("../images/wp-logo.png") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:356px;margin: 0 auto}
    #login {margin:15% auto;width:350px;}
    form{background:none repeat scroll 0 0 #E5E5E5!important;}
    For changing the logo we have two options either we can write css for it or apply another one is appying  a hook, 
    Changing logo using wordpress hook,Paste the following code in to function.php
    function my_custom_logo() {
    echo '<style type="text/css">
    #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/wp-logo.png) !important; }';
    }
    add_action('admin_head', 'my_custom_logo');

    Changing logo using CSS code snippets are

    h1 a{background:url("../images/wp-logo.png") no-repeat scroll 0 0 transparent;display:block;padding-bottom:15px;text-indent:-9999px; width:356px;margin: 0 auto}

    After doing only these 3 steps you can change the wp-login.php style, result is here.

    changedloginwindow thumb1 How to Customize The Default Wordpress Login Screen

    Note: The default login window have wordpress logo which redirect to http://wordpress.org/ and a default title “ powered by wordpress”, we can also change this.

    For changing the URL,we have to add one more wordpress hook in our function.php, Sample codes past in to function.php

    function change_wp_login_url() {
    echo bloginfo('url');
    }
    add_filter('login_headerurl', 'change_wp_login_url');

    For changing the logo title, past code in to the function.php

    function change_wp_login_title() {
    echo 'Powered by ' . get_option('blogname');
    }
    add_filter('login_headertitle', 'change_wp_login_title');

    Moving towards last steps: -

    Now to continue making our wordpress login screen more custom and personal, we can change the footer link also on our admin screen. This can personalized our wordpress site a little bit more.For doing this again we have to add one more hook in function.php.

    Code snippets

    function remove_footer_admin () {
    echo 'Custom text | Copyright &copy; message';
    }
    add_filter('admin_footer_text', 'remove_footer_admin');

    I hope you enjoyed this tutorials. Suggestions and feedback’s  are most welcome.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Saorabh has written 3 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 36 comments… read them below or add one }

    Tinh

    Nice tricks, I need to follow this soon. Thanks

    Reply

    saorabh

    Thanks Tinh.. :)

    Reply

    VISHAL

    Awesome trick

    thanks a lot :-)

    Reply

    saorabh

    Thanks for appreciating me Vishal and your comment. :)

    Reply

    Hami

    Wow that will surely help us a lot getting our Wp site more personalized. Thanks Saorabh for such a nice article of yours..

    Reply

    saorabh

    Thanks Hami..
    I’m glad you find the post is useful.

    Reply

    sriganesh

    thanks for the tip :D , i just want to remove the Wp logo and place min, is that possible to rename my logo with wp logo name and replace it ??? will it take effect. i dont want to try before knowing its safe !! – reply brother

    Reply

    saorabh

    Of course you can change your logo name, its up to you which image you want to display in that place.
    Thanks for you comment dude.. :)

    Reply

    Anant Shrivastava

    Try using Theme my login plugin a good utility to match the login with theme.

    http://wordpress.org/extend/plugins/theme-my-login/

    Reply

    saorabh

    Yes you can change your login screen using this plugin but here I am trying to make wp-login as part of our theme which will stores inside the theme folder…
    Thanks for your comment Anant:)

    Reply

    Anant Shrivastava

    Ohk Got it.

    but the only concern with manual approach is if you edit the theme files you have to re-edit any new theme you want to use or if you edit core then with every release you need to redit.

    that’s why i like plugin’s anyways that’s my opinion.

    Reply

    Ritu Sharma

    Thanks saurabh.
    I have tried the logo part and was successful, now i will be changing the LOGIN button style

    Reply

    saorabh

    Ohh good :) , go ahead for next level ..Thanks for your comment Ritu :)

    Reply

    sumri

    good tutorial bro. will try to modify mine.

    Reply

    saorabh

    Thanks for your comment sumri.. :)

    Reply

    Mukundan Srinivasan

    I am going to change the login screen of my blog. Pretty Interesting. I think using plugins will be a time saving option instead of handling these codes.

    Reply

    saorabh

    Plugins and the given code will do the same, Here I am trying to let you know that we can make our login screen as a part of our theme not a part of wordpress core or plugins…

    Reply

    Melvin

    cool! now i see why some sites sport that custom look. the problem is when the wp version updates, it would get deleted right?

    Reply

    saorabh

    I don’t think so, as we are going to save all the files and images in our current theme folder, So its not going to delete after updating Wordpress..
    Thanks for your Comment Melvin:)

    Reply

    Arun

    Cool hack, helps for those who are planning to brand their blog.

    Reply

    saorabh

    Yes Arun right.. Thanks For your Comment:)

    Reply

    saorabh

    Thanks Anis..
    I am happy that you find this simple tutorial is useful…

    Reply

    SmashinGeeks

    I also changed my login screen :

    http://smashingeeks.com/wp-admin

    Reply

    saorabh

    I am glad that this tutorial helps you for changing your login screen..
    Thanks for your comment:)

    Reply

    Tony

    Great instructions. Followed them and they worked perfectly. I especially like being able to change the WP admin footer.

    One request — my logo is wider than the WP logo and the form. Is it possible to shift the area where the logo goes to the left, in order to center it over the form?

    Tony

    Reply

    Justin Germino

    I actually chose a more powerful plug-in for customizing your Wordpress Login Page, it offers more customization like background color, full CSS style over the page and form itself and the banner image part. But this one was the most popular one and I saw FamousBloggers was using it as well. The theme I wound up using was called “Custom Login” written by Austin Passy.

    Reply

    saorabh

    Hello Justin,
    Thanks for your comment.
    Yes your are right the wordpress plugin “Custom Login” is more powerful but we are trying to change the login screen without using plugins. If the options are available why plugins, If you want to do something more with login screen plugins are welcome.
    :)

    Reply

    Sumon

    awesome tricks @ thanks

    Reply

    Alfonso Pauling

    We really dig what you write about here. I try and check your blog every day so keep up the good posts!

    Reply

    Oren

    hi.
    is there a way to change the text in the box in login page ?
    thanks,
    oren

    Reply

    sanjeev

    Nice article. i will change my old login screen. thanks

    Reply

    Gowtham

    Thanks for the nice tutorial . Have bookmarked it for later use as my site is a new one must do this after implementing the revenue sharing program.

    Reply

    Den

    But when updating WP, need to backup this first or it will overwritten by newer wp-login.php file…

    Reply

    Aeryn Lynne

    Thanks for the code! Couldn’t get the “change_wp_login_title” and “change_wp_login_url” to work though without changing “echo” to “return”.

    Reply

    Laurean

    I have to agree with Aeryn Lynne – Thanks for the code! Couldn’t get the “change_wp_login_title” and “change_wp_login_url” to work. The echo works, but not the title/url. ;-( bummer.

    Reply

    Afsal Rahim

    I had rather created a simple plugin for this and using it for all my sites now.
    You can get it from the wordpress plguins: http://wordpress.org/extend/plugins/my-wp-login-logo/

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `