A beautiful and nicely crafted theme can change the look and feel of your WordPress site. But, what about the login page? Default login page is too ordinary to attract your visitors. Although this can be handled with a custom login page, but most of the themes does not include this feature.
Here I’m going to show you, how can you customize your login page.
1. Disable Shaking effect
Login page shakes if anything wrong happens. For example if the login details provided are wrong or any of the fields is submitted empty. You can override it’s default events. If you want to disable this shaking effect, add this code into functions.php file of your theme.
|
1 2 3 4 |
function na_shake_error_codes( $shake_error_codes ) { return array(); } add_filter( 'shake_error_codes', 'na_shake_error_codes' ); |
2. Change login header URL
By default, login header image is hyperlinked to http://wordpress.org. If you want to change it to your own, use this code-
|
1 2 3 4 |
function na_login_header_url( $login_header_url ) { return 'http://nazmulahsan.me'; // your custom URL here } add_filter( 'login_headerurl', 'na_login_header_url' ); |
3. Change login header image title
By default, it says Powered by WordPress. Use this code to change it to a custom text-
|
1 2 3 4 |
function na_login_headertitle( $login_header_title ) { return 'My Site Title'; // your custom title here } add_filter( 'login_headertitle', 'na_login_headertitle' ); |
4. Add new CSS class to body tag
This code snippet will help you-
|
1 2 3 4 5 |
function na_login_body_class( $classes, $action ) { $classes[] = 'my-new-class'; return $classes; } add_filter( 'login_body_class', 'na_login_body_class', 10, 2 ); |
5. Customize login message
Paste this code into your functions.php to change the texts showing above the login form-
|
1 2 3 4 |
function na_login_message( $message ) { return 'This is our custom message'; } add_filter( 'login_message', 'na_login_message' ); |
6. Change logout redirect URL
By default, it redirects to login page after you log out. This code will change logout redirection to a new URL. Even you can set different URLs for individual user.
|
1 2 3 4 5 6 7 8 9 10 |
function na_logout_redirect( $redirect_to, $requested_redirect_to, $user ) { // if user ID is 1, then go to homepage if( 1 == $user->ID ){ return get_bloginfo( 'url' ); } // otherwise go to default redirect url return $redirect_to; } add_filter( 'logout_redirect', 'na_logout_redirect', 10, 3 ); |
7. Lost password redirect
Take users to a specific page after they submit lost password form.
|
1 2 3 4 |
function na_lostpassword_redirect( $lostpassword_redirect ) { return get_permalink( 1 ); // go to page with ID 1 } add_filter( 'lostpassword_redirect', 'na_lostpassword_redirect' ); |
8. Register redirect
Take users to a specific page after they submit registration form-
|
1 2 3 4 |
function na_register_redirect( $register_redirect ) { return get_permalink( 1 ); } add_filter( 'registration_redirect', 'na_register_redirect' ); |
9. Change login redirect URL
By default, it redirects to wp-admin after you log out. This code will change login redirection to a new URL. Even you can set different URLs for individual user.
|
1 2 3 4 5 6 7 8 9 10 |
function na_login_redirect( $redirect_to, $requested_redirect_to, $user ) { // if user ID is 1, then go to homepage if( 1 == $user->ID ){ return get_bloginfo( 'url' ); } // otherwise go to default redirect url return $redirect_to; } add_filter( 'login_redirect', 'na_login_redirect', 10, 3 ); |
10. Add some meta tag in head tag
Add this code into functions.php file.
|
1 2 3 4 |
function na_login_head() { echo '<meta name="google-site-verification" content="UA-42226400-1" />'; } add_action( 'login_head', 'na_login_head' ); |
11. Add a new stylesheet for login page
Here is your code-
|
1 2 3 4 |
function na_login_enqueue_scripts() { wp_enqueue_style( 'na-login', get_stylesheet_directory_uri() . '/login.css' ); } add_action( 'login_enqueue_scripts', 'na_login_enqueue_scripts' ); |
12. Add some text after opening body tag.
Paste this code into functions.php
|
1 2 3 4 |
function na_login_header() { echo 'This is our login page'; } add_action( 'login_header', 'na_login_header' ); |
13. Add text to login footer
This code will add This is our login page footer in the footer area of login page.
|
1 2 3 4 |
function na_login_footer() { echo 'This is our login page footer'; } add_action( 'login_footer', 'na_login_footer' ); |
14. Add new field in register form
This code will (visually) add a new field for ‘phone number’ in registration form.
|
1 2 3 4 5 6 7 8 9 |
function na_register_form() { ?> <p> <label for="user_phone"><?php _e('Phone') ?><br /> <input type="text" name="user_phone" id="user_phone" class="input" size="25" /></label> </p> <?php } add_action( 'register_form', 'na_register_form' ); |