Simplest Way to Customize Your WordPress Login Page

Do you want to customize your WordPress login page? It’s easy to do, and you can make it look just the way you want. There’s no plugin needed and it will only involves few tweaks in your login page.

In this post, I’ll show you how to change the WP login page logo, color scheme, and more. So let’s get started!

Step 1. Locate CSS File

First, we need to locate where the CSS file for the login page. Take note that if you’re using a caching plugin, the file may be different.

To locate where the CSS files of the login page are, go to your wp-admin or wp-login page and then right click on the background and click inspect.

 

Right click on login.min.css and click copy location. Paste it on other tab and you will see a compressed CSS file like this:

We will be using a compressed CSS in this tutorial.

Now the file we need to edit is:

https://easyrocketstudio.com/wp-admin/css/login.min.css?ver=6.0

Step 2. Change the Background

Now that you found where the CSS file is located, login to your web hosting or ftp and go to your file manager. For those who are using cPanel, go to File Manager > public_html > wp-admin. The same goes for your accessing your web hosting’s file manager via ftp.

For other hosting providers, you can check their knowledge base on how to access wp-admin directory.

Edit login.min.css. Look for

background: #f0f0f1;

and change it with

background:url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg) no-repeat center center fixed;background-size:auto;-webkit-background-size: cover;-moz-background-size:cover;-o-background-size: cover;

It will then look like this:

Step 3. Change the WordPress Logo

Let’s change WordPress logo into your logo of your choice. If you happen to have a logo of your own, you can use that.

In my case, I can just look for something neat and a little bit of sporty. I found this logo on Pixabay that looks like a a fierce racoon.

Now let’s find where the logo is hiding, I mean hibernating.

Just right click the WordPress logo and inspect element. You will find it in the CSS file login.min.css. Locate login h1 a and find the rule:

background-image:none,url(../images/wordpress-logo.svg?ver=20131107)

Replace ../images/wordpress-logo.svg?ver=20131107 with your logo:

background-image:none,url(https://cdn.pixabay.com/photo/2017/01/31/23/42/animal-2028258_960_720.png)

And now this is how it looks like:

Step 4. Customize the Form

Since I like the glass design so much, I’d like to turn the form into glass using glassmorphism. If you’re not familiar with glassmorphism, it’s a visual style that combines the smoothness of glass with the fluidity of molten glass.

I’ve developed an HTML template base on glassmorphism and bootstrap. You can check it out here.

Moving over, let’s find the selector login form and look for it’s attribute.

In an uncompressed CSS file, it will look like this:

.login form {
margin-top: 20px;
margin-left: 0;
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

First remove

background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 3px rgba(0,0,0,.04);

and add the glassmorphism CSS code.

Uncompressed

backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219, 0.3)

Compressed

backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background-color:rgba(255, 255, 255, 0.75);border-radius:12px; border:1px solid rgba(209, 213, 219, 0.3)

Next, we’ll enlarge the login form a little bit.

Find .login * and remove padding: 0;

Finally, we’ll enhance the color and weight of Lost your password? and ← Go to Easy Rocket Studio.

To do that find .login #nav a.

Change the color attribute value to #ffffff and add

font-weight: bold;

This will now the login page looks like:

Step 5. Login Button Customization and Enhancement

The login button may need some customization since it is a bit off. We’ll make bigger and attractive.

To do that we need to edit some attributes.

Inspect the element of the button and you’ll see .login .button-primary.

Now go back to login.min.css. Remove the float:right attribute and change it to:

border-radius:8px;border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(20px);color: rgba(255,255,255,0.8);font-size: 16px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 1px 1px rgb(18 21 26 / 8%);background-color:#F28123;background-image:linear-gradient(180deg,hsla(0,0%,100%,0.15),hsla(0,0%,100%,0));position:relative;width:100%;margin-top:1.4em;line-height:2.30769231;

The final result looks like this:

Congratulations! You’ve customized your WordPress login page!

Frequently Asked Questions

What is glassmorphism?

Glassmorphism is a visual style that combines the smoothness of glass with the fluidity of molten glass. It is often used in user interfaces, and it can be used to create realistic or abstract glass effects.

The glassmorphism style is achieved by using a combination of transparency, refraction, and reflection. This creates an illusion of depth and movement, as well as a feeling of weightlessness. Glassmorphism can be used to create both static and animated glass effects.

When used in user interfaces, it can help to create a more immersive and intuitive experience. In addition, glassmorphism can be used to create interesting visual effects in art and advertising.

Do you have examples for Glassmorphism?

You can head on to my codepen page and you can look for examples I developed using glassmorphism.

How much time does it consume to customize WordPress login page?

In my experience, it’ll take 15 minutes. If you’re picky, then it’ll take a little longer.

Did you use a plugin?

Nope.

Now it’s Your Turn

If you’re looking for a way to add some personality and fun to your WordPress login page, why not try customizing it?

WordPress website front page is not the only page that needs to be customization, your login page also needs some.

It’s easy to do and can be a great way to show off your brand or personal style. I hope you learned something in this tutorial on how to customize your WordPress login page.

Try customizing your WordPress login page today! I’m sure you’ll be having fun. 🙂