There’s nothing wrong with the WordPress default login screen – it’s sober and functional. However, sometimes, due to the characteristics of our platform, we need clients or collaborators to use it to enter their user accounts, and we want to give a complete brand image. Fortunately, the WordPress login can be customized.
We Offer WordPress Maintenance Services!
We take care of all aspects of your WordPress website. Focus on what you do best for running your business and leave your WordPress website maintenance needs to our team of WordPress experts..
Using a WordPress customized login page is one of the main ways to provide a unique user experience. It elevates brand identity, which is crucial for any business to be successful.
In this post, we are going to see how to customize the WordPress login page step by step, changing the Logo, the colours, the font, and the background, so that we completely adapt it to our corporate Image.
Why Should You Customize WordPress Login Page?
Why do we buy a WordPress theme? Because we don’t want our site to look like any other WordPress site out there. We want ours to be unique. If that’s the case with themes, then why not the login page?
The default WordPress login page is the starting point for blogs or membership sites that require visitors to register to access the content. Before anyone can access any subscriber-only material, they have to log in to the site first.
Think about it. When you’re about to enter the “members only” area of a newly purchased membership site and see the same login screen you’ve seen on every other WordPress site, how do you feel? The effect is slightly toned down, if not significantly.
That’s why your business needs a custom version of the WordPress login page that matches the look and feel of your business. If you are building a membership site, If you’re building a custom solution for your clients, it’s a good idea to tag the WordPress login page (and preferably the admin area). White labeling your client’s WordPress site elevates brand identity and functions as a marketing agent for inbound traffic.
A custom WordPress login page isn’t just about good looks. And it also increases your website security.
How to Customize WordPress Login Page
So let’s get to work. You will see that it is straightforward and fast. To achieve this, we are going to use the LoginPress plugin.
Although there are several plugins of this type, I use this one because it works well, implements HTML5 and CSS3 (the latest web technologies), and is regularly updated. That is, it is not “abandoned”. And you can also change the login page URL with this plugin.
Once installed and activated the LoginPress plugin, you will see that a new option appears in the administration menu called precisely LoginPress.
Now go to LoginPress > Customizer. Now go to LoginPress.
As you can see, there are many tabs: Themes, Logo, Background, Customize Login Form, Customize Login Form, Button Beaty, etc:
Let’s start with the first one, Logo, which is to customize the login by replacing the WordPress logo with your own.
Custom Logo at Login
To change the Logo on the login page, just click on the Logo option just below the Themes button.
The width available for your Logo is 350 pixels. Later, when it comes time to customize the form, you’ll find that this can be increased, but it’s not highly recommended – mobile users need to be considered.
If you upload a logo more significant than those 350 pixels, it will be resized, but as we will see when setting the height, you better upload it as much as that width. If necessary, resize it yourself. You already know that you can use the utility included in the media library for this.
Please take a good look at the Logo height because we will have to set it manually in the Logo height option. That is why I was telling you that it is better to put it already resized: that way, you will be clear about its height.
You can leave the Logo width option at 83%. Then you can play with it if you discover that you don’t like it that big. Once this is done, and the height in pixels is established, press Publish, and that’s it.
The result:
We already have our logo instead of the WordPress one being displayed.
Now we are going to go one step further and customize the background. To do this, we are going to go to the Background tab.
Customize the Background on the Login Screen
Here you will see several options, which boil down to two: set an image as the background ( Custom image background ) or a Video (Muted background video). It is more advisable to use Image since, for an image, you will have three options:
- Use a large video that occupies the entire screen so that loading will be prolonged (it doesn’t make sense on a login screen).
- Make the image repeat until it fills the entire screen using the Repeat option. It’s not a bad option if you use one of those endless patterns.
- Display the Image only once, aligning it using the Background Position option.
As you can see, none of the three alternatives is highly recommended, except in specific cases. It can be terrific to get an image large enough but well-optimized not to weigh too much.
I have achieved something like this with an image with a gradient like a logo in the example. The result is, as you can see, quite apparent:
Customize Button Colors
Now, let’s move to the buttons. Blue is the default button colour for any WordPress website.
With this feature, you can totally customize your buttons, like colour, border colour, hover colour, button box-shadow, button size, button padding, and what not?
You can also customize fonts and implement google fonts, but it comes in a premium version.
Well, here is the result of what I changed:
Customize the login form
Finally, we are going to see how to customize the form. For that, we go to the Customize Login Form tab.
In it, you can choose the colour for the texts of the login screen, the links, the background and the border of the login box, and, finally, the width of it.
Be careful when using this last option (the width of the form) and remember that most of the web traffic comes from mobile devices, and an excessive width can make it not look good on smartphones. If you can avoid changing the width (350 pixels by default), avoid it.
Anyway, the result might look something like this (compare it to the WordPress login screen):
Video: Customizing Login Screen Using LoginPress
And if you are one of those who prefer to see it live, or if you have any doubts, here is a short video in which you can see how to do it step by step:
Conclusion
You have already seen how easy it is, thanks to this LoginPress plugin, to customize the WordPress login screen. Suppose you are only going to use it. It is not very useful, as you can imagine (although it can also be done, of course, that only you see it does not mean that you cannot “enjoy” your brand). Still, some business models may require that clients and collaborators also use it, and improving branding is always something positive.
I hope this article helps you learn how to customize the WordPress login page. If you have any problems or questions, feel free to share your thoughts.
