Do you want to create a custom login page for your WordPress website? Having a custom login page is a great way to replace the generic WordPress login and add your own branding.
In this article, we’ll show you the easy way to create a completely custom login page for your business site.
Create Your Custom Login Form Now
Why Create a Custom Login Page in WordPress?
All WordPress websites have the same login page. It’s a simple login form with the WordPress logo above it.
This page is generic, so it’s difficult to tell which website you’re actually signing into. The WordPress logo also links to WordPress.org, which could take users away from your site if they click on it.
If you create a new login page for your site, you could use it for:
- Promotions
- Notifications
- And more.
At WPForms, we use the extra space on our custom login page to let users know about exciting new features.
It’s super easy to make a custom login page, and it can also help with your website security. By creating a custom login page, you can hide the default one to reduce login spam and keep your WordPress site secure.
Now we know why you need a custom login page, let’s make one for your site.
How to Make a WordPress Custom Login Page
We’re going to use WPForms to make a completely custom login form for your site. Then we’ll show you how to create your custom login page.
- Install the WPForms Plugin
- Create Your Custom WordPress Login Form
- Add a Forgot Password Link to Your Custom Login Form
- Customize Your Custom Login Form Settings
- Publish Your Custom Login Page
OK, let’s get started by installing the custom login page plugin.
Step 1: Install the WPForms Plugin
The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.
To make a login form, you’ll need WPForms Pro or higher.
Once you’ve installed WPForms, go to WPForms » Addons.
Scroll down until you find the User Registration Addon. Click on the button to install it.
We’re all set! Let’s make our new custom login form.
Step 2: Create a Custom WordPress Login Form
Now we have WPForms installed, let’s create a brand new login form for WordPress.
Click WPForms » Add New to start.
On the setup screen, name your form at the top.
Now scroll down and select the User Login Form template.
You’ll see the form open up in the form builder. The custom login form is already set up, so we don’t need to add any fields.
Now let’s add a link so that users can easily recover their password.
Step 3: Add a Forgot Password Link to Your Custom Login Form
The login form looks great as it is, but we’ll need to add a forgot password link. Otherwise, visitors who forget their login details will get stuck on the login page.
To do this, we’re going to customize the Password field.
We’re going to add a link in the description here so that it displays right underneath the field. We can use the {url_lost_password} smart tag for the link.
Click on the password field to start. In the Description, paste this in:
Forgotten your password? <a href={url_lost_password} >Click here</a> to reset it.
That’s it! The {url_lost_password} smart tag will be replaced with the forgotten password link when we publish the form.
WPForms will take care of the database connection, so we don’t need a separate login plugin to handle that.
Go ahead and click Save to save your login form so far.
Step 4: Customize Your Custom Login Form Settings
In this step, we’ll look at the login form settings. This will let us control the button on the form, and the page that our visitors will be redirected to.
Start by clicking Settings on the left hand side of the form builder.
The settings will open on the General tab.
Scroll down to Submit Button Text and change this to say Log In.
We also changed the Submit Button Processing Text so that the user can see the login is in progress. You can type something else here if you want to.
Below this, you’ll notice some more settings. You’ll want to check that these 3 checkboxes are selected:
- Enable anti-spam protection – This will use a smart form token to prevent logins from bots.
- Disable storing entry information in WordPress – We don’t need to store these form submissions in the WordPress database.
- Hide the form if the user is already logged in – If a user’s logged in already, it would be confusing to show the login form again. This setting lets us easily hide it.
You can customize the other settings if you want to.
If you see the old anti-spam honeypot here, go ahead and check the new anti-spam checkbox. The honeypot is now deprecated, and the new anti-spam token will improve the spam protection on your login form.
Finally, let’s click Confirmations.
On this screen, we can choose what happens when the login form is submitted. You can have your users open up the WordPress admin if you want. For most sites, it makes sense to redirect them pack to the frontend.
So in this example, we’re going to redirect the user to the homepage.
Great! Take time to review the other settings and make any changes you want to make. Then click Save at the top of the form builder.
Step 5: Make Your Custom Login Page
Now we’re ready to publish your new login form.
You can embed your custom login form anywhere on your site, including:
We’re going to create a WordPress custom login page in this example. We’re not going to do a lot of customization, but you can take more time to brand your page before going live if you want to.
To start, click the Embed button at the top of the form builder.
Click Create New Page…
And now give your page a name. Once that’s done, click Let’s Go.
Your custom login form is ready to customize! You can add branding and images and play around with the layout until it looks good.
Then, just click the Publish button to publish your custom login page.
That’s it! Your custom WordPress login page is live and ready to use.
Remember: you’ll need to log out of WordPress to see your finished form! If you’re logged in, you won’t see the login screen.
If you want, you could use a landing page plugin to create a custom login page and embed your login form. This would let you easily set up a background image and custom colors.
Create Your Custom Login Form Now
Next Step: Customize Your Registration Form
And there you have it! You now know how to create a custom login form in WordPress. You can use this as a starting point to develop the branding on your login page.
Next, check out how to create a user registration form for your site. Making a custom registration form is a great way to make your site look more professional.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes the User Registration addon and offers a 14-day money-back guarantee.
If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.