Even after working with WordPress for a long while, many people are still surprised to learn that the backend of their website is just as customizable as the front and that none of the things they take for granted are really set in stone.
We ‘ve covered this a bit in how to customize the WordPress dashboard and customizing the WordPress editor. Today we want to continue with this theme by turning to another internal page users interact with on a daily basis — the login page.
Just like other parts of WordPress, we can completely customize the login page. First, we will go over a few good reasons to do so in the first place, then look at code snippets to customize the login page manually, and finally a number of plugin options that let us do the same.
Are you ready? Then let’s get started.
Why Customize the WordPress Login Page?
Unfortunately, WordPress doesn’t come with any native options to make changes to its login page. Yet, there are good reasons to add them since a custom WordPress login page offers several benefits:
- Consistent branding — Which scenario is better: showing users the default WordPress login page or a custom page that fits the site’s color scheme, typography, and sports its logo? Easy to answer, isn’t it? Especially if you’re building WordPress sites for other people, they will sure appreciate that extra bit of branding a custom login page brings to the table.
- Improved user experience — Customization is not only about design but can also include functionality changes such as automatic redirection after login. This results in better user guidance and helps move visitors along to landing pages, the home page, forums, or wherever you would rather have them.
- Improved navigation — In addition to that, you can add elements to the login page in order to provide additional value to visitors. Think navigation links, social icons, or whatever else you want.
- Better security — Finally, creating a custom WordPress login page can also increase your site’s security. For example, by moving the page to a custom address you can make it harder to find for automatic scripts and hackers. Additionally, you might add captcha and other security measures.
As you can see, there are plenty of good reasons to customize the WordPress login page. In our next step, we will look at how we can achieve these changes.
Customizing The WordPress Login Page Manually
As usual, you can change a lot in WordPress by working with code and files. The login page is no exception. Most of the code below goes to your theme’s functions.php to make changes to the page. If not, we will instruct you to do otherwise.
Create a Custom Stylesheet for the Login Page
As a first measure, we will talk about how to change the design of the page. This can be done via CSS just like you would for the rest of your site inside your theme’s style.css. However, to make things a little more organized, let’s create a custom stylesheet for the login page.
For that, go to your (child) theme folder (under wp-content/themes/yourtheme) via FTP or whichever interface you use to access your server. Here, set up a new directory called login. This is where we will save all styles and images we might use for our page.
Next, create an empty text file and call it login-styles.css (actually, the name isn’t too important as long as you use the one in the code below). Upload this file to the new login directory.
After that, add the following code to functions.php to have WordPress load your new stylesheet.
function custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login/login-styles.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_stylesheet' );
Now any CSS you add to this stylesheet will be loaded for the login page. This enables you to change any part of the design to your liking.
Be aware, however, that WordPress already has files for this page in place. As a consequence, you might have to use very specific CSS operators to overwrite the existing styles. Thankfully, the WordPress Codex provides a list of these:
body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}
For example, to change the input button on the login page, you could use the following code:
body.login div#login form#loginform input#wp-submit {
background-color: orange;
border: medium none;
border-radius: 0;
box-shadow: none;
padding: 0 36px 2px;
text-shadow: none;
}
The result looks like this:
Of course, the above operator is a bit of an extreme example. Most times, you will be able to achieve the same with less targeted code.
You can also change everything else on the page, from the background color to fonts to design. With a little CSS knowledge, there are no limits to your imagination.
Change the WordPress Login Page Logo
A good idea to make your site’s branding more consistent is to use your own logo on the login page (as beautiful as the default WordPress logo is). This is done by simply changing the background image of the h1 link at the top of the login page.
You can do this in two ways. The first is to make use of the custom stylesheet we just created like so:
body.login div#login h1 a {
background-image: url("yourlogo.png");
}
If you now put a logo file with the name yourlogo.png into the login folder of your theme directory, it will start showing up on your page.
If you don’t want to create the custom stylesheet, you can also change the logo in a more direct way via functions.php:
function custom_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/login/yourlogo.png);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_logo' );
Personally, I prefer to go the stylesheet route but it is up to you.
After that, all that’s left is to change the URL your logo points to and its title (that’s the text that appears when somebody hovers over the logo with their mouse). After all, doesn’t it make more sense to link to your own website instead of to the WordPress homepage? We think so too.
To change the URL and hover text, just input this into your functions.php file:
function my_login_logo_url() {
return home_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' );
Don’t forget to change ‘Your Site Name and Info’ to whatever makes sense for you. To change the logo link to a custom URL rather than your homepage, use this code:
function my_login_logo_url() {
return 'http://yourcustomurl.com';
}
add_filter('login_headerurl', 'my_login_logo_url');
Alright, that’s enough for this part of the login page, let’s move on to other things.
Check The Remember Me Box By Default
If users check the Remember Me checkbox before login, they will stay logged in to your site for 14 days. Otherwise, they are logged out automatically after two days or when they close their browser.
By default, this box is unchecked, however, you can easily change that with the following piece of code.
function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );
function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}
As usual, this needs to go into functions.php in order to work.
Change The Login Error Message
Any user who inputs invalid credentials into the login form gets an automatic error message, telling them which part is wrong, username or password.
Unfortunately, this can make your site less secure since it also gives hints to hackers on how to access your site. Therefore, some people advise changing the message.
Fortunately, this is pretty easy. To create a custom message, just input the following code into functions.php:
function custom_login_error_message()
{
return "Yikes, that wasn't quite right. Please try again.";
}
add_filter('login_errors', 'custom_login_error_message');
From now on, anyone who forgets their password or username will see that very message.
Redirect Users After Login
Usually, anyone who logs into your WordPress website will automatically go to the dashboard. However, it can make more sense to send them to a custom greeting page, a membership area or elsewhere.
Nothing easier than that:
function custom_login_redirect( $redirect_to, $request, $user ) {
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array('administrator', $user->roles)) {
return admin_url();
} else {
return home_url();
}
} else {
return home_url();
}
}
add_filter('login_redirect', 'custom_login_redirect', 10, 3);
With the above code, anyone who is not an administrator is automatically rerouted to your site’s homepage. Yet, if needed, you can also send them to a custom URL like so:
function my_loginredirect( $redirect_to, $request, $user ) {
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array('administrator', $user->roles)) {
return admin_url();
} else {
return home_url() . '/members';
}
} else {
return home_url() . '/members';
}
}
add_filter('login_redirect', 'my_loginredirect', 10, 3);
This way, any user without admin rights will be sent on to yoursite.com/members. Change as needed.
Remove Links
The login page has two links on it. One is the “Lost Your Password?” link. It enables users to reset their password in case they have lost it. The other is the “Back to” link which takes users back to the homepage.
There are good reasons to want to get rid of either of those, especially to achieve a cleaner design. You can do so by inputting the following into your login page stylesheet:
p#nav {
display: none;
}
p#backtoblog {
display: none;
}
The first piece of code removes the password recovery link, the second links back to your homepage. It only removes them from sight and not actually from the page, but that’s enough for our purposes.
Add Extra Links To The Homepage
Yet, it’s not only possible to remove existing links, you can also add extra ones. This can make sense if you want to give visitors a shortcut to your blog, documentation, social profiles, or other addresses.
You can add them to the bottom of the login form like this:
function custom_loginfooter() { ?>
<p class="custom-footer-link">
<a href="http://yoursite.com/blog/">For the latest tips & tricks, visit our blog!</a>
</p>
<?php }
add_action('login_footer','custom_loginfooter');
Of course, you can change the link address and text to whatever makes sense for your own site. The custom-footer-link class also enables you to style the link to your desire. This can come in handy for example to add social icons.
Create A WordPress Login Page From Scratch
So far we have learned a lot of ways to change the existing login page. However, it is also possible to create an entirely new page.
Unfortunately, instructions on how to do so are a little outside of the scope of this article. However, if you are interested, the following resources will point you in the right direction.
Creating a Custom WordPress Login Page via Plugin
Of course, WordPress wouldn’t be WordPress if you couldn’t do all of these changes and more via a plugin. In fact, users have a whole range of plugin solutions to choose from and we will talk about some of them now.
Custom Login
Our first plugin is mostly concerned with the design of the login page. It allows you to change the background color, background image, and logo at the click of a button.
Optionally, you can also add custom CSS, HTML, and JavaScript, and change other settings such as the time interval until a login expires.
If that isn’t enough, there are also a number of paid extensions that let you change the login URL, add redirects and more.
Custom Login Page Customizer
This next plugin deserves mention because it adds customization options for the login page to the built-in WordPress customizer. That means you can preview any changes you make before committing them to your site. How convenient!
As can be expected, Custom Login Page Customizer allows you to change your logo, the background of both the page, and form as well as all other stylings. However, overall options are limited to design, you can’t add any functionality like redirects or other such things.
Customize WordPress Login Page
Customize WordPress Login Page offers similar styling functions as its predecessors, however, it comes with a special feature. The plugin allows you to add a slide show to the login page background. This means users can choose multiple background images and have them displayed with different slide show effects.
In addition to that, you can also add social icons to the page as well as integrate Google Fonts for custom typography. So, if you are looking for some extra pizzazz on your login page, this plugin is definitely worth checking out.
Uber Login Logo
If all you want is to change the logo on your login page, this is the plugin for you. Uber Login Logo is a lightweight solution for branding the login page with your own logo but offers no other stylings or options.
Rename wp-login.php
As you can probably guess from the name, this plugin allows you to change the address of the WordPress login page. It can be used either to make your site more consistent or to add an extra layer of security. Just enter the address you’d like to use, save and you are done. Easy peasy.
Peter’s Login Redirect
Another single-purpose plugin. This time one gives you options to add custom redirects. That way, you can send visitors to your homepage or any other page you desire, even on a per-user basis.
As you can see, plenty of plugin solutions exist. If that wasn’t enough, you can find more options to customize the WordPress website (including a number of paid plugins) in this article.
Are You Ready For A Custom WordPress Login Page?
Once more, we can see the incredible flexibility of the WordPress platform. Literally, everything about it is fully customizable, including those parts that most users take for granted.
Customizing the WordPress login page offers many benefits like consistent branding which especially your visitors and clients will appreciate. However, a custom login page can also help improve site navigation, user experience, and site security.
Above we have provided you with loads of code examples that let you both change the design and styling of your login page as well as its functionality. Whether you want to change colors or fonts, switch on the “Remember me” box by default, change the login error message or redirect users after login, it’s all there.
All those unwilling to get their hands dirty with coding can also find a number of WordPress plugins that will do most of the heavy lifting for you. Whichever route you take, with a custom login page you are one step closer to taking full control of your site and making WordPress truly your own.
Do you customize your WordPress login pages? How do you do so? Any plugins or tips to add? Please do so in the comment section below!
12 Comments