this custom login page should be a frontend login page where your site users log in. As I have mentioned in the introduction, there are two ways we will cover in this tutorial
Create Login Page Custom Template
First you need to open a plain text editor like Notepad on your computer. Add this line of code in the blank field:
<?php /* Template Name: custom_login */ ?>
<?php get_header(); ?>
<div class="custom_login_wrapper dev_login">
<div class="custom_login">
<div class="login_form_wrapper">
<div class="login_form">
<h3>LOGIN</h3>
<?php //wp_login_form(); ?>
<form name="loginform" id="loginform" action="http://example.com/wp-login.php" method="post"> <!-- change the example.com to your site -->
<p class="login-username">
<label for="user_login">PAGES USERNAME</label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="User Name">
</p>
<p class="login-password">
<label for="user_pass">PASSWORD></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password">
</p>
<span class="checkbox"><p class="login-remember"><input name="rememberme" type="checkbox" id="rememberme" value="forever"><label>KEEP ME LOGGED IN</label></p></span>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Submit">
<!-- <input type="hidden" name="redirect_to" value="http://example.com/dashboard/"> --><!-- enable to redirect -->
</p>
</form>
</div>
</div>
</div>
</div>
<?php get_footer(); ?>You can save the file with any name, just make sure it ends with the .php extension.
For this next step, you’ll got to hook up with your website using an FTP client.
Once connected, attend your current theme or child theme folder. you’ll find it in /wp-content/themes/ directory. Next, upload your custom page template file to your active theme.
Now create new and provide the name as per your desire or need. And select the currently created page template i.e. “custom_login” from the right sidebar and post attribute and from the template dropdown you can select the custom page template and at last don’t forget to update.
Now You can visit that page and you can see a form which we recently created from where user can login with their credential.
