How to create a frontend login template in WordPress without a plugin

frontend login in WordPress is a very appealing feature for users and site admin. In this tutorial, you can learn how to create a frontend login template in WordPress without a plugin.

Step 1: Create a custom template in your WordPress theme

Spet 2: Add the following codes in the custom template

<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">&lt;?php if(!empty($errors)) {  //  to print errors,
		foreach($errors as $err )
		echo $err; 
	} ?&gt;</pre>
</div>

<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">&lt;form name="loginform" action="https://yourwebsite.com/shop" method="post" class="clf-style"&gt;
	&lt;div class="login-logo"&gt;
		&lt;img src="#" alt="Logo" /&gt;
	&lt;/div&gt;

	&lt;p class="login-username"&gt; 
		&lt;input type="text" name="userName" id="user_login" class="input" value="" placeholder="Username" &gt;
	&lt;/p&gt;

	&lt;p class="login-password"&gt;
		&lt;input type="password" name="passWord" id="user_pass" class="input" value="" placeholder="Password"&gt;
	&lt;/p&gt;


	&lt;p class="login-submit"&gt;
		&lt;input type="hidden" name="login_Sbumit" &gt;
		&lt;input type="submit" name="wp-submit" id="wp-submit" class=""btn fa-input button-primary" value=""&gt;
		&lt;input type="hidden" name="redirect_to" value="http://localhost/wp/kvcodesplugin/"&gt;
	&lt;/p&gt;

&lt;/form&gt;</pre>
</div>

<div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:false,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}">&lt;?php


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 &amp;&amp; get_user_option( 'use_ssl', $user-&gt;ID ) ) {
			$secure_cookie = true;
			force_ssl_admin( true );
		}
	}

	if ( force_ssl_admin() ) {
		$secure_cookie = true;
	}

	if ( is_null( $secure_cookie ) &amp;&amp; force_ssl_login() ) {
		$secure_cookie = false;
	}

	$user = wp_signon( $creds, $secure_cookie );

	if ( $secure_cookie &amp;&amp; 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-&gt;errors ) {
			$errors['invalid_user'] = __('&lt;strong&gt;ERROR&lt;/strong&gt;: Invalid user or password.'); 
		} else {
			$errors['invalid_user_credentials'] = __( 'Please enter your username and password to login.', 'kvcodes' );
		}
	}		 
}


?&gt;</pre>
</div>

Best WordPress Plugin for Frontend Login ( Free and Paid )

WP User Frontend – Membership, Profile, Registration & Post Submission Plugin for WordPress

Description

WP User Frontend is one of the best frontend builder plugin for WordPress. It includes frontend dashboard, frontend editor & publishing, and frontend uploader for WordPress user profile, post submissions, and memberships.

FREE FEATURES

#1 Frontend Post Submission, Membership, Profile Builder & WordPress Editor Plugin

Update Profile from the Frontend

Flexibility for admins

Featured image & image

Drag-n-drop form builder

Publish your WPUF forms using Gutenberg

Use anywhere easily with shortcodes

WordPress Guest Post Submission

Role Base Support

Submit and update anything from Frontend

Build customized forms with custom post types

Set post status, post message, update post button text

Custom Redirection after login and submission

Earn with subscription based posting

Schedule forms & restrict entries

Get reminded with emails

Integrate with Advanced Custom Fields (ACF)

Create subscription packs, pay-per-posts & receive payments from users

Manage Transactions

Manage or Import/Export forms

Custom Login/Registration Form

Display Custom Fields Data in Post

Front-End Register & Login ( Paid )

With this plugin you can create custom forms that can register new users or login existing users from your front-end. Of course the Lost password form is also available which allows users to enter their email address to receive a new password. As an option you can select to send an activation email after registration or instantly let users login after their registration. Redirect to any page (for instance a dashboard). Below you can see how to set it up and what options are available.

BUY NOW

Available field names to use in your form are:
– user_login
– user_email
– user_pass
– role
– user_nicename
– user_url
– display_name
– nickname
– first_name
– last_name
– description
– rich_editing
– role
– jabber
– aim
– yim
– Any other data can be saved with custom user meta

Need WordPress Developer? Contact with Me