Building a Custom WordPress Login Form with Flat UI


WordPress is the most populous and one of the best content management system in the world. It powers over 60 percent of websites in the world.

By default, the Login form in WordPress is only visible when trying to access the administration dashboard. But you may prefer a custom login page that integrates visually with your website design instead of using the WordPress default login.

In this tutorial, I will teach you how to build a custom login form which can be embedded in a post or page using a shortcode and in a specific theme location using template tag.


The Flat UI form component — with a great aesthetic — will be used for the login form in this tutorial.

Below is a screenshot of the custom login form.

WordPress Login Form

Custom WordPress Login Form Development

Without further fussing, let’s get started.

First, create a folder called “plugin directory” where all of the plugin files will be stored.

Include the plugin file header as follows:


  Plugin Name: Designmodo Login Form
  Plugin URI:
  Description: Simple Login form plugin that just work
  Version: 1.0
  Author: Agbonghama Collins
  Author URI:

Remember we are using the form component in Flat UI and need to include it to our plugin folder. Download the Flat UI, extract the files and copy the bootstrap, css and font folder to our plugin folder.

The PHP function dlf_form() below contains the Login HTML form code.

 function dlf_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 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>
		<input class="btn btn-primary btn-lg btn-block" type="submit"  name="dlf_submit" value="Log in" />

We need to authenticate the username and password that will be entered to the login form. The dlf_auth() below handles that.

function dlf_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) ) {

When an invalid username or password is entered, an error message informing the user that data supplied is invalid will be displayed with a link to the Lost your password page, assuming the user forgot his or her password.

WordPress Login Form Error

The dlf_process() function below display the login form to WordPress front-end, check if the login form has been submitted and then call the dlf_auth() function to authenticate the username and password. If the login credentials are deemed valid, the user will be redirected to WordPress admin dashboard.

Below is the code for the dlf_process() function:

function dlf_process() {
if (isset($_POST['dlf_submit'])) {
	dlf_auth($_POST['login_name'], $_POST['login_password']);


To give our plugin the awesome look powered by Flat UI, we need to append the Bootstrap and Flat UI css stylesheet to WordPress header using WP enqueue function as shown below.

function flat_ui_kit() {
wp_enqueue_style('bootstrap-css', plugins_url('bootstrap/css/bootstrap.css', __FILE__));
wp_enqueue_style('flat-ui-kit', plugins_url('css/flat-ui.css', __FILE__));


add_action('wp_enqueue_scripts', 'flat_ui_kit');

To be able to easily embed this custom login form to a WordPress page, it has to be done via shortcode. The codes below provide a [dm_login_form] shortcode which when inserted to a post or page, the login form will be embedded.

function dlf_shortcode() {
return ob_get_clean();

add_shortcode('dm_login_form', 'dlf_shortcode');

Voila! we are completed the coding of our custom WordPress login form plugin.

Using the Login Form Plugin

First, get the plugin installed and activated in your WordPress blog.

To embed the custom login form in a post or page, use the shortcode [dm_login_form]. To include it a specific location in your theme, use the template tag below.

<?php echo do_shortcode('[dm_login_form]'); ?>


I know a lot of us would love to have a customized login form on a WordPress-powered website. This tutorial should help you achieve it.

Here is the link to the plugin file to use in your WordPress site; you can also study the code to learn how it works.

If you have any questions, let me know in the comments below.


  1. Rob Broley Jul 7, 4:59 pm

    Such a great form, very simplistic in design and beautifully designed.

  2. Nagarjuna Jul 7, 7:07 pm

    How to use this in the wp login page

  3. jazeppi Jul 7, 9:25 pm

    So could we just add these files to the plugin folder that is already inside our wordpress site?

    • Agbonghama Collins Jul 11, 1:15 am

      Save yourself the stress and download the plugin file. install and follow the instruction on how to use it.

      Alternatively, you can use ProfilePress, a front-end login form plugin for WordPress.

  4. Juan Aug 6, 12:09 pm

    Hi, i´m trying to use the plugging but it gives me an error;

    all works perfect, the login form shows ok, but when i log in, it refreshes the same page and before the login forms is this msg;

    Warning: Cannot modify header information – headers already sent by (output started at /usr/home/ in /usr/home/ on line 861

    Warning: Cannot modify header information – headers already sent by (output started at /usr/home/ in /usr/home/ on line 862

    Warning: Cannot modify header information – headers already sent by (output started at /usr/home/ in /usr/home/ on line 863

    Warning: Cannot modify header information – headers already sent by (output started at /usr/home/ in /usr/home/ on line 1121

    Could you help me?

    PD. Thanks a lot for the pluggin, the design is perfect!

    • Agbonghama Collins Aug 6, 1:09 pm

      Hi, sorry for the error.
      To fix it, add the code below to the very top of the plugin file.


      That should fix it.

    • Abhsiehk Gupta Jul 8, 10:42 am

      can you help me i add extra field in your registration form designmodo-registration-form plugin

      but value is not insert in data base please check out below code added one field name is user_address;

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

      <input name="reg_name" type="text" class="form-control login-field"
      placeholder=”Username” id=”reg-name” required/>

      <input name="reg_email" type="email" class="form-control login-field"
      placeholder=”Email” id=”reg-email” required/>

      <input name="user_address" type="text" class="form-control login-field"
      placeholder=”address” id=”user_address” required/>

      <input name="reg_password" type="password" class="form-control login-field"
      placeholder=”Password” id=”reg-pass” required/>

      <input name="reg_website" type="text" class="form-control login-field"
      placeholder=”Website” id=”reg-website”/>

      <input name="reg_fname" type="text" class="form-control login-field"
      placeholder=”First Name” id=”reg-fname”/>

      <input name="reg_lname" type="text" class="form-control login-field"
      placeholder=”Last Name” id=”reg-lname”/>

      <input name="reg_nickname" type="text" class="form-control login-field"
      placeholder=”Nickname” id=”reg-nickname”/>

      <input name="reg_bio" type="text" class="form-control login-field"
      placeholder=”About / Bio” id=”reg-bio”/>

      username) || empty($this->password) || empty($this->email) ||empty($this->user_address)) {
      return new WP_Error(‘field’, ‘Required form field is missing’);

      if (strlen($this->username) user_address) password) email)) {
      return new WP_Error(’email_invalid’, ‘Email is not valid’);

      if (email_exists($this->email)) {
      return new WP_Error(’email’, ‘Email Already in use’);

      if (!empty($website)) {
      if (!filter_var($this->website, FILTER_VALIDATE_URL)) {
      return new WP_Error(‘website’, ‘Website is not a valid URL’);

      $details = array(‘Username’ => $this->username,
      ‘user_address’ => $this->user_address,
      ‘First Name’ => $this->first_name,
      ‘Last Name’ => $this->last_name,
      ‘Nickname’ => $this->nickname,
      ‘bio’ => $this->bio

      foreach ($details as $field => $detail) {
      if (!validate_username($detail)) {
      return new WP_Error(‘name_invalid’, ‘Sorry, the “‘ . $field . ‘” you entered is not valid’);


      function registration()

      $userdata = array(
      ‘user_login’ => esc_attr($this->username),
      ‘user_address’ => esc_attr($this->user_address),
      ‘user_email’ => esc_attr($this->email),
      ‘user_pass’ => esc_attr($this->password),
      ‘user_url’ => esc_attr($this->website),
      ‘first_name’ => esc_attr($this->first_name),
      ‘last_name’ => esc_attr($this->last_name),
      ‘nickname’ => esc_attr($this->nickname),
      ‘description’ => esc_attr($this->bio),

      if (is_wp_error($this->validation())) {
      echo ”;
      echo ‘‘ . $this->validation()->get_error_message() . ‘‘;
      echo ”;
      } else {
      $register_user = wp_insert_user($userdata);
      if (!is_wp_error($register_user)) {

      echo ”;
      echo ‘Registration complete. Goto login page‘;
      echo ”;
      } else {
      echo ”;
      echo ‘‘ . $register_user->get_error_message() . ‘‘;
      echo ”;


      function flat_ui_kit()
      wp_enqueue_style(‘bootstrap-css’, plugins_url(‘bootstrap/css/bootstrap.css’, __FILE__));
      wp_enqueue_style(‘flat-ui-kit’, plugins_url(‘css/flat-ui.css’, __FILE__));


      function shortcode()


      if ($_POST[‘reg_submit’]) {
      $this->username = $_POST[‘reg_name’];
      $this->user_address = $_POST[‘user_address’];
      $this->email = $_POST[‘reg_email’];
      $this->password = $_POST[‘reg_password’];
      $this->website = $_POST[‘reg_website’];
      $this->first_name = $_POST[‘reg_fname’];
      $this->last_name = $_POST[‘reg_lname’];
      $this->nickname = $_POST[‘reg_nickname’];
      $this->bio = $_POST[‘reg_bio’];


      return ob_get_clean();


      new Designmodo_registration_form;

  5. Juan Aug 6, 2:55 pm

    Works perfect!

  6. p33p Aug 11, 8:43 am

    Thanks, but one more thing i already activated the plug-in and where would i suppose to put this codes that’s supposed to change wplogin? sorry noob here..

  7. geoff Aug 16, 6:52 pm

    Thanks for sharing this! Exactly what i’ve been trying to figure out. One question. How could you make this style take over the normal login, even without the shortcode. Would love to have a version that even the admin would see.

  8. Levi Nov 19, 6:33 am

    How would you load a different page instead of the dashboard after the login credentials are validated?

    • Fredrik Nov 27, 1:24 pm

      On line 45 switch to

      $redirect_to = $_SERVER[HTTP_REFERER];

      • Kurt May 15, 11:08 pm

        Would you completely take out all of line 45 and add in where to go where it says HTTP_REFERER?

  9. morven maciomhar Nov 20, 12:56 am

    Thanks for the plugin.

    Trouble is it doesn’t log me in to the site and it also moves the whole login box down making my site footer double it’s height. Any ideas?

    Thanks, M

  10. Grey Jan 26, 8:29 pm

    Is there a way to redirect users to the page they were on when they log in? I have a link from a post to login to comment(which is required) but it just directs users to the dashboard when I would rather it go back to the post, is this possible? Thanks

  11. kenis Polanco Mar 14, 6:12 am

    I would like to put the login plugin at the very top of the header on the right hand side exactly like your view more button. can you please help.

  12. Abhsiehk Gupta Jul 8, 10:37 am

    Show errro please resolve this problem

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\threetoparty\wp-content\themes\twentythirteen\header.php:13) in C:\xampp\htdocs\threetoparty\wp-includes\pluggable.php on line 918

  13. Tracy Feb 16, 1:13 am

    Hey – this is awesome. Thanks!
    If I add extra fields to this (for instance, I want my users to fill in what team they are on), will I see them in my wp_users database?

Leave a Reply

* Minimum length: 20 characters