ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How to Customize The Default WordPress Login Screen

bluehost

Let Rubina Read this post For you

How to Customize The Default WordPress Login Screen

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

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

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.

  • Author Bio

  • Latest Post

Article by Saorabh

Saorabh has written 3 articles.

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


{ 36 comments… add one }

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

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

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

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

    Reply
  • Oren

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

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

    awesome tricks @ thanks

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

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

    Reply
  • Arun

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

    Reply
    • saorabh

      Yes Arun right.. Thanks For your Comment:)

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

    good tutorial bro. will try to modify mine.

    Reply
    • saorabh

      Thanks for your comment sumri.. :)

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

    Awesome trick

    thanks a lot :-)

    Reply
    • saorabh

      Thanks for appreciating me Vishal and your comment. :)

      Reply
  • Tinh

    Nice tricks, I need to follow this soon. Thanks

    Reply
    • saorabh

      Thanks Tinh.. :)

      Reply

Leave a Comment