New Post has been published on Resource Guru
New Post has been published on http://resource-guru.com/tutorials/build-custom-wordpress-login-form
How to Build a Custom WordPress Login Form
Today WordPress Version 4.0 is released but the login page is not changed from many years. Today we are posting a Tutorial on How to Build a Custom WordPress Login Form. This tip is really useful for you and take your website to a next level. Custom login Forms in WordPress did a great conversion transformation and increase you user base. It also gave you an opportunity for branding stuff on WordPress login page.
Also Read:
Ultimatum: Awesome Drag and Drop Website Builder
Collection of Best WordPress Tutorials – March 2014
10 Best Free WordPress Slider Plugins for 2014
In order to access the WordPress dashboard, you need to use the WordPress default login form. But you can now build a custom login form that can be integrated to your WP site post or a web page by using a shortcode, and that can also be embedded in your theme’s location with help of template tag. This article will take you through the process of creating a custom login form using Flat UI form components.
So, let’s get started with the development process of custom WordPress login form, which can be created by building a plugin and installing it into your WP website. Begin by creating a “plugin directory” folder that will contain all your plugin files. Next, include the plugin header in your theme as shown below:
<?php /* Plugin Name: Login Form Plugin URI: http://xyz-login.com Description: Login form plugin to be included in a post Version: 1.0 Author: Resource Guru (Your Name) */
Since we are using Flat UI form components in the process of custom login form creation, it is important to include those components into our plugin folder. So, download the Flat UI, and then extract all the files and copy the “bootstrap”, “css” and “font” folder to our newly created plugin folder.
Now you will need to embed the following login form code in the PHP function xyz_form().
function xyz_form() ?> <form method="post" action="<?php echo $_SERVER['REQUEST_URI']; ?>"> <div class="login-form"> <div class="form-group"> <input name="login_name" type="text" class="form-control login-field" value="" placeholder="Username" id="login-name" /> <label class="login-field-icon fui-user" for="login-name"></label> </div> <div class="form-group"> <input name="login_password" type="password" class="form-control login-field" value="" placeholder="Password" id="login-pass" /> <label class="login-field-icon fui-lock" for="login-pass"></label> </div> <input class="btn btn-primary btn-lg btn-block" type="submit" name="dlf_submit" value="Log in" /> </form> </div> <?php
It is imperative to make the username and password validated – that needs to entered to the login form. And xyz_auth() function can handle this functionality. Look at the following code that needs to be included in xyz_auth() function:
function xyz_auth( $username, $password ) global $user; $creds = array(); $creds['user_login'] = $username; $creds['user_password'] = $password; $creds['remember'] = true; $user = wp_signon( $creds, false ); if ( is_wp_error($user) ) echo $user->get_error_message(); if ( !is_wp_error($user) ) wp_redirect(home_url('wp-admin'));
So, if some invalid username or password is entered by the user, an error message will pop up informing that the data entered is invalid or incorrect; and a link will be displayed along with the message that will redirect to the “lost your password page”, assuming that the user has forgot his or her password.
The xyz_process() function as shown below will showcase your custom-built login form to the front-end, and evaluate whether the login form has been submitted or not and later will call the xyz_auth() function to confirm whether the username and password are genuine or not. If the login credentials entered by the user are authenticated, the user will be redirected to WordPress admin dashboard.
Below is the code for the xyz_process() function:
function xyz_process() if (isset($_POST['dlf_submit'])) xyz_auth($_POST['login_name'], $_POST['login_password']); xyz_form();
So, now the coding for building a custom WordPress login form plugin has been completed. Next, we will have to install the plugin in our WordPress post or page where we want to embed the custom login form. Once the plugin gets installed you will need to activate it.
Summary
Many website owners running a WordPress site often wish to have a customized login form that integrates visually with their website. This is a noteworthy article that will most likely help you build a customized login form that can be embedded to your WP blog post or page.
About the Author :- Ben Wilson is a consistence and enthusiastic writer cum developer. His core hand is WordPress conversion services including PSD to WordPress conversion, HTML to Worpress conversion and many more. Presently he is working with one of biggest WordPress service company – WordPrax Ltd. known for providing high quality works to their clients.