WordPress Custom Login Form without plugin and wp_login_form
- Article
- Comment (6)
WordPress Custom Login Form without plugin and wp_login_form. Generally the wp_login_form function will send the user credentials to the default WordPress login page. So it shows the url of login page. Suppose if you want to hide the login page. You may goto custom login page. But if the form action shows the URL than its a hack to show it to the users. Also here I can suggest you a way to do that functions.
Create a template with a name of login page.
<?php /** * Template Name : Kv login page */ // here our custom login page code will be added soon ?>
Once you write this code on a file save it as “template-kv-login.php” than put it on ur themes directory and now move to backend of WordPress and create a page with titling as “Login ” and select the template “Kv login page ” from the page right side drop down and publish it.
Now you can view this page. It’s empty and blank page now. Just add few lines to make it feel like the your other pages.
<?php get_header(); // Here our code will be added. get_footer(); ?>
On the template file. It will hook the default theme functions and styles.
Now getting into the topic. Create a login form and put it as post method and the actions should point the same page as like the following one.
<?php if(!empty($errors)) { // to print errors, foreach($errors as $err ) echo $err; } ?> <form name="loginform" action="http://localhost/wp/kvcodesplugin/login" method="post"> <p class="login-username"> <label for="user_login">Username</label> <input type="text" name="userName" id="user_login" class="input" value="" > </p> <p class="login-password"> <label for="user_pass">Password</label> <input type="password" name="passWord" id="user_pass" class="input" value="" > </p> <p class="login-remember"><label><input name="rememberMe" type="checkbox" id="rememberme" value="forever"> Remember Me</label></p> <p class="login-submit"> <input type="hidden" name="login_Sbumit" > <input type="submit" name="wp-submit" id="wp-submit" class="button-primary" value="Log In"> <input type="hidden" name="redirect_to" value="http://localhost/wp/kvcodesplugin/"> </p> </form>
Now we are going to write the form actions for this login page form. Than we will validate the user entered details and we login it or showing error on it.
if(isset($_POST['login_Sbumit'])) { $creds = array(); $creds['user_login'] = stripslashes( trim( $_POST['userName'] ) ); $creds['user_password'] = stripslashes( trim( $_POST['passWord'] ) ); $creds['remember'] = isset( $_POST['rememberMe'] ) ? sanitize_text_field( $_POST['rememberMe'] ) : ''; $redirect_to = esc_url_raw( $_POST['redirect_to'] ); $secure_cookie = null; if($redirect_to == '') $redirect_to= get_site_url(). '/dashboard/' ; if ( ! force_ssl_admin() ) { $user = is_email( $creds['user_login'] ) ? get_user_by( 'email', $creds['user_login'] ) : get_user_by( 'login', sanitize_user( $creds['user_login'] ) ); if ( $user && get_user_option( 'use_ssl', $user->ID ) ) { $secure_cookie = true; force_ssl_admin( true ); } } if ( force_ssl_admin() ) { $secure_cookie = true; } if ( is_null( $secure_cookie ) && force_ssl_login() ) { $secure_cookie = false; } $user = wp_signon( $creds, $secure_cookie ); if ( $secure_cookie && strstr( $redirect_to, 'wp-admin' ) ) { $redirect_to = str_replace( 'http:', 'https:', $redirect_to ); } if ( ! is_wp_error( $user ) ) { wp_safe_redirect( $redirect_to ); } else { if ( $user->errors ) { $errors['invalid_user'] = __('<strong>ERROR</strong>: Invalid user or password.'); } else { $errors['invalid_user_credentials'] = __( 'Please enter your username and password to login.', 'kvcodes' ); } } }
That’s it, you can check its result. if you have any problem or error comment below
Nice article! What i miss with this is what if you are already logged-in? The login form still shows…
Hey dude,
I was busy couldnt get back you early. Its simple, use the
is_user_logged_in()
to check and set it.why do I receive these errors?
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\class.wp-styles.php:211) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 943
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\class.wp-styles.php:211) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 944
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\class.wp-styles.php:211) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 945
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\class.wp-styles.php:211) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 1281
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\class.wp-styles.php:211) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 1284
You have a space after ?> or your program has some echo that comes before the header loads.
why do receive these errors?
Deprecated: force_ssl_login is deprecated since version 4.4.0! Use force_ssl_admin() instead. in C:\xampp\htdocs\wordpress\wp-includes\functions.php on line 4713
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\formatting.php:5600) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 943
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\formatting.php:5600) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 944
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\formatting.php:5600) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 945
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\formatting.php:5600) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 1281
Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress\wp-includes\formatting.php:5600) in C:\xampp\htdocs\wordpress\wp-includes\pluggable.php on line 1284
my code
<img src="/assets/images/profilr.png” alt=”cup” class=”img-fluid rounded align-items-center” height=”100px” width=”100px”>
Username
Password
Remember Me
Don’t have an account |
Signup now.
ID ) ) {
$secure_cookie = true;
force_ssl_admin( true );
}
}
if ( force_ssl_admin() ) {
$secure_cookie = true;
}
if ( is_null( $secure_cookie ) && force_ssl_login() ) {
$secure_cookie = false;
}
$user = wp_signon( $creds, $secure_cookie );
if ( $secure_cookie && strstr( $redirect_to, ‘wp-admin’ ) ) {
$redirect_to = str_replace( ‘http:’, ‘https:’, $redirect_to );
}
if ( ! is_wp_error( $user ) ) {
wp_safe_redirect( $redirect_to );
} else {
if ( $user->errors ) {
$errors[‘invalid_user’] = __(‘ERROR: Invalid user or password.’);
} else {
$errors[‘invalid_user_credentials’] = __( ‘Please enter your username and password to login.’, ‘kvcodes’ );
}
}
}
get_footer();
?>
The force_ssl_login function was deprecated from wp. so try alternative it will work there.