How to Add Custom CSS to WordPress Login Screen

Do you want to add custom CSS to WordPress login screen of your website? 

You can easily customize each element on the login page with a WordPress login page customizer plugin. But what if you want to elevate your modification to a higher level but find any relevant plugin lacks that functionality? 

Don’t worry. LoginPress CSS/JS feature lets you add custom elements, straight from your WordPress admin dashboard, with the help of custom CSS.

In this article, we’ll show you what custom CSS is and how to add it to the WordPress login screen of your website.

Let’s get started!

Table of Contents

What is Custom CSS?

CSS is an abbreviation for Cascading Style Sheet. It is written in HTML (hypertext markup language) or another markup language and lets you format the document content, including text (i.e., text’s color, spacing, size), colors, and fonts. 

Before diving deeper, you’ll need to understand what codes are.

A WordPress website code is a language that tells your web browser exactly how a website should look. HTML is the most common coding language. It helps you figure out what elements are present on a webpage.

Custom CSS has three main components; selectors, properties, and values. The selectors stand for the element you want to style, and properties and values add that desired styling to that element.

For example, if you want to customize the font of h1, it would be done this way:

H1{
   Font-family : Helvetica;
   }

Suppose you want to add a color and size of your choice:

H1{
   Font-size: 30 px;
   Color: green;
   Font-family : Helvetica;
      }

Now that you know what CSS is, let’s see how you can add it to the login screen of your WordPress login screen.

Add Custom CSS to WordPress Login Using LoginPress Custom CSS/JS

LoginPress allows you to add our custom CSS/JS to the login screen right from within your WordPress installation.

All you need to do is to follow these steps:

Step 1: Install and Activate LoginPress 

The first thing you’ll need to do is install and activate the LoginPress plugin. For more details, see this step-by-step guide on how to install a plugin in WordPress.

Note: The Custom CSS/JS feature is available in both Free and Premium versions of  LoginPress.

Step 2: Adding Custom CSS and JS 

Once you’ve installed and activated LoginPress, you can add custom styling with CSS to your WordPress site.

For this purpose, go to the left side of the WordPress admin dashboard of your website, navigate LoginPress, and click the Customizer option.

Once you click it, you’ll find yourself on a new screen with all the LoginPress customization Options. Select Custom CSS/JS option.

In CSS and JS editor, you will see 2 Textareas; one for the custom CSS and the second for the custom JS code. 

Simply paste your Custom CSS code into the Customize CSS Textarea.

Note: Here, we’ve used custom CSS code for adding the pink color to the Log In button. 

Once you are done, hit the Publish button at the top. 

Step 3: Preview Your Custom Login Screen

LoginPress lets you preview your custom login changes before you save them, generally. If you are adding some custom code, hit the Publish button, then refresh the page to have a live preview at the right side of the login page. 

Final Thoughts

LoginPress Custom CSS/JS feature is the quickest and easiest way to add your own custom CSS to the WordPress login screen. 

Write custom CSS codes with Custom CSS/JS to make your login screen look exactly how you want it.

In case you find any confusion, feel free to contact our support team.

You can also check out How Social Login Improves CRO and How To Redirect Woocommerce Users after login.

Frequently Asked Questions