Categories

Saturday, July 20, 2024
#919814419350 therichposts@gmail.com
JqueryPhpWordpress Tricks

How to make custom login wordpress template with jquery validation?

How to add custom meta title and meta description in Wordpress?

make custom login wordpress template with jquery validation

Hello, welcome to therichpost.com. In this post, I will tell you How to make custom login wordpress template with jquery validation? WordPress is the best cms. I personally like it very much and my mostly posts are related to wordpress. The template making is good feature in wordpress and we can make our own template and add custom code in it. Today we will make custom login template and validate it with jquery and php method. To make user login we will use wordpress wp_signon function. Here are the some login form images: Image One: Image Two: Image Two: Here is the working code and first you need to make custom template like(login-template.php) then select template in admin dashboard pages.

<?php
/* Template Name: login */ 
if ( is_user_logged_in() ) {
wp_redirect(site_url());
exit;
}
if($_POST){
if(isset($_POST['loginusername']) && !empty($_POST['loginusername']) && isset($_POST['loginpassword']) && !empty($_POST['loginpassword'])){
$creds = array(
'user_login' => $_POST['loginusername'],
'user_password' => $_POST['loginpassword'],
'remember' => false
);
$user = wp_signon( $creds, false );
if ( is_wp_error( $user ) ) {
wp_redirect( site_url().'/login?login=error');
exit;
}else{
wp_redirect(site_url().'/login');
exit;
}
}
}
/*Custom login functionality code close*/
get_header(); ?>
<!– Banner Start –>
<div class="login-form">
<form action="" method="post" accept-charset="utf-8″ onsubmit="return validatelogin();">
<h1>SIGN IN OR CREATE ACCOUNT</h1>
<?php if(isset($_GET['login']) && $_GET['login'] == 'error'){ ?>
<span>Invalid user name and password.<br></span>
<?php } ?>
<input type="text" name="loginusername" id="loginusername" value="" placeholder="Username"><br><br>
<input type="password" name="loginpassword" id="loginpassword" value="" placeholder="********"><br>
<div class="clearfix"></div><br>
<input type="submit" name="" value="SIGN IN">
</form>
</div>
<?php get_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function validatelogin(){
$("#loginusername, #loginpassword").removeClass('validateerror');
var valicorrect = 0;
if($("#loginusername").val() == ""){
$("#loginusername").addClass('validateerror');
valicorrect = 1;
}
if($("#loginpassword").val() == ""){
$("#loginpassword").addClass('validateerror');
valicorrect = 1;
}
if(valicorrect == 1){
return false; 
}else{
return true; 
}
}
</script>
<style>
.validateerror{
border:1px solid red !important;
}
span{color:red;}
</style>

 

In future, I will also make custom registration template in wordpress. If you have any query related to this then please do comment. Thank you. therichpost.com

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

16 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.