How to create WordPress Front-end login form

Normally WordPress has its own login and registration pages, Which can’t be changed and match your website branding. So i will show you how to create front-end login form. I will write another article on Registration form.

For normal WordPress blogs, we don’t need to create a separate login or registration pages. But for the website where a users needs to register or login. We would like to land them on a beautiful website page rather than the default WordPress login page.

Put the below code at the end of your theme functions.php and create a plugin of this code.

Put this shortcode [w3b_login_form] on any page to show the login form.

<?php add_shortcode( 'w3b_login_form', 'w3b_login_form') ); function w3b_login_form() { ob_start(); ?&amp;amp;amp;gt;

<form method="post" id="loginform" action="&amp;amp;amp;lt;?php echo site_url("wp-login.php"); ?&amp;amp;amp;gt;
" class="login-form">

<div class="error-msg">
<?php if(isset($_GET['login']) == $_GET['login']=='invalid') { echo __('Wrong Username or Password.','plugindomain'); } ?></div>

   <div class="form-row form-row-username">
		<label for="username">Username :</label>
		<input name="log" class="form-control login-field" value="" placeholder="Username" id="login-name" type="text" >
	</div>

		
<div class="form-row form-row-username">
		<label for="username">Password :</label>
		<input name="pwd" class="form-control login-field" value="" placeholder="Password" id="login-pass" type="password">
	</div>

	   	
<div class="form-row form-row-remember">
		<label for="rememberme" class="rememberme">
		<input id="rememberme" value="forever" name="rememberme" type="checkbox">
		Remember Me		</label>
	</div>

<div class="form-row form-row-submit">
        // Link of the page where you want to redirect user after succesful login
        <input value="<?php echo site_url("dashboard"); ?>" name="redirect_to" type="hidden">
		<input class="ibc-submit" name="wp-submit" value="Log in" type="submit">
	</div>

	</form>

 <?php // this action can be used to load any javascript or CSS file on this page. Some other plugin may need this. 
do_action('login_enqueue_scripts'); 
return ob_get_clean(); 
} 

add_action( 'wp_login_failed', 'w3b_login_failed', 10, 3 ); 
function w3b_login_failed() { 
   $referrer = $_SERVER['HTTP_REFERER']; 
   wp_redirect($referrer."/?login=invalid"); 
   exit; 
} 
?>

Here we have created two function, The first one is to show the login form through shortcode.

The second function w3b_login_failed is used to redirect the user to the same page, If login Authentication is failed. where the login form is added,