How To Customize The WordPress Login Page Using CSS Hero?


Running an online shop, a membership website on the WordPress CMS is pretty easy. With the help of a WordPress plugin such as WooCommerce or MemberPress, we will be able to create anything we want. However, while they need to make changes to their account, probably they need to login to their account.

The default login page offered by WordPress is very basic.

default wordpress log in page

While you are running an online business, the default login page won’t be a great fit for your business. And in most cases, people will try to modify it.

However, if you are looking for a simple way to customize the WordPress login page of your site, we have got you covered. In this article, we are going to show you the simple method to make changes to your WordPress login page styling.

CSS Hero

css hero

CSS Hero is a premium WordPress plugin used for styling purposes. Most of us know for adding custom colors, styling, we might want to use additional CSS codes through the WordPress customizer or a child theme. But if a beginner who doesn’t know how to code needs to design the site, he probably needs to rely on any freelancers or agencies.

But without getting help from any third-party, you can create your own custom design without even knowing CSS codes.

With the CSS Hero plugin, you can design every inch of your WordPress site. Thankfully, it offers a live-preview mode and you can see every change in that section.

As of today, there is no free version available. But the developer team offers a money-back guarantee on all their premium plans.

We have recommended this plugin to so many folks who need a hand in their designing journey.

And all of them are pretty happy.

Now, let’s see how we can customize the WordPress login page using CSS Hero.

How To Customize The WordPress Login Page?

The very first thing you need to do is, purchase the CSS Hero WordPress plugin. You can choose any plans from there. Once you have made the payment, you will be able to login to your CSS Hero account, download the premium plugin files.

download css hero

After downloading it, you will need to install it on your blog.

Installation and Activation

You can install the plugin manually or by using an FTP client such as FileZilla. The best and simple way we have here for you is, manually uploading the plugin files to your blog, installing, and activating it.

Just login to your WordPress site, go to the add new plugins section. And upload the plugin file there.

install css hero plugin

Once you have installed it, activate the plugin.

activate css hero plugin

For receiving updates and support from the developer, you might want to consider activating your copy with a valid license key. Just after activating the plugin, you can see a button on the screen for verifying the license key.

activate css hero license

It will redirect you to the official CSS Hero website. You will need to login into your CSS Hero account for authentication.

css hero login

After logging in to your CSS Hero account, you can generate a license for your website.

get licenseNow, you can see that the CSS Hero got activated on our site!

css hero activated

For using the plugin, all you need to do is, click on the CSS Hero button available on your WordPress dashboard.

use css hero plugin

You will be redirected to the CSS Hero editor.

css hero editor

Under Tools, you can see an option for styling the login page of your site.

style login page

Click on it. You can see your active WordPress login page on the next screen.

wordpress admin page

On the left side, you will be able to see the tools available for customization.

css hero tools

The main ones are

  • Background.
  • Typography.
  • Borders.
  • Border Radius.
  • Spacing.
  • Transform.
  • Filters.
  • Lists.
  • Extra.
  • Measures.
  • Positioning.


On top of that, you will be able to add custom animations to your CSS too. Let me quickly show you how can you make customizations in your login form.

On mouse hover, the plugin will show you the CSS Class of that specific element.

login form css

By default, the background color of the login form would be White. Let’s change it to something else. So, double-click on that element. The CSS Class will be opened in the editor.

css editor

We don’t want to add CSS codes manually. By using the tools we mentioned above, we can make live customizations. And the interesting part is, the CSS codes will be generated automatically!

For changing the background color, we will need to go to the background option.

element background

Choose a color from there.

choose bg color

In my case, I have changed the color of my login form to something else. And you can see the live preview in the right section. Plus, the CSS codes got generated and added to the code editor.

bg color changed

This way, you can change the color of any element you have on the login page. Let’s change the button color now. Just like we mentioned above, select the element, choose the background option, and change the color.

login button color

The good thing is, you can change the colors according to your brand/ styling. Another setting we have here for you is the typography customization.

Select the element you need to edit.

edit typography

From the left panel, choose the typography option.

css hero typography

You will see the font settings on the next screen.

csshero font settings

The main configurations you will see there are:

  • Color.
  • Font Size.
  • Line Height.
  • Font Family.
  • Weight.
  • Style.
  • Transform.
  • Align.
  • Letter Spacing.


Change anything you want to. In the right preview section, you can see all the changes.

typography changing

This way, you can customize every inch of your WordPress login page. Make sure that you are saving and publishing the changes.

save and publish changes

And when you or anyone access your site’s login page, they will see the new modified design!

wp admin page modified

If you are still not seeing the changes, that is an issue with your cache. Try to clear your website’s cache and browser cache. Plus, you can also try accessing the page on an incognito window or another browser.

You will see the changes there.

Get Started With CSS Hero

You can get the premium version of CSS Hero from below.

Get Started With CSS Hero

So this is how you can customize the WordPress login page of your WordPress site. Found this article helpful? If yes, please consider sharing this with your friends and fellow bloggers on social media. It will help someone to design their WordPress login page.

If you need more WordPress tutorials and reviews, feel free to check out our blog section.


Leave a Comment