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 '<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', '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.
WordPress Login plugins
There has been few plugins for customizing wordpress login rather than post or widget related plugin. But there are many plugin to display your login box on sidebar. One of the most popular plugin for login template is Theme My Login.
Theme my login wordpress plugin
The great feature of this plugin is that, it match your website layout. Theme my login generate template and functionality, but styled with your stylesheet used on your wordpress theme. So general visitor can’t separate this from your sites other pages.
How theme my login works:
This plugin use your page template for creating the login/registration/forgot password page. So you got the option for using sidebar widgets on these user pages ( if sidebar is included on your page template ). It changes the login/registration/forgot password url to its own. So users are redirected to their template page if a user click on any login or registration link rather than typing the wp-login default url manually. One disadvantage of theme my login plugin is when someone manually enter the default url, it doesn’t redirect.
Custom Login
Customize WordPress login page with easy backend. Plugin has lot of option to manage the Login page css, image and layout. Secure and fast loading. HTML & CSS box for advanced customization.
My Brand Login
Easily Customize Your Login, Registration, Lost Password and User/Admin Panel.
Plugin Features
- Add Image/Color Backgrounds.
- Add Login Form Background Image/Color.
- Change the Login Font Color.
- Replace the WordPress Logo on the Login + Admin/User Pannel
- Redirects the Login Logo to Your Websites URL
- Uses jQuery Fade Features (custom) For a Unique Touch.
- Much More!