How to Properly Create a Custom Login Page in WordPress (Step by Step)

how to create a custom login page in wordpress

Ever wondered if you could create a custom login page in WordPress?

Creating a custom login page helps you display a consistent brand to your users, which gives your site a more professional appearance.

In this article, we’ll show you how to create a custom login page in WordPress.

Creating a Custom WordPress Login Page – Table of Contents

Why Create a Custom Login Page?

If you’re running a community-powered website such as a forum, membership site, niche social network, or any other website that requires users to register an account and log in, then you’ll need to create a custom login page.

The default WordPress login page looks generic and boring. With a custom login page, you can personalize all the elements on the page around the form.

If you have a custom login page, then you can hide the default login page if you want. It can reduce login spam and keep your WordPress site secure.

Choosing the Right Plugin for Creating a Custom Login Page

In the official WordPress plugin repository, you can find dozens of different plugins that help you easily build a custom login page. In this article, we’ll look at 2 different plugins: WPForms and Theme My Login.

Choose WPForms if you need a full-featured WordPress form plugin that helps you build any kinds of online forms with ease, including registration forms, payment forms, contact forms, etc.

A few benefits of WPForms are:

  • Customize your login form the way you want without any restrictions.
  • Publish your login form on any posts or pages.
  • Embed your login form in sidebar or even in widgetized footer.

Choose Theme My Login if you want to create a simple login page with ease.

Below are a few features of Theme My Login:

  • No configuration required for building a custom login page.
  • Automatically hides the default login page and redirect to the newly created login page.
  • Add a login page link in your sidebar with a custom login widget.

The downside is that, unlike WPForms, Theme My Login doesn’t allow you to embed your login form anywhere on your site, and will exclusively show up on your login page. Because it’s not a fully-featured form plugin like WPForms, the ability to customize your login form is limited.

Method 1: Using WPForms to Create a Login Page


Let’s take a look at how to create a login page with WPForms.

Step 1: Install WPForms on Your Site

The first thing you need to do is install and activate the WPForms plugin. Make sure to verify your license key by navigating to WPForms » Settings. You can obtain the license key from your account on the WPForms website.

To be able to create a custom login page with WPForms, you’ll have to install the User Registration addon by going to WPForms » Addons. Click Install Addon next to User Registration Addon and then click Activate.

Once the addon is activated, you can go ahead and create a user login form with WPForms.

Step 2: Create a Custom Login Form

With WPForms’ powerful drag and drop builder, you can build a login form in just a few minutes, not hours, without writing a single line of code.

To create a login form, visit WPForms » Add New. In the form setup page, you’ll need to choose the User Login Form template to create a login form.

user login form template

You’ll now see the form builder where you can add, customize, and remove login form fields. By default, the login form template adds the following form fields: Username and Password.

user login form in wordpress

You can customize any field by clicking on it in the page builder. Then, you can make the desired customizations in the left-hand panel.

Step 3: Form Configuration

To configure general settings, you can go to Settings » General. On this page, you can customize the form name, description, submit button text, etc.

general settings login form

You don’t have to do anything in the Notifications tab for your custom login form. By default, notifications are turned off, so you won’t receive an email whenever someone logs into your site.

When a user logs in through your custom login form, they’ll land on your website’s homepage. You can change the redirect URL, if you want, in the Confirmation Redirect URL field.

confirmation settings custom login page

Step 4: Publish Your WordPress Form

One of the main benefits of using WPForms for creating a login form is that it lets you embed your form anywhere on your site, including posts, pages, sidebar widgets, or widgetized footer areas.

Let’s take a look at how to publish your form in posts or pages.

Create a new post or page in WordPress and then click on the + icon in the Gutenberg block editor. You can search for the WPForms block and click on it.

Add forms

Next, select your login form in the WPForms block and it’ll automatically load in your post / page.

Select login form

After adding the form, you can publish your post / page.

You can also add the login form to your sidebar widget as follows. Head over to Appearance » Widgets and add the WPForms widget to your sidebar.

Login form widget

Select your custom login form in the widget’s settings and click on the Save button to save changes.

Method 2: Using Theme My Login to Create a Login Page

theme my login plugin

The Theme My Login plugin makes it super easy to publish a custom login form on your WordPress site. To create a simple login page, all you have to do is install and activate the Theme My Login plugin.

The plugin works out of the box without any further configuration.

However, if you need to customize the plugin settings, you can click the Theme My Login menu in your WordPress dashboard.

theme my login settings

You can then change the login and registration types. You can also adjust the URL slugs for the login, logout, registration, lost password, and reset password pages.

Method 3: Customize Existing WordPress Login Page Without a Plugin

If you’d rather make changes or add custom styling to your existing login page than creating a brand new one, here’s how to do it.

Simply add this code to your theme’s functions.php file or in a site-specific plugin:

If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.

//Custom login page
function clp_login_head() {
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
add_action('login_head', 'clp_login_head');

You can change the CSS and image URL in the above code to add your custom styling for the WordPress login page.

Method 4: Display WordPress Login Form Anywhere Without a Plugin

If you want to display the WordPress login form on any page, sidebar, or footer area, then you can add this code to your theme’s template file:

Just like the above method, if you’re adding code snippets to WordPress for the first time, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.


The above code will only display the general WordPress login page on the location where you add the code. In case you want to add a custom WordPress form page with additional fields and options, then you can use this code:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );

A few more code snippets that you’ll find helpful:

That’s it!

We hope this guide helped you create a custom login page in WordPress. If you liked this article, you may also want to read our article on the best contact form plugins for WordPress.

Comments  Leave a Reply

  1. I have a question how I can go to home page after do login in my project

  2. After installing Theme my login plugin, i tried registring on my site using another browser, it kept saying registration has been disabled. How do i fix it? Thank you for your response

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[50% OFF Today!]
[50% OFF Today!]
[63% OFF Today!]
[63% OFF Today!]
[60% OFF Today!]
[60% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]