Search

How to Add a Custom Field in the WordPress Login Form

    Sumit Pore
Listen to this article

Custom Field Login FormThe 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.

Sumit Pore

Sumit Pore

6 Responses

  1. Hi there Sumit Pore,
    Could you please update this tutorial to work with the current version of WordPress?

    Also, if there is a way to implement this feature on to the user-registration screen (not the log-in screen but the ‘…/wp-login.php?action=register’ screen) that would be great!

    Thank you.

    1. Hi Robert,

      I tested it with the latest version of WordPress (4.0) and the same code works well. You can add it to the user-registration form using the hooks, ‘register_form’ instead of ‘login_form’, and the filter ‘registration_errors’, to test for any errors (if applicable). For more details you can refer Customizing the Registration Form.

  2. Hi,

    I can not get this to work with the registration form. The problem is that I get “Captcha Error” even if I type the right combination into the Captcha-field. I’m not sure if I am using ‘registration_errors’ right.

    1. Hi Olle,

      There was a tiny bit of change needed in the code (there was a mismatch in the CAPTCHA answer field’s name). I’ve updated it now and tested it. It should work.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads