Wordpress Custom Login Form

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;
<?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 {}
WordPress uses the CSS style sheet wp-admin.css to insert the logo and to hide the heading text with text-indent:-9999px;

.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;
Wordpress Custom Login Form Dev2Tricks 5 of 5
Wordpress Custom Login Form Wordpress Login Form Customized to fit and look nice  your own website branding.  This is even more sign...

Share this

Related Posts

Next Post »