• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Easily Improve Your WordPress Site Login With Unique Branding

Easily Improve Your WordPress Site Login With Unique Branding

Posted: December 23, 2015 Updated: January 4, 2018 by Claire Brotherton
1 Comment

A WordPress login form customized

Let’s face it, the default WordPress login screen is quite boring.

WordPress default login area

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.

Add Plugins - Tesla Login Customizer

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.

Choice of templates in Tesla Login Customizer
The Templates to choose from – you can also choose to customize the default template

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.

Message indicating a change of template in Tesla Login Customizer

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.

Background image selection, repeat and size options
Adding and configuring background images

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:

  • How to resize a picture to the correct size
  • How To Optimize Your Images For Your WordPress Site

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.

Font choice, variations, subset, size and colour
Tesla Login Customizer font options

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.

Logo Options in Tesla Login Customizer

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:

A WordPress login form customized
The login form customized with the Mars template, logo and custom CSS

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!

Related

Category: WordPress Tags: login, plugin

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Lindsey John says

    November 20, 2024 at 9:27 am

    Great post! Customizing your WordPress login page with unique branding is such a smart way to enhance professionalism and user trust. Your tips make it easy for anyone to improve their WordPress site login experience. Thanks for sharing these actionable ideas!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map