Indeed, the most famous type of the WordPress Admin Page is the WordPress Login Page. At first glance, this page seems clean and straightforward, but the truth is that there are many hidden gems you should consider. It’s not exactly a piece of cake for new users, especially if you’re trying to get to the bottom of the underlying software. Yet, we are here to show you how it works:

null

First of all, we’ll teach you a trick for changing the logo on the main login screen:

All that you have to do is to copy-paste the following code in the functions.php section and to replace the existent image with the one you would like to use. As simple as that!


function custom_login_logo() {
    echo '%MINIFYHTML4882ff723e0724feebd7f16828a93d9725%';
}

add_action('login_head', 'custom_login_logo');

There is also the WordPress login head option, that attaches a tiny CSS option to the unit of the screen’s HTML. This is how you can change the H1 tag’s background image with a personal custom logo. Don’t forget to add an “!important” flag in the CSS in order to overwrite the default logo image.

Once you’ve added the code, your logo will appear on the page, placed above the login form. See? It’s not rocket science!

How to change the logo image URL

The logo image will remain linked to wordpress.org by default. Sometimes, you’d expect to direct the link towards a different location, either the homepage of your site or some document.

You can change this link by adding a few code lines in the bottom section of your functions.php file:


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

function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

How to change the logo title?

The last part of the process is to change the logo title, namely the attribute of the link, to something different than ‘Powered by WordPress’. Through this you can personalize the logo:


/*Change the "Powered by WordPress!" title*/

function custom_login_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle','custom_login_title');

How to add a custom background?

null

Your login page will become much more interesting and personal if you will add a custom background. It can be both: a plain and gradient color, all you have to do is to choose the one you fancy the most.

Add the following code to the custom-login-styles.css file:


body.login {
    background-image: url(‘plain.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

Don’t forget to put the name of your personal image instead of the file name mentioned second line (plain.png).

How to customize the appearance of the login form?

This section is the best place for improvisations and creative ideas. They can improve the visual aspect of your login form and turn it into something you like the most. You’re just an attempt away from creating a site that looks and feels just the way you want it to.

The first task is to style labels (darken the text) so that the input boxes will immediately look rounded and friendlier.


.login label {
  font-size: 12px;
  color: #555555;
}

.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

The button may also need some styling. You can use a lighter shade of blue for it.


.login .button-primary {
  width: 120px;
float:right;
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
  background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
  background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
  background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
  background: -o-linear-gradient(top, #17a8e3, #17a8e3);
  background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
  background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
  background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:active {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
  background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
  background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

How to redirect users after they’ve logged in?

null

Traditionally, logged users are automatically redirected to the admin page. But what you may want is to redirect users to a specific area, a site you want them to see or to register at. That’s why you need to trigger the login_redirect filter, and the filter will take them exactly where you want them to ‘land’.


function my_loginredrect( $redirect_to, $request, $user ) {
  if ( isset( $user->roles ) &&is_array( $user->roles ) ) {
    if( in_array('administrator', $user->roles)) {
      return admin_url();
    } else {
      return site_url();
    }
  } else {
      return site_url();
  }
}

add_filter('login_redirect', 'my_loginredrect', 10, 3);

Don’t hesitate about it, it’s not as complicated as it looks like. The only thing we added is the redirection condition: The filter checks the role of each user, meaning that admin users will arrive at the admin page (admin_url()) as usual, but everybody else will be redirected to the primary homepage (site_url()). A precaution to have in mind is that administrators need access to the homepage too, just in case if the admin redirection fails. The best side of the process is flexibility, as you’re allowed to change both URLs and to direct users to every page you want. The replacement can be done directly through WordPress shortcuts, or by doing some hard coding of the links.

How to remove the lost/forgotten password link?

Users don’t like it, but it is another matter of precaution that you may really need. Think about it: what if someone hacks your email, gets access to your login information, and resets the password to misuse or even shut down your WordPress site?

Below you have another snippet, that shows how you could remove a lost/forgotten password link from the login screen. All you have to do is to add the following code to the functions.php file:


function remove_lostpassword_text ( $text ) {
     if ($text == 'Lost your password?'){$text = '';}
        return $text;
     }
add_filter( 'gettext', 'remove_lostpassword_text' );

How to modify the login error message?

The login error message is the small text box that appears on the login screen whenever someone tries to access the system using void data. The message is usually simple (Invalid username, for instance), because it alerts users of what is most probably a spelling mistake. However, this could alert hackers too, and will unluckily provide them an accurate explanation of what they need to correct.

The best way to deal with this issue is to replace the unified text with our own, using the following code in the functions.php file:


function login_error_override() {
     return ‘Sorry Charlie, those are the incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

How to remove the login page shake?

Sometimes, mistaking the username/password makes the login form shake in order to inform you that your information is wrong. It is a clear signal that something has to be changed.

The feature is fairly functional, but some people find it annoying. If you’re one of them and you want to get rid of this shake option, ‘attach’ this snippet to the functions.php file:


function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

But first…check the ‘Remember Me’ box!

This should be done at least manually because the site will never remember your data without permission. You may want to check it for new passwords, but if you have the same password for all platforms, you won’t even need it.

The good thing is that there is a code that can check the box by default:


function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );
function rememberme_checked() {
     echo "";
}

Logging in with your email address

We all know from personal experience that usernames are ‘forgettable material’. We could always benefit from an alternative login option.

In order to enable users to log in with their email (instead of their username), you’d need the following code snippet:


add_action( 'wp_authenticate', 'email_address_login' );

function email_address_login( &$username, &$password )
{
    $user = get_user_by( 'email', $username );

    if( !empty( $user->user_login ) )
    {
        $username = $user->user_login;
    }
}

Following these simple tips will allow you to fully customize your WordPress from the scratch. Try and enjoy these great options for improving your experience! Also, if you have any suggestions, please feel free to share them through comments!

2 FREE RESOURCES TO INCREASE PAGE SPEED AND GOOGLE RANKING

Join our mailing list to receive your FREE ebooks about how to boost your site speed, how to increase your google ranking and your visitors count along with the latest news and giveaways.

there are 4 comments added

  1. Pete Preston 17th March 2016

    Hmmm...I am slowly thinking of becoming a ThemeFuser. I have been envato for the past 4 years but with what you are doing with CORE, I just might jump in for my next project.:)

    • Hi Pete! I am very thrilled that you like our latest theme The Core. Keep your eyes on it, as we plan to add more great features that you’ll definitely benefit from!

  2. Shahab Khan 2nd April 2016

    Awesome post DIMI, Thank you for sharing.Just found out. The login logo background css should also be wrapped in html [style] [/style] tag

    • Hi Shahab,Happy to hear that our article was helpful! Keep an eye on our blog for more useful tips!

Reset fields

back to top