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;gt; <form method="post" id="loginform" action="&amp;amp;lt;?php echo site_url("wp-login.php"); ?&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,