Let’s face it, the default WordPress login screen is quite boring.
Nothing to get too excited about, is it? Very… grey.
So it’s worth spending a little time changing it with a simple plugin.
Why change your WordPress site login page?
WordPress site owners can brand the login area to match their branding and colours.
If you are a web designer, customizing the WordPress site login can add an extra special touch to a client site.
If you own a membership site built on WordPress, a custom login screen makes it clear to your members when they are logging in and out of your site – and not some other WordPress site.
How To Improve Your WordPress Site Login Screen With Tesla Login Customizer
Tesla Login Customizer is a fairly new plugin from respected theme authors Tesla Themes which lets you change the default WordPress login page to something much more exciting.
You don’t need to know any code to make a unique WordPress login page. The plugin has several options to configure in terms of background, colours, fonts and logo.
It’s free to download from the WordPress repository.
To install the plugin, go to Plugins > Add New from your Dashboard and search for ‘Tesla Login Customizer’. Select the plugin, then install and activate it.
Now go to the Tesla Login menu item to start customizing!
Tesla Login Customizer Templates
Go to the Templates tab to choose a template.
The plugin comes with 5 prebuilt templates, named after planets: Mercury, Venus, Terra, Mars and Jupiter.
Once you’ve selected one, you can click the blue Login Page button to preview the login screen.
If you switch to another template, a warning dialog will pop up to tell you that your settings will change. If you accept the change, you’ll get a confirmation message with the chance to revert to your previous settings.
This is important to note – if you do change something inadvertently, you get this one opportunity to go back to what you had.
Once you have chosen a template you like, you can customize it further.
Tesla Login Customizer General settings
The General tab lets you choose from a number of options. You can change:
- the primary colour
- the background image
- a background colour
- the font, and its size, style and colour
- page redirects
Primary Color
Select a colour from the colour picker, or input a hex code.
Changing the colour affects different things dependent on which theme you use. In the Mercury theme it sets the login button colour.
Background Image
You can upload an image or use one from the Media Library.
For reference, the Mercury theme background is an image 1920 x 1080 px set to No-Repeat and to cover the background area.
The Jupiter theme background is a pattern set to Repeat, which also covers the background area.
Read my posts to create an image that’s just right:
Background Color
You need to remove the background image if there is one for this to show.
Font
Select from a long list of Google Fonts.
For font variations, 100, 400 and 700 are font weights, i.e. light, normal or bold respectively. 100 Italic means the text is light and italic.
The font subset you most likely won’t need, unless you need characters in a particular language.
And of course you can change the font colour too.
Page Redirects
These options are really useful if you have a membership site. You can set URLs for users to be directed to once they have registered or logged in – for example, a custom Welcome page.
Tesla Login Customizer Logo options
Here you can choose to use no logo at all, or – more likely – your own brand logo.
If you want the logo to show full size, enter the width and height values for it in the appropriate boxes.
You can add a link to your website too.
Tesla Login Customizer Form settings
There are a lot of options here.
Form options
You can change the form placement (the default is centre), change the background colour or use an image, alter the padding round the form and change the colour and background of the log in button.
Animation options
You can also turn off the Shake effect which is triggered when a user logs in with the wrong credentials, or change it to another animated effect. There are a variety of effects to choose from.
Plus you can have the form animate when it appears or when it submits.
reCAPTCHA
Another option is to add a reCAPTCHA to your form. You’ll need a site key from Google to enable this.
This option adds a checkbox that the user must check as well as providing the correct login information.
This can prevent bots logging into your site or spam registrations.
Tesla Login Customizer Advanced tab – add custom CSS and JS
The Advanced tab is where you can add your own custom CSS and Javascript.
Here, using the Mars theme, I added some code to change the colour of the text for some of the form labels.
body.login #login form label {
color: black;
font-weight: 400;
}
#login form input[type="text"],
#login form input[type="password"],
#login form input[type="email"] {
color: black;
}
The result:
Screenshots and demos
For more screenshots and demos showing the animated effects visit the Tesla Login Customizer Screenshots page.
If this tutorial helped you spruce up your WordPress site login area, please share!
Leave a Reply