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

Why You Should Create Custom WordPress Login Page

WordPress has a powerful user management system to allow 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, text or can make 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, suggestion, 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 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 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

Create Login Form with Addon

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

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 form through the widget.

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 step by step guide how to install WordPress plugin.

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

When you installed and activated this plugin then it will create the pages for the login, registration, 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 login page
[theme-my-login action=”register”] for 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 Theme My Login plugin setting. See the below image.

You can also 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, post, sidebar, widget. The function is wp_login_form().

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

You can also create a new template file. For instruction guide, 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 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 in 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 that when you click on the logo of the login screen then it will go to wordpress.org officially 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.

That’s it for all about create a custom login page in WordPress and customize the existing one.

If you have any questions then ask me in the comment section. I’ll respond ASAP.