How to customize WordPress login page

Hi friends, certainly you have felt when you make WordPress kind web development, WordPress login page can be better if we can customize with our logo and css. Yes, we could customize the wp whatever you like without any plugins.

Today i am gonna show you how to change default wp logo and some css in login page.

If you go to http://YOUR WP PATH/wp-login, by default the page shows like this, to change this read below..


wordpress-default-login-screen

Ok, First we can change logo, by doing that, open your functions.php in your activated theme by using any editor like notepad, notepad++, etc. whatever you use.

add the following piece of codes into that,

// techniyaz.tk- Custom WordPress Login Logo

function login_css() {
wp_enqueue_style( 'login_css', get_template_directory_uri() . '/css/login.css' );
}
add_action('login_head', 'login_css');

thats all from functions.php. As you see in the code we use login.css, so create login.css in your theme's css directory and put following css code.

#login h1 a {
background-color:#303030;
background-image: url("http:// YOUR HOST HERE / YOUT WP DIRECTORY HERE /wp-content/themes/ YOUR THEME HERE/images/logo.png") !important;
margin-bottom:5px;
border-radius:7px;
}

in this css we use some styles for the logo like background color, border radius etc. Logo directory should be right. Here I have added some more css for usename, password box in admin css. I suggest you to use firebug for debug exact paths.

.login form{background: none repeat scroll 0 0 #303030;border: 1px solid #303030;border-radius: 7px 7px 7px 7px;box-shadow: 0 4px 10px -1px rgba(200, 200, 200, 0.7);font-weight: normal;margin-left: 8px;
padding: 26px 24px 46px;}

then it will show you something like below example.


Untitled-1

And one more thing logo default link directed to http://www.wordpress.org, to change this

open your functions.php add following code,

// techniyaz.tk -Use your own external URL logo link
function wpc_url_login(){
return "http://www.google.com"; // your URL here
}
add_filter('login_headerurl', 'wpc_url_login');

That's all from here. Donate your valuable comments.

1 Comments

  1. I'm nott certain where you're getting your information,
    but good topic. I needs to spend a whuile studying more or working out more.

    Thank you forr fantastic information I was
    iin search of this info for my mission.

    ReplyDelete

Post a Comment

Post a Comment

Previous Post Next Post