WordPress Custom Login Form without plugin and wp_login_form |
X

Congrats, You are Subscribed to Receive Updates.

WordPress Custom Login Form without plugin and wp_login_form


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

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level

6 comments

  1. commenter

    Nice article! What i miss with this is what if you are already logged-in? The login form still shows…

  2. commenter

    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

  3. commenter

    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();
    ?>

Reply to Patrick Cancel reply

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar