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:

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');

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');

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.

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');

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

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 © message';
}
add_filter('admin_footer_text', 'remove_footer_admin');

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.

Follow @ShoutMeLoud