![\"\"](\"https:\/\/w3beginner.com\/wp-content\/uploads\/2018\/10\/front-end-login-form.jpg\")
<\/a><\/p>\nFor 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.<\/p>\n
Put the below code at the end of your theme functions.php and create a plugin<\/a> of this code.<\/p>\n Put this shortcode [w3b_login_form]<\/strong> on any page to show the login form.<\/p>\n Here we have created two function, The first one is to show the login form through shortcode.<\/p>\n The second function w3b_login_failed<\/em> is used to redirect the user to the same page, If login Authentication is failed. where the login form is added,<\/p>\n","protected":false},"excerpt":{"rendered":" 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… Read More ⇒ <\/a><\/p>\n","protected":false},"author":1,"featured_media":241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/posts\/226"}],"collection":[{"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":15,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/posts\/226\/revisions\/248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/media\/241"}],"wp:attachment":[{"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/w3beginner.com\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n<?php add_shortcode( 'w3b_login_form', 'w3b_login_form') ); function w3b_login_form() { ob_start(); ?&amp;amp;gt;\r\n\r\n<form method="post" id="loginform" action="&amp;amp;lt;?php echo site_url("wp-login.php"); ?&amp;amp;gt;\r\n" class="login-form">\r\n\r\n<div class="error-msg">\r\n<?php if(isset($_GET['login']) == $_GET['login']=='invalid') { echo __('Wrong Username or Password.','plugindomain'); } ?><\/div>\r\n\r\n <div class="form-row form-row-username">\r\n\t\t<label for="username">Username :<\/label>\r\n\t\t<input name="log" class="form-control login-field" value="" placeholder="Username" id="login-name" type="text" >\r\n\t<\/div>\r\n\r\n\t\t\r\n<div class="form-row form-row-username">\r\n\t\t<label for="username">Password :<\/label>\r\n\t\t<input name="pwd" class="form-control login-field" value="" placeholder="Password" id="login-pass" type="password">\r\n\t<\/div>\r\n\r\n\t \t\r\n<div class="form-row form-row-remember">\r\n\t\t<label for="rememberme" class="rememberme">\r\n\t\t<input id="rememberme" value="forever" name="rememberme" type="checkbox">\r\n\t\tRemember Me\t\t<\/label>\r\n\t<\/div>\r\n\r\n<div class="form-row form-row-submit">\r\n \/\/ Link of the page where you want to redirect user after succesful login\r\n <input value="<?php echo site_url("dashboard"); ?>" name="redirect_to" type="hidden">\r\n\t\t<input class="ibc-submit" name="wp-submit" value="Log in" type="submit">\r\n\t<\/div>\r\n\r\n\t<\/form>\r\n\r\n <?php \/\/ this action can be used to load any javascript or CSS file on this page. Some other plugin may need this. \r\ndo_action('login_enqueue_scripts'); \r\nreturn ob_get_clean(); \r\n} \r\n\r\nadd_action( 'wp_login_failed', 'w3b_login_failed', 10, 3 ); \r\nfunction w3b_login_failed() { \r\n $referrer = $_SERVER['HTTP_REFERER']; \r\n wp_redirect($referrer."\/?login=invalid"); \r\n exit; \r\n} \r\n?>\r\n<\/pre>\n