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="{"mode":"php","mime":"text/x-php","theme":"material","lineNumbers":false,"lineWrapping":false,"styleActiveLine":false,"readOnly":true,"align":""}"><?php if(!empty($errors)) { // to print errors,
foreach($errors as $err )
echo $err;
} ?></pre>
</div><div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{"mode":"htmlmixed","mime":"text/html","theme":"material","lineNumbers":false,"lineWrapping":false,"styleActiveLine":false,"readOnly":true,"align":""}"><form name="loginform" action="https://yourwebsite.com/shop" method="post" class="clf-style">
<div class="login-logo">
<img src="#" alt="Logo" />
</div>
<p class="login-username">
<input type="text" name="userName" id="user_login" class="input" value="" placeholder="Username" >
</p>
<p class="login-password">
<input type="password" name="passWord" id="user_pass" class="input" value="" placeholder="Password">
</p>
<p class="login-submit">
<input type="hidden" name="login_Sbumit" >
<input type="submit" name="wp-submit" id="wp-submit" class=""btn fa-input button-primary" value="">
<input type="hidden" name="redirect_to" value="http://localhost/wp/kvcodesplugin/">
</p>
</form></pre>
</div><div class="wp-block-codemirror-blocks code-block ">
<pre class="CodeMirror" data-setting="{"mode":"php","mime":"text/x-php","theme":"material","lineNumbers":false,"lineWrapping":false,"styleActiveLine":false,"readOnly":true,"align":""}"><?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 && 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' );
}
}
}
?></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.
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