Looking for a unique way to make your website stand out? Want a quick and easy way to create a professional persona for logged-in users?
Creating a custom WordPress login page is a fast and effective way to improve the visitor experience.
If you run a membership site or use logins in any way, you need to create a custom WordPress login page.
It doesn’t take long and could change the way visitors view you and your website!
The WordPress Login Page
By default, the WordPress login page is located at yoursite.com/wp-login.php and looks like this:
It’s a simple design that gets the job done but doesn’t do anything for authority, branding or interest.
Wouldn’t it be cool if your login page looked like this?
You could create something similar by following this guide.
Here are the four tools we’ll use:
- Spectra
- SureForms
- LoginPress
- Profile Builder
Each is simple and effective and won’t take very long at all!
Method 1: Use Spectra Pro
Spectra is our very own website builder and fits seamlessly into the WordPress Customizer.
If you know how to use the Customizer, you’ll know how to use Spectra.
First, create a new page and open the side menu on the left.
Spectra Pro has a dedicated Login Form block, which is an added bonus
Add the block to your page and customize it until it fits your brand or looks however you want it to look.
To customize your login page, select any element within the form block and use the hover menu above it or the menu on the right.
Select the blue Publish button at the top right when you’re done.
View your new page and select the Customize option from the gray top menu.
While you’re in the Customizer…
If you want to add an image background like we did in the example, that’s easy.
Select Global > Colors > Site Background from the side menu.
Select the icon to the right of Site Background and select Image.
Add your image, configure its settings and select the blue Publish button at the top of the page.
Note
You won’t see the full form while you’re logged into WordPress. That’s why you see the ‘You’re logged in as…’ message in the image above.
Hit Logout to see everything in all its glory.
Keep tweaking until you’re completely satisfied with your custom login page, remembering to save your changes when you’re done.
That’s just the tip of the iceberg of what you can do with Spectra Pro.
Buy the Astra Essential Toolkit and get Spectra Pro for free!
Method 2: Use SureForms
SureForms is a free form plugin for WordPress. It can handle just about any form type you can think of, including login forms.
Once installed and activated, you should see a new SureForms menu on the left.
Select SureForms > Add New Form to begin.
We chose to create a new form with AI, because why wouldn’t you?
In the AI window, we typed ‘Create me a login form for a WordPress website’ and this is what it generated:
As you can see, it’s a replica of the WordPress login page with a modern twist.
We would recommend using a more detailed description to help the AI create something amazing, but you can keep it simple if you prefer.
SureForms also works like the WordPress Customizer.
Select a place in the center to add a field or select one from the left menu.
Style the block using the menu on the right.
Select the blue Publish button at the top right when you’re done.
Create a new blank page and insert the form shortcode within the page or use the SureForms block in the WordPress Customizer.
Customize the page to fit your brand and you’re good to go!
Using Your Custom Login Page
Once you have created a new page using Spectra or SureForms, you’ll need to change the login URL so users land on your custom page and not your standard one.
The free WPS Hide Login plugin lets you easily change the URL.
Just install the plugin and set the URL in the Login url field.
If you would prefer to do it manually, you can easily add a login entry to your main navigation menu.
Navigate to Appearance > Menu > Custom Links.
Paste the URL of your custom page, give it a name and add it to your menu structure.
Place it where you want and select the blue Save Menu button at the bottom of the page.
Method 3: Use the LoginPress Plugin
The free LoginPress plugin gives you lots of control over WordPress login.
Install and activate the plugin to get started.
Select LoginPress > Customizer.
You’ll see the familiar setup with the page in the center and menus on the left.
Select any area of your login page to edit or select areas from the left menu.
For example, to change the logo from the standard WordPress version, select Logo from the left menu and replace the image with your own.
Save your changes when you’re happy by selecting the blue Publish button at the top of the page.
Or if you want to change the background, select Background on the left and select an image from the gallery or add one.
Play around with all the menu settings and save your changes once you’re happy.
That’s all there is to it!
Method 4: Use a WordPress Registration Plugin
If you want more control over registration and login, you might be better off with a dedicated WordPress registration plugin.
The main advantage here is that it also lets you create a custom registration page in addition to a custom login form.
You can also let users manage their profiles if you want to.
We recommend using the free Profile Builder plugin.
Once activated, the plugin will show a setup wizard to help configure your login page.
Toggle Login to on and hit the blue Continue button.
Work your way through the setup wizard or skip it if you prefer.
Once back at the Profile Builder dashboard, copy the shortcode by Login from the bottom right of the center pane.
Paste the shortcode into a new page and follow the steps already covered to change the login URL and add a menu item.
If you need to add a form field, select the Form Fields menu on the left.
You can add, remove and edit form fields from there.
Save your changes and you should see your new fields appear on your login page.
If you run a community or membership website, check out SureDash.
It’s a central hub for managing members, discussions and events and it’s going to change how you manage busy websites forever!
Create a Custom WordPress Login Page
Creating a custom login page is purely optional, but could help create a more professional look and feel on your website.
If you run a membership website, accept user generated content, run a store or something else, it’s a simple but effective way to reinforce your brand.
Considering how easy it is to do, there’s no reason to not do it.
- If you use Spectra, upgrade to Spectra Pro to access the Login block.
- If you use SureForms, create a login form and add it to a custom page.
- If you want to use a plugin, LoginPress or Profile Builder will get the job done.
Buy the Essential Toolkit and get Spectra Pro for free!
Whatever method you use, a little creativity and 30 minutes of your time could genuinely transform the user experience on your site!
Do you still have any questions about how to customize the WordPress login page? Let us know in the comments!
Pratik Chaskar holds the pivotal role of CTO at Brainstorm Force, serving as the backbone of the company. Renowned for his organizational skills, strategic thinking, problem-solving attitude, and expertise in leading and executing plans, Pratik plays a crucial role in the BSF’s technological landscape.
Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!
Hey, excellent article. But, I want to add a login form on my website sidebar. Is it possible?
Hello Luther,
Glad you liked the article. 🙂 And yes, you can insert a Login form using the shortcode as described in the Step 3.
Hope that helps. 🙂
Can we add more fields to our login form? Such as security questions?
Hello Miranda, sorry that won’t be possible as they use the default WordPress fields and functionality.
How can create separate logins page and separate dashboard actually I’m working on a site that would be a searchable Database
For Company profile after login they will be able to search view and select final year students only.
For college Admin they would be able to Upload edit student etc.
Hi there,
Could you please develop a custom login page template that can be used with any WordPress theme?
Hello there, you could use the method 3, 4, or 5 outlined in our post and use it with your choice of WordPress themes.