Customize WordPress Login Page


WordPress have nice login page, but sometime we need to branding our login page. Like shown own site logo or defined image. Moreover, the wordpress.org logo is linked to the wordpress.org site with anchor title attribute “powered by wordpress”. Now, I will show you how to change this without affecting the core files.

The wordpress.org logo file has 67px height and 326px width, so crop your image to this dimension first ( size actually doesn’t matter, for using bigger image, u need some css adjustment ). First, grab the new image url to replace wordpress.org pic, and place it on below code :

add_action( 'login_enqueue_scripts', 'my_login_enqueue_scripts' ); 

function my_login_enqueue_scripts(){ 
echo '<style type="text/css" media="screen">'; 
echo '#login h1 a{background-image:url(the_image_url_or_path);'; 
echo '</style>'; 
}

If the image url is perfect and everything is fine, you will see your new login page image.

The login_enqueue_scripts is called just before the login_head action on wp-login.php file line 82 on wordpress version 3.1.1, and calling our function with this action will place our Css inside login header tag. #login h1 a is used to identify the image anchor with CSS. Image Css Customization can be done with #login h1 a. To change the wordpress login page image url address to your site home page url

add_filter( 'login_headerurl', 'my_login_headerurl'); 

function my_login_headerurl(){ 
return home_url('/'); 
} 

To use any other url replace home_url('/') to the url. To change the wordpress login page image title to your sitename


add_filter( 'login_headertitle', 'my_login_headertitle'); 

function my_login_headertitle(){ 
return get_bloginfo('title', 'display' ); 
}

As WordPress login process uses variety of functions and hooks, we can use them for customizing a bit more.

wp_login_url

– is a function to generate the login url address. To change the url of the function we can simply hook to ‘login_url’.
Example:


add_filter( 'login_url', 'mysite_login_url', 10, 2);
 
function mysite_login_url( $force_reauth, $redirect ){ 
$login_url = 'yoursite_login_url'; 
if ( !empty($redirect) )
 $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url ); 
if ( $force_reauth ) 
$login_url = add_query_arg( 'reauth', '1', $login_url ) ; 
return $login_url ; 
}

This will change the login url to your desire one when the wp_login_url function is called.

login_redirect

– is used to redirect the user after they have logged in successfully.
Example:


add_action( 'login_redirect', 'mysite_login_redirect'); 

function mysite_login_redirect(){ 
return 'your_url'; 
}

So, this will take your user to your defined url address. You can change it based on yours capability or choice.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s