Customizing WordPress Login/Registration Page

Just found a way customizing the login/registration page of WordPress without using any plug-in, check it out!

(Instructions and codes written by Sola, posted on: http://www.solagirl.net/custom-wordpress-login-without-plugins.html.)

This trick only adds files into the theme folder, so any of other styles would not be affected even if there is any further update of WordPress.

How this trick works:

1. Changes the styles and scripts of login/registration page with a hook by re-coding functions.php stored in your theme folder.

2. The original styles will be overridden, so that you can have your customized login/registration page.

First, edit the functions.php:

1. Make a directory under your theme directory and name it “custom-login”; create a file called “custom-login.css” and a directory called “images” in this folder .

2. Add the following functions in functions.php:

2.1 Add a customized style sheet:

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

2.2 Change the URL of the logo: (the original is from wordpress.org)

function custom_headerurl( $url ) {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_headerurl' );

2.3 Change the alternative text of logo: (the original is “Powered by WordPress”)

function custom_headertitle ( $title ) {
    return __( 'Welcome to -=Alex says=-' );
}
add_filter('login_headertitle','custom_headertitle');

2.4 Insert a welcome message in the login/registration page:

function custom_login_message () {
    echo '
<p style="text-align:center">'.__('Welcome to -=Alex says=-').'

';
}
add_action('login_form','custom_login_message');

2.5 Add a customized HTML scripts, like a copyright statement:

function custom_html() {
    echo '
<p class="copyright">&copy; '.get_bloginfo(url).'

';
}
add_action('login_footer','custom_html');

Second, eidt the file custom-login.css:

1. Re-define the below style to change the background image (just add it to the custom-login.css):

body.login{
    background:url('images/bg.png') 0 0 no-repeat;
}

2. Logo replacement.

2.1 Add the below codes to replace another image as the logo:

.login h1 a {
    background:url('images/logo-login.png') no-repeat;
}

2.2 If you would like to use text as the logo:

.login h1 a {
    background:none;
    text-indent:inherit;
    display:inline;
}

There you go! The functions and the styles can be updated as you want. For example, if you want to use the background of your homepage, just change the path accordingly, try it yourself!