How to Customize WordPress Login Page: 2 Easy Methods

Don’t like WordPress login page’s default look? Want to personalize it to match your overall website design?

It’s easy, just take help from a plugin. Or if you are comfortable with custom coding, go for it.

In this guide, we will show you how to customize WordPress login page with and without a plugin.

Why Customize the WordPress Login Page?

You may want to customize the login page for whatever reason, but do you know what benefits it can bring? Let’s figure it out:

• Branding Opportunities: Customizing login page means having freedom to showcase your brand through personalized design elements. You can customize logos, colors, fonts, and more. Similar to the screenshot below:

• Improved User Experience: You can make the login process more intuitive by ensuring the design matches your website’s overall look. This is especially useful for membership sites or ecommerce stores.
• Enhanced Security: Whether you use a plugin or custom code, you can implement security measures like changing the login URL. Some plugins offer more advanced security features as well.

Why to Use a Plugin for Login Page Customization

The main reason why you should use a plugin for login page customization is to have freedom over customization. A plugin lets you tweak every aspect of your login page without writing any code.

There are tons of login page plugins available and you will even find page builder specific plugins. For example, if you are using a Divi, you can try DiviFlash’s login customizer extension.

How to Customize Login Page Using a Plugin (Easy Method)

To show you how to customize your login page with a plugin, we will create a custom login page with DiviFlash. 

Here is a step-by-step guide:

Step 1: Install and Activate the Plugin

Start with purchasing the DiviFlash plugin and then install and activate like any other premium plugin.

Step 2: Access the Login Customizer

After installing the plugin, navigate to WordPress dashboard > DiviFlash > Settings. Then scroll down to find out and enable “Login Customizer” Then click on “Customize,” which will take you to the customization area.

Note: When you enable the login customizer, you will see “Change Login URL Slug.” This allows you to change the default WordPress login URL to a custom one.

Step 3: Customize Your Login Page

With DiviFlash, you can personalize the login page to match your website’s branding. To show the possibilities, we have customized one of our website’s login pages using DiviFlash. 

Here is how it looks:

In this section, we will walk you through the exact steps we took to achieve this design:

3.1: Customize the Login Page Logo

Click on the “Logo” setting and make the following changes:

• Image: Upload your logo
• Image Size: 80
• Bottom Spacing: 20

3.2: Customize the Login Page Background

To add a background image, click on the “Background” setting and click on “Background Image” to upload an image.

 Note: If you want, you can also use a solid background color instead of an image.

3.3: Customize Login Page’s Font

Click on “Font Family” settings and select “DM Sans” from the dropdown menu.

3.4: Customize the Login Form

To customize the form, simply click on “From” setting and then make the following changes:

• Height: 1px
• Border Width: 1
• Border Radius: 20
• Border Color: E8DDFD
• Form Padding: 40px (right, left, top, bottom)
• Input Field Text Size: 15
• Input Field Text Color: 6C6C6C
• Input Field Margin: top (8), right (0), bottom (12) and left (0)
• Input Field Padding: top (13), right (16), bottom (13) and left (16)
• Input Field Border Radius: 8  (right, left, top, bottom)
• Input Field Border Color: E8DDFD
• Input Field Background: FBFAFF
• Remember Me Label Font Size: 15

3.5: Customize the Login Page’s Button

Simply click on the “Button” setting and then make these changes:

• Text Size: 18
• Text Color: F6FAFF
• Text Hover Color: F6FAFF
• Background Color: 7936FF
• Background Hover Color: 7936FF
• Border Width: 0
• Border Radius: 50
• Enable Shadow: Toggle on
• Shadow Color: FFFFFF
• Shadow Blur(PX): 35
• Shadow Horizontal(PX): 1
• Shadow Vertical(PX): 1
• Shadow Spread(PX): 0
• Shadow Hover Enable: Toggle on
• Shadow Hover Color: C8ADFF
• Shadow Hover Blur(PX): 35
• Padding: Top (7), right (34), bottom (7) and left (34)

3.6: Customize the Login Page Footer

Lastly, to customize the form footer click on “Form Footer” and then make these changes:

• Lost Password Text Size: 15
• Lost Password Text Color: FFFFFF
• Lost Password Text Hover Color: FFFFFF
• Back to Site Text Size: 15
• Back to Site Text Color: FFFFFF
• Back to Site Text Hover Color: FFFFFF
• Enable Copyright: Toggle on
• Copyright Note: Write down your note
• Copyright Text Color: FEFDFD
• Copyright Text Background Color: 1D054E
• Copyright Text Padding: 20

So far our design is done and this is what we achieved:

Step 4: Test Your Login Page

Our customization is done. If you also followed our steps and done with customization, test the login page. To do that, logout and then visit your website’s login URL to see if everything works fine or not.

Note: If you find any setting of DiviFlash’s Login Customizer is hard to understand, refer to its documentation.

How to Customize Login Page Using Without a Plugin (For Developers)

If you are comfortable with coding and don’t want to use a plugin, then this section is for you. To customize your login page, you have to add code in the functions.php file. 

We will show how to style the logo, logo redirection link, form background, login page background and the button. Here is the step by step guide:

Step 1: Access the Theme Files

At first, access to functions.php file by navigating to WordPress dashboard > Appearance > Theme File Editor. From there, find “functions.php file.”

(Before modifying anything in the theme file, always backup your website. Modifying function.php file can cause expected issues.)

Step 2: Change the Login Page Logo

You can change the WordPress default logo to anything you like. To change the logo, follow these instructions:

• Upload your logo via Media > Add New in the WordPress dashboard.
• Copy the URL of the uploaded logo from the Media Library.
• Add the following code to your functions.php file:

function custom_login_logo() {    echo ‘<style type=”text/css”>        #login h1 a, .login h1 a {            background-image: url(“YOUR_LOGO_URL”);            height: 100px;            width: 300px;            background-size: contain;            background-repeat: no-repeat;            padding-bottom: 10px;        }    </style>’;}add_action(‘login_enqueue_scripts’, ‘custom_login_logo’);

In the code, replace “YOUR_LOGO_URL” with the actual URL of the logo image you uploaded to the Media Library. You can change the height, width and other aspects accordingly.

Step 3: Change the Login Page Logo Link

Besides the logo, you can also change the logo link as well. By default, the logo link redirects to WordPress.org and to change it, add the following code to the end of function.php file:

function custom_login_logo_url() {    return home_url(); // Redirects to your homepage}add_filter(‘login_headerurl’, ‘custom_login_logo_url’);

When you add the code to your function.php file, it will redirect you and your other website users who click on the login page logo to your site’s homepage.

Step 4: Style Background, Button, or Input Fields

You can change the whole login page’s background, login form’s background, file label, button text, input field styles, link colors, and much more using CSS.

To show you the process, we will change our login form’s background color, button color, and input field labels by adding the following code to the functions.php file:

function custom_login_styles() {    echo ‘<style type=”text/css”>Body{Background-color:red !important;}        body #login {            background-color: black;        }        #login form {            background-color: red;            border-radius: 10px;            box-shadow: 0px 4px 10px rgba(0,0,0,0.1);        }        #login label {            font-size: 14px;            color: #333333;        }        .wp-core-ui .submit input[type=”submit”] {            background-color: black;            border-color: #005177;            color: #ffffff;        }        .wp-core-ui .submit input[type=”submit”] {            background-color: #005177;        }    </style>’;}add_action(‘login_enqueue_scripts’, ‘custom_login_styles’); //

The provided code is just a basic example to demonstrate the possibilities of customizing your login page. You can modify the CSS and even add more code to achieve your desired customization.

Step 5: Save and Test Your Changes

After adding the custom code to your functions.php file, click Update File. Then, visit your WordPress login page to see the changes you have made to the logo and styling.

Note: If you don’t clear your browser cache or test the page incognito more. Also, double-check the code in your functions.php file for any typos or syntax errors.

Closing Thoughts

Now you know how to customize WordPress login page with and without a plugin. Among both methods, using a plugin is the easiest way as here you won’t have to write a single line of code.

Most importantly, almost all the login form plugins come with similar customization settings. That’s because these plugins offer customization options through the native WordPress customizer.

But if you prefer to avoid relying on third-party plugins, manually editing the functions.php file and adding custom CSS is the way to go.