Welcome to a new WordPress tutorial on Awesome Web Designs. Today we will learn how to customize your login page/login form in WordPress.

Customize your login page in WordPress

When creating your company website, or your personal website, it’s normal that we want everything to be personalized to the fullest, since clearly, we do not want to confuse our website with other brands or businesses.

WordPress has a series of default pages, which are identical in each new installation of the platform: one of these pages is the Login page.

The objective of this tutorial is to customize our Login page, differentiating us from all other websites built with WordPress. So let’s not get distracted anymore and start with the tutorial.

[irp posts=”25741″ name=”Wordpress Maintenance, What it Means and Why it’s Necessary?”]

Install and activate ‘Custom Login Page Customizer’ plugin

The first step we will have to follow is to download and install the plugin that we are going to use, which in this case is Custom Login Page Customizer.

To install this plugin we will have to go to the back admin of our WordPress site, and once we are there we will click on: ‘Plugins’ > ‘Add New’ > ‘Upload Plugin’ > ‘Choose File’ (upload the downloaded plugin) > ‘Install Now’ > ‘Activate’.

Access the customizer

Once we have the plugin installed and activated, we have to click on ‘Login Customizer’, located on the sidebar of our WordPress back admin, to enter the login page customizer.

Customize the login page

At this place, we will find ourselves inside the customizer, which will allow us to modify all aspects of our Login page.

As you can see, there are several sections we will be able to work on. These are:

• Templates
• Logo
• Layout
• Background
• General Form
• Login Form texts
• Lost Password Form texts
• Form Buttons and Links
• Custom CSS

Let’s analyze each of these sections and the modifications we can make in each of them.

Templates

In this section, we will be able to see just some of the templates that come by default included in the plugin.

We can use these templates exactly as they come by default or we can choose one as a basis to adapt to our needs.

In case we want to use any of these templates we only have to click on the desired template and wait a few seconds until the configuration is finished.

Logo options

In this section, we will be able to add any logo or image that will appear in the upper margin of the access form. We can also hide any logo or image.

Layout options

This following section will allow you to modify the layout of the page (from one to two columns), select the column widths, and finally choose the position of the login form.

Background options

Here where we will be able to modify the background color or image of our Login page.

General Form options, Login Form texts, and Lost Password Form texts

In these three sections, we will be able to style the aspect of the form, as well as modify all the text form elements.

Form Buttons and Links

This section will allow as to change the design of the form buttons and links.

Custom CSS

Finally, we have the Custom CSS section. In this section, we will be able to add extra code to add functionalities and styles to our form.

Note: If you do not have knowledge in CSS, we recommend avoiding this section, as it may damage the correct performance of your login page.

Final result: A Wordpress white label login page

Let’s see the difference between the WordPress default Login page and our new styled login page.

By default, this is the page that all WordPress installations show:

And this is the page we finished customizing in this tutorial:

As we can see, we can customize our login page as much as we want with the Custom Login Page Customizer plugin, and without the need for technical knowledge.

I hope this tutorial will be useful for you, and if you have any questions or problems with the plugin please contact us or leave us a comment below, we are happy to help you!