WordPress login page Customization by filters, actions & plugins

By default, every wordpress powered site’s login page is located @ http://yoursite/wp-login.php url. Registration and reset pages are called by adding an action query in login ( wp-login.php ) page url. Reset page comes with a lostpassword query attribute for action, like http://yoursite/wp-login.php?action=lostpassword will display the reset page and action=register displays the registration page. Remember, this is the default rules if you are not using any login or registration management plugin, buddypress or any theme with custom login page option.
It comes with a wordpress.org logo image on wordpress default login page, and i think most of the people don’t want to show wordpress.org logo rather than their 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.

Customizations

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', 'w4_login_enqueue_scripts' );
function w4_login_enqueue_scripts(){
echo '';
}
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', 'w4_login_headerurl');
function w4_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', 'w4_login_headertitle');
function w4_login_headertitle(){
 return get_bloginfo('title', 'display' );
}
To use any other title replace get_bloginfo('title', 'display' ) to your title.
Example: As example, view our login page and registration page.

Get familiar with some related functions and hooks for WordPress Login Page

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.

Regards:http://w4dev.com

1 comment: