How to Add a Custom Field in the WordPress Login Form

The Login Page on your site is usually ignored, or rather just left as it is. You can make certain modifications, like provide login access from any page on the site, or use plugins which allow registration and login using social media profiles. You could even change the entire look and styling of your site’s login form. Although this use case may not usually arise, there may be a need to add a custom field in your login form, for example a simple captcha for security purposes.

If you were considering changing the login form entirely, you could use the ‘wp_login_form’ function, in your theme or plugin. The ‘wp_login_form’ function not only allows the creation of a custom login form, but can also be used to display the form. But to simple add a simple field, you can certainly uses the default login hooks WordPress provides, to add content on to the login page. As an example, we will try adding a simple captcha field on the login form.

[space]

Adding a Captcha Field in the Login Form

A WordPress site’s backend can be accessed from the login page. Although the access is password protected, an extra level of security is recommended to stop spammers from logging-in to the site’s dashboard. For this purpose, a captcha field can be added. The Really Simple Captcha Plugin, allows you to add a Captcha field to a Contact Form 7 form. You can even use the plugin to add a captcha field to any form, including the login form.

Displaying the Captcha Field in the Login Form

The WordPress login action hook, ‘login_form’ displays content at the end of the login form, before the submit button. To add an extra field, you need to make use of this hook. We can add our captcha field as follows:

add_action('login_form', 'wdm_login_form_captcha');
function wdm_login_form_captcha()
{
  if(class_exists('ReallySimpleCaptcha'))
  {
    $captcha_instance = new ReallySimpleCaptcha();
    $word = $captcha_instance->generate_random_word();
    $prefix = mt_rand();
    $captchaimg = $captcha_instance->generate_image( $prefix, $word );
    $imgpath = plugins_url().'/really-simple-captcha/tmp/'.$captchaimg;
    ?>

    <input type="hidden" name="wdm_captcha_prefix" value="<?php echo $prefix; ?>"/>
    <img src="<?php echo $imgpath; ?>" />  = <input name="wdm_captcha_answer" type="text" />
    <?php
  }
}

[space]

Validating the Captcha

Since the field has to be validated we need to add the validation on a hook before allowing the user to log in. For this, we need to use the ‘wp_authenticate_user’, filter hook.

add_filter('wp_authenticate_user','wdm_validate_login_captcha',10,2);
function wdm_validate_login_captcha($user, $password) {
  $return_value = $user;
  if(class_exists('ReallySimpleCaptcha'))
  {
    $captcha_instance = new ReallySimpleCaptcha();
    $prefix = $_POST['wdm_captcha_prefix'];
    if(!$captcha_instance->check( $prefix, $_POST['wdm_captcha_answer'] ))
    {
      // if there is a mis-match
      $return_value = new WP_Error( 'loginCaptchaError', 'Captcha Error. Please try again.' );
    }

  // remember to remove the prefix
  $captcha_instance->remove( $prefix );
}
return $return_value;
}

[space]

Using these hooks can allow you to easily add fields in your login form, similar to the simple captcha we added. This simple trick can help you when you have to create a custom plugin that modifies or operates on the login form.

You may also like to read: How to Deny Users Access to Your Admin Dashboard.