Welcome to a new WordPress tutorial on Awesome Web Designs. Today we will learn how to customize your login page/login form in WordPress.
Table of Contents
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.
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’.
Do you need help customizing your login page?
Get in touch with us and we will give you a customized solution
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:
- 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.
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.
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.
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.
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.
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!