If you want, another day we’ll take a look at the many plugins available to customize the WordPress login screen, but today we’re going to change the WordPress login screen to your liking, using only a few codes.
Why should I customize the WordPress login screen?
There are several reasons why you should change the login screen of your WordPress website, and the main ones are these:
- It doesn’t have your brand logo but the WordPress logo.
- The WordPress logo links to wordpress.org instead of your website.
- It lacks customizable useful links.
- You can’t choose which page to send users to after login.
- The colors are boring and don’t fit with the image of your website.
But the main one is that it is not customized to match the look and design of the web, and it is a touch of distinction that should always be offered, especially on customer sites.
Where do I have to paste the codes to customize the WordPress login screen?
When we have to copy and paste WordPress codes to customize our website I almost always recommend using the functions.php file of the active theme (which is a child theme, so as not to lose changes when updating the theme) or in a custom plugin, depending on whether the customization depends on or is related to the theme (in the first case) or if the customization is global WordPress (in which case it would be better with a mu-plugin).
However, if you are really afraid of touching the code of your theme or you are afraid to make your first plugin, you can always use a plugin like Code Snippets, which offers a simple interface from which to add custom code fragments (snippets) and have them controlled, ordered, and be able to activate or deactivate them at the click of a button.
It is very simple to use, as you can see in this screenshot:
You can then easily activate or deactivate the code snippets you have created.
Customizing the WordPress login screen
Let’s see how to remedy these shortcomings of the WordPress login screen by helping us with a few codes, you’ll see how easy it is.
Customize the WordPress login logo
The first thing to do would be to change the login logo, so that instead of the WordPress logo, our logo or our client’s logo is displayed.
The code would look like this:
function wphelp_my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(https://wphelp.com/wp-content/uploads/wphelp-logo.png);
height:106px;
width:142px;
background-size: 142px 106px;
background-repeat: no-repeat;
padding-bottom: 10px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'wphelp_my_login_logo' );Code language: JavaScript (javascript)Do not copy and paste the above code as is, as you need to make some changes to customize it for your website:
- Change the
background-imageURL to that of your logo, preferably in PNG format with transparent background, so that it fits any background. - Change the pixels of the
heightparameter to the actual height of your image. - Change the pixels of the
widthparameter to the width of your image. - Change the pixels of the
background-sizeparameter to the sizes defined inheightandwidthabove. - Change the
padding-bottomparameter to the pixels you want, just add a space between the logo and the data padding box.
A couple more tips:
- By default the size reserved for the login screen logo is square, 80×80 pixels, so if you don’t specify height and width as I indicated above your image will look very small, adapted to the available space (
background-size). - Try not to make the image too big, about 300 pixels wide at most, or the logo will be too big in relation to the input box, and it will look ugly.
By the way, to know the URL of your logo, after uploading it to the media screen of the WordPress administration, click on the image and there you will have a field with the URL, for you to copy and paste it into the code snippet we have seen above.
WordPress is so nice that it even offers you a button to copy the URL.
Once the changes in our code snippet have been saved, we will have a login screen that will now display our brand.
Customize the URL of the WordPress login logo
Now that we have the logo to our liking we are going to change the URL to which it links, which as I said before, by default would take you to WordPress.org, and normally the logical thing would be to take you to the front page of our website, right?
Then use this code:
function wphelp_my_logo_login_url() {
return 'https://wphelp.blog/';
}
add_filter('login_headerurl', 'wphelp_my_logo_login_url');Code language: JavaScript (javascript)As you may have guessed from the code, there is only one change to make here. Exactly! change the example URL (https://wphelp.blog/) to your own.
Save and you’re done…
Customize WordPress login logo URL
As an additional touch of customization to the previous one we can also add a pop-up text that will be displayed when hovering over our brand new logo, for example:
function wphelp_my_logo_login_url_text() {
return 'Return to WordPress';
}
add_filter('login_headertitle', 'wphelp_my_logo_login_url_text');Code language: JavaScript (javascript)In this code you only have to change the custom text after return for the one you want.
Adding custom links below the WordPress login screen form
You may have already noticed that, by default, WordPress displays several links under the form on the login screen:
- Lost your password?
- Go to ‘
Your website name“ - Privacy Policy (if you have created and configured it correctly in the WordPress settings)
But what if you want to add your own custom links in that area, well, that’s what we’re here for.
function wphelp_my_login_links() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #4da28f; text-decoration: none;" href="https://wphelp.blog/">Learn more about WordPress with our blog →
</a>
</p>
<?php }
add_action('login_footer','wphelp_my_login_links');Code language: JavaScript (javascript)In this code we are adding, with some styling of course, a custom link text. Simply change the text and the link, even the colors, to whatever you want, or even add other paragraphs with more links.
What you get is this:
Custom background image on the WordPress login screen
Another cool customization you can do is to add a custom background image on the WordPress login screen.
The code to add would look like this:
function wphelp_my_login_background() {
echo '<style type="text/css">
body.login{
background-image: url( "https://wphelp.com/wp-content/uploads/busi.jpg" )!important;
}
</style>';
}
add_action('login_head', 'wphelp_my_login_background');Code language: HTML, XML (xml)You only have to change the URL of the background image of the example for the one you want to put.
And you would get something like this…
If the image is not big enough you’ll see this mosaic effect like in the screenshot above.
Custom background color and form on the WordPress login screen
If you prefer something less radical than adding a background image, a very good option would be to customize the background and form colors of the WordPress login screen.
It would be done with a code like this:
function wphelp_color_background_login() {
echo '<style type="text/css">
body { background: #b6d5ed; }
.login form { background: #fcf499; }
</style>';
}
add_action('login_head','wphelp_color_background_login');Code language: HTML, XML (xml)The access screen would look like this…
For the example, I have put some colors perhaps too flashy(so you can really see what I’m talking about), but you can change those (the color codes after background:) in the code to your liking.
Custom redirection after WordPress login
By default, when any user accesses from the WordPress login screen is sent to the administration area of the website, but what if you want that not to work like that?
We could, as in this example, make a conditional redirect, depending on the profile of the user accessing:
- If the user has administrator profile (
administrator) redirect him to the WordPress administration. - If the user has any other profile than administrator redirect him to the front page of the website.
The code would be this:
function wphelp_my_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 site_url();
}
} else {
return site_url();
}
}
add_filter('login_redirect', 'wphelp_my_login_redirect', 10, 3);Code language: PHP (php)It works as is, you don’t have to modify anything in this code, just add some more profiles (editor, author) to the in_array, if you want these profiles to be redirected to the administration as well.
Well, I hope you have learned how to customize the WordPress login screen to the fullest and that your login is no longer the same as always. Let me know how it turned out.
