How to Make a WordPress Custom Login Page (The EASY Way)

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 WordPress 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.

However, if you create a custom WordPress 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.

OK, let’s get started by installing the custom login page plugin for WPForms.

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.

If you want, you can restrict access to WordPress while you’re building your new login form. To find out how to do this, check out our guide on how to hide your WordPress site until it’s ready.

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.

You can use this template as-is or customize it if you’d like to add any extra elements to it. We’ll show you how to do that in the next step.

Step 3: Add a Branding Image to Your Login Form

WPForms makes it really easy to edit any existing template or build a form from scratch. To create a custom login form with some branded elements, we’ll edit the user login form template to save some time.

In this example, we’ll add a header image that represents a hypothetical brand. Simply drag and drop the Content field on the top of your form.

Once you’ve placed the Content field inside your form, click on it to open its Field Options.

Now, you can use the WYSIWYG editor on the left-hand pane to insert images or add any custom text to your form.

We want to add a branding image to our WordPress login form. So, we’ll use the Add Media button to upload a custom image.

When you press the Add Media button, you’ll see the WordPress Media Gallery modal window open. You can upload an image here like you usually do in WordPress.

With a header image added, our custom WordPress login form looks much more professional and tailored to a specific brand.

If you need more ideas about customizing your login forms, see our post on login page examples.

Now let’s add a link so that users can easily recover their password.

Step 4: 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.

Alternatively, you can also build a customized password reset form so that users who’ve forgotten their passwords can easily reset them.

Step 5: 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.

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 back 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 6: Make Your WordPress 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:

• Pages
• Posts
• In the sidebar
• In the footer

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.

Redirect the WordPress Login Page to Your Custom Login Page

One last step you might want to take is redirecting the default WordPress login page to your custom login page. This makes it so that if anyone tries to access the default WordPress login page, they’ll be sent to your new one instead.

To do this, we will add a bit of code using the WPCode plugin.

This is a free plugin that lets you easily add custom code to your WordPress site. After you install and activate it, go to Code Snippets » + Add Snippet. Then choose Add Your Custom Code (New Snippet).

On the next screen, give your snippet a name you can find it easily. We’ve called ours “Login Page Redirect.” Then paste in the following code:

add_filter( 'login_url', function( $login_url, $redirect, $force_reauth ){
     // Change here your login page url
     $login_url = 'https://sulliesflowers.com/login/';
     if ( ! empty( $redirect ) ) {
          $login_url = add_query_arg( 'redirect_to', urlencode( $redirect ), $login_url );
     }
     if ( $force_reauth ) {
          $login_url = add_query_arg( 'reauth', '1', $login_url );
     }
     return $login_url;
}, 10, 3);

Make sure to change https://sulliesflowers.com/login/ to the URL for your custom login page. In WPCode, your snippet should look something like this:

Now click Save Snippet. You should see a success message once your redirect has been saved and applied.

Finally, toggle on the setting at the top of the screen to make your snippet Active.

Great! Now users will be sent to your custom page when they try to log in.

Create Your WordPress Form Now

Next, 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.

You might also want to learn how to prevent unauthorized password resets in WordPress.

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.