How to Make a Custom Login Page in WordPress?

Are you looking to create a custom login page in WordPress and want to create your own custom login page? Then you are in the right place. In this tutorial, we will learn how to make a custom login page in WordPress?

The default WordPress login page shows its own branding logo and simple login form. See the default WordPress login screen below.

However creating a custom login page provides your site a more professional appearance and displays a consistent brand to your users.

Why You Should Create Custom WordPress Login Page

WordPress has a powerful user management system to allows users to create accounts for an eCommerce store, blogs, etc, and can log in.

The default WordPress login screen shows the WordPress branding logo and looks very boring and if you are running a small blog/website then it is fine.

But with a custom WordPress login page, you can set your own branding logo, and text or can make it more professional.

If you are going to create a community website or social network platform then you should have to create a custom login page. It will make your login page more secure and you can customize all elements as per your need.

Create Custom WordPress Login Page Using WPForms

In this topic, we will learn how we can create a custom WordPress login page with the WPForms plugin.

WPForms is the most powerful plugin for creating forms. You can create any type of form like post submission, newsletter, events, suggestions, or survey form and It also allows creating a custom login page for WordPress.

To create the custom WordPress login page with WPForms, you have to install and activate the premium version of WPForms because the User Registration Addon is a premium addon and you have to enter the license key to use it.

Let’s get started with it.

Download and Install WPForms Plugin

Firstly, you have to download the WPForms plugin from the official website and they will provide you a license key for the plugin activation.

After downloading the plugin you have to install and activate it on your website. For more detail see how to install the WordPress plugin.

Upon activation, go to this path WPForms » Settings and it will ask you license key. So you have to enter the license key here to activate the premium features.

Install User Registration Addon

After activation with license key go to this path WPForms » Addons to install the User Registration Addon

Find the User Registration Addon and click on the Install Addon button and it will download the addon and activate it. Now we are ready to create a custom login page.

Create a Login Form with an Addon

Now click on the Add New under WPForms and it will show you all the addon forms template. Select the User Login form.

It will create the form for login with username/email and password fields. See the following image.

You can also change the other settings like button labels, add any CSS class to design the field, redirect URL after successful login, etc.

After making all changes click on the Save button at the top right. It will save your form. Now click on the Embed button it will give you a shortcode (like this [wpforms id="3455" title="false"]) and you use it anywhere on your pages, posts. You can also add forms through the widget.

Use that shortcode on the pages or posts and make it publish. Now you can see it from the front. That’s it. Your custom WordPress login page is ready with WPForms.

To create shortcodes in WordPress to generate anything with custom logic, you can use the WP Shortcode Generator tool. It is easy to use you just have to enter the value and generate the code.

Create Custom WordPress Login Page Using Theme My Login

If you want to create a custom login page free of cost then you need to install and activate the Theme My Login plugin.

Check here for a step-by-step guide on how to install WordPress plugin, so you don’t mess anything with your website.

TML is totally free of cost and you can make your own custom login page with the help of it.

When you install and activate this plugin then it will create the pages for the login, registration, and forget password automatically.

Now you can customize the settings on this page Theme My Login » General.

It also allows you to create login, registration, etc pages with shortcodes. If you want to create pages with a different slug then you have to create a new page and add the following shortcode with the respective page.

[theme-my-login] for the login page
[theme-my-login action=”register”] for the registration page
[theme-my-login action=”lostpassword”] for lost password
[theme-my-login action=”resetpass”] for reset password

After creating each page, you need to add the slug of those pages into the respective field of the Theme My Login plugin setting. See the below image.

To customize the plugin, check the documentation here.

Show WordPress Login Form Anywhere

There is a WordPress built-in function for displaying the login form anywhere, like pages, posts, sidebars, and widgets. The function is wp_login_form().

You have to add this code in your theme’s template file in the specific place where you want to show it at the front end.

You can also create a new template file. For instruction guide on how to create a custom page template in WordPress.

The wp_login_form() function will only show the simple form but if you want to show additional fields then use the following code.

$args = array(
	'echo' => true,
    'redirect' => 'http://domain.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
);

wp_login_form($args);

It will display the login form like below. I tested it in the sidebar, you can do it anywhere.

Change the WordPress Logo and Logo URL of the Existing Default Login Page

If you want to change your WordPress login screen logo without any plugin then you have to write down the simple CSS code and insert it into the login page head section. You can do it with add_action().

Change the Logo

To change the login screen logo, firstly, you have to upload your logo in WordPress media and grab the link of this media logo by clicking on it.

After that, add the following code to your active theme’s functions.php file and save it. Don’t forget to change the background image URL with your uploaded media logo.

function change_login_screen_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('https://yourblogcoach.com/wp-content/uploads/2021/03/logo-final2.png');
            height:100px;
            width:300px;
            background-size: 300px 100px;
            background-repeat: no-repeat;
            padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'change_login_screen_logo' );

It will change the default WordPress logo with your logo.

Change the Logo URL

If you have checked when you click on the logo on the login screen then it will go to wordpress.org’s official website. What if we change with our own custom URL?

OK. Let’s do it.

It is very simple. You just have to add a simple hook function in your theme’s functions.php file and that’s it.

Here is the hook function.

function change_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'change_login_logo_url' );
 
function change_login_logo_url_title() {
    return 'Your Site Name';
}
add_filter( 'login_headertitle', 'change_login_logo_url_title' );

The above code will change the default logo URL to our own custom URL and it will go to the homepage when you click on it.

Conclusion

So, in this tutorial, you learned about how you can make a custom login page using the WP Form and Theme My Login plugins. You also learned how to change the WordPress login page logo and logo URL using hook functions.

That’s it for all about creating a custom login page in WordPress and customizing the existing one. If you have any questions then ask me in the comment section. I’ll respond ASAP.

Related Tutorials

• Login with Google Account Using PHP
• Login with Facebook Using PHP
• Add Sign in with Google Button in React Application
• How to Add Custom Fields to the WooCommerce Checkout Page?
• How to Get WooCommerce Cart, Checkout, Shop Page URL Dynamically?

FAQs