Styling ReCaptcha in WordPress

reCAPTCHA is an effective service for eliminating spam on your site. It is based on Captcha, “a type of challenge-response test used in computing to ensure that the response is not generated by a computer” acting as a spambot.

reCAPTCHA can be used to protect any web-based form spam. This post explains how to customize the appearance of the ReCaptch section. Instructions for installing reCAPTCHA on a WordPress blog are available on reCAPTCHA’s site.

Once the plugin is installed and activated, the appearance can easily be styled. reCAPTCHA offers four predefined styles called “themes”:

reCAPTCHA-red.pngred (default theme)

reCAPTCHA-blackglass.pngblackglass

reCAPTCHA-clean.pngclean

reCAPTCHA-white.pngwhite

reCAPTCHA also offers a fourth option allowing complete custom styling of the reCAPTCHA form. This post doesn’t cover complete custom styling but detailed API Documentation is available directly from reCAPTCHA.

The theme is set in the reCAPTCHA plugin code. The code can be edited by clicking the Edit link next to the plugin in WordPress. See illustration.

plugin-edit.png

In the Plugin Editor look for the following code block:


/* Embeds the reCAPTCHA widget into the comment form.
*
*/
function recaptcha_comment_form() {
//modify the comment form for the reCAPTCHA widget
$recaptcha_js_opts = <<<OPTS
<script type='text/javascript'>
var RecaptchaOptions = { theme : 'red', tabindex : 5 };
</script>

The code that reads theme : 'red' is the code that controls the theme of the ReCapthcha. The possible values are: ‘red’ , ‘white’ , ‘blackglass’ , ‘clean’, or ‘custom’.

Set the theme to ‘red’ , ‘white’ , ‘blackglass’ or ‘clean’ and save click Update File. The new style will now appear on instead of the default ‘red’ theme.

If the theme is set to ‘custom’ no reCAPTCHA will appear on the comment form until certain HTML elements are added to display the CAPTCHA to the user. Custom theming is beyond the scope of this post.

Good luck.