Wordpress Custom Login Form
Wordpress Login Form Customized to fit and look nice your own website branding. This is even more significant for multi user or multi author blog, or sites whatever you customized first login form look very nice your site and you have set up for clients as adds that little extra something. Updated schema WordPress
Just used this plugin custom your WordPress login form BM Custom Login or search the another plugin custom Login
Change the Login Logo
To change the your WordPress site logo to your own, you will need to change CSS styles associated with the heading.
<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>
CSS style to displya background image the wordpress logo link and inside the heading tag. You can use the login_enqueue_scripts hook to insert CSS into the head of the login page so your logo loads instead. To use the code below replace the file name site-login-logo.png with the file-name of your logo and store your logo with your active Theme files in a directory named /img :
function my_login_logo() { ?>
<style type="text/css">
.login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/site-login-logo.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
Your Logo size 80 * 80 pixels though even this can change with custom.css. Adjest the above padding-bottom value to the spacing our want between your logo and the login form. To change the link values so the logo links to your WordPress site, use the following WordPress hooks edit it and past it bellow the previous in functions.php
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Styling Your Login
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}
.login h1 a {
background-image: url('../images/w-logo-blue.png?ver=20131202');
background-image: none, url('../images/wordpress-logo.svg?ver=20131107');
background-size: 80px 80px;
background-position: center top;
background-repeat: no-repeat;
color: #999;
height: 80px;
font-size: 20px;
font-weight: normal;
line-height: 1.3em;
margin: 0 auto 25px;
padding: 0;
text-decoration: none;
width: 80px;
text-indent: -9999px;
outline: none;
overflow: hidden;
display: block;
}