Use the new reCAPTCHA checkbox to protect your WordPress comments

Recently Google has released a new version for their free service reCAPTCHA. The new reCAPTCHA checkbox is easier to use for the “real” visitor and provides a strong validation feature. With the new checkbox it’s not necessary to enter a combination of random letters and numbers to submit some comment form. I tried the new reCAPTCHA checkbox and must say it’s a great replacement, because the widget looks better and as mentioned before: there is no more challenge you have to enter. The last is not completely true, while testing, I’ve discovered that you have to enter a challenge if service think you’re a spammer. There is also a fallback feature for old browsers, where the user has to enter 1) a challenge and 2) has to copy/paste some response code. This advanced tutorial shows you how to integrate the new reCAPTCHA checkbox into the WordPress comment system.

Add the new reCAPTCHA checkbox to your comment form

Before you can start you need to register your website’s domain name on the reCAPTCHA website to get the two required site key and secret. If you have them, open your themes functions.php file and include callback function and the reCAPTCHA JavaScript file below.

function add_recaptcha_snippet() {
    echo "
<script type=\"text/javascript\">
var onloadCallback = function() {
	grecaptcha.render('html_element', {
	  'sitekey' : 'ENTER_HERE_YOUR_SITE_KEY',
	  'theme' : 'dark',
	  'hl' : 'en'
	});
};
</script>";
}
add_action('wp_head', 'add_recaptcha_snippet');

function add_recpatcha_script() {
	wp_enqueue_script( 'script-name', 'https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit', array(), '1.0', true );
}
add_action('wp_enqueue_scripts', 'theme_name_scripts');

The first function is used to configure the reCAPTCHA, don’t forget to enter here your reCAPTCHA site key. If you like you can change the theme from “dark” to “light”. The language value (hl) is optional, remove the value and the function will choose the language based on the user’s browser settings. Next we need to add the reCAPTCHA API script. The best way to do this is, by using the WordPress function wp_enqueue_script(). It’s possible that your theme has already an action for some other style or JavaScript files. If this is the case you can combine them to keep your code clean and compact. The link to the API is added to the footer for and optimized and faster page load. The following filter function will add the reCAPTCHA function below your comment form. Place this code into the functions.php file as well.

function add_recaptcha_below_form($args) {
	$args['comment_notes_after'] = '';
    $args['comment_notes_after'] .= '<div id="html_element"></div>';
    return $args;
}
add_filter('comment_form_defaults', 'add_recaptcha_below_form');

This filter will add a DIV container right after the comment field (I removed the comment notes before). After the page is loaded, the callback function from the JavaScript code will add the reCAPTCHA checkbox to the DIV container. At the moment that a visitor has clicked the checkbox, the form element with the name “g-recaptcha-response” will get a value from the reCAPTCHA API system. This hidden value is posted together with other form content after the use has clicked the submit button. I use the following action to validate the posted value against the API system.

add_filter('preprocess_comment', 'verify_comment_recaptcha');

function verify_comment_recaptcha($commentdata) {
	if (empty($_POST['g-recaptcha-response'])) {
		wp_die(__('You need to click captcha checkox.' ));
	} else {
		$captcha_url = 'https://www.google.com/recaptcha/api/siteverify?secret=ADD_HERE_YOUR_SECRET&response='.$_POST['g-recaptcha-response'].'&remoteip='.$_SERVER['REMOTE_ADDR'];
		if ($data = wp_remote_get($captcha_url)) {
			$obj = json_decode($data['body']);
			if ($obj->success) {
				return $commentdata;
			} else {
				wp_die(__('The captcha repsonse is not valid.'));
			}
		} else {
			wp_die(__('Can\'t return the captcha repsonse.'));
		}
	}
}

The function is used as a WordPress filter to check the request from the reCAPTCHA API before the comment is processed or stored inside the database. This way of comment validation is very secure, because each request is done together with the users IP address. The IP address validation will check that this IP address is the same as the one that was recorded at the moment the user has clicked the checkbox before. These are hard times for every spambot. This integration for your WordPress comment section is very basic and is written for the native comment feature provided by WordPress. If you use an Ajax comment form, it’s maybe necessary to change the code a bit. For my own WordPress website I use currently the Akismet plugin instead of a CAPTCHA challenge, but I created a reCAPTCHA example demo to show how it works.

Published in: WordPress Development