WordPress Front End User Login

Published on : March 11, 2015

Author: Saniul Ahsan

Category: Wordpress

Many wordpress users like us want to make a front end login form for many purposes. So, today I am going to show you how to do that.

Step 1

First you have to create a page template . Here we will create a page template named “Login Page”. Though I assume you know how to create a page template, but I will give you the code. First, create a php file named “some-name.php” and paste the code in head section of the page.



<?php /** * Template Name: Login Page

* * @package WordPress

* @subpackage Shephard

* @since WordPress */ ?>

Now create a page like log in and select the page template for that.

Step 2

Now we have to create a form for user login.

For this purpose we will create a form and give it a proper style and look through css.



<form method="post" action="">

<div class="login-form">

<div>

<input name="review-user-name" type="text" class="request-field3" placeholder="user Name">

</div>

<div>

<input name="review-password" type="Password" class="request-field3" placeholder="Password">

</div>

<div align="center">

<input name="review-login-button" type="submit" class="sub-button6" value="Login">

</div>

</div>

</div>

</form>

Step 3

In this step we will submit the form and if the submission is successful we will redirect the user to the home page.



<?php

if( isset( $_POST['review-login-button'] ) ) {

&nbsp;

$creds = array();

$creds['user_login'] = $_POST['review-user-name'];

$creds['user_password'] = $_POST['review-password'];

$creds['remember'] = true;

$user = wp_signon( $creds, false );

if ( is_wp_error($user) ) {

$error = $user->get_error_message();

}

else {

wp_redirect( home_url( '/home/' ) );

}

}

?>

Step 4

If any error occurs then we will show the error message like the code below.



<?php

if( $error )

{

echo '<div class="error">'.$error.'</div>';

}

?>

You can give proper styling to the HTML and make it look fancier.

Thus through this simple steps you can create a better login form than WordPress have.