Back to Top

How-to: Add custom translations to BWP reCAPTCHA

Previous Post:

How-to: Add custom translations to BWP reCAPTCHA

A frequent support question I receive regarding BWP reCAPTCHA is how to add custom reCAPTCHA translations (keep in mind that this is for reCAPTCHA version 1 only.)

While it’s certainly very easy to add your own translation strings, it can be confusing as well (and the reCAPTCHA documentation isn’t really helpful).

Translating BWP reCAPTCHA into a custom language consists of two steps. The first step is to translate BWP strings (mostly error messages) and the second step is to translate reCAPTCHA strings themselves. BWP error messages are editable inside admin area (BWP reCAPT > General Options), but some are only available via a .pot file (which should be translated automatically if there’s a localization file for your custom language).

reCAPTCHA custom translation strings on the other hand need some special treatment, depending on which reCAPTCHA theme you’re using. If you use one of the four default themes (i.e. Red, Black, White, Clean), then it should suffice to add the following to your theme’s functions.php:

add_action('wp_head', 'bwp_recaptcha_add_custom_translation');

function bwp_recaptcha_add_custom_translation()
{
?>
<script type="text/javascript">
        var CustomRecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // just for audio challenge
                theme : 'red' // Make sure there is no trailing ',' at the end
        };
</script>
<?php
}

I’m adding the custom translations to my header, but you can add them at other places, just make sure that they are added before your reCAPTCHA. Please note that it’s CustomRecaptchaOptions instead of RecaptchaOptions (this is the key difference when using default themes). Also, using this method will effectively override any settings you have configured in admin area.

If you use a custom theme (either provided by BWP reCAPTCHA or your own theme), make sure you add the custom translations (same as above) as well as translate other hard-coded strings in your HTML reCAPTCHA widget, like so:

function bwp_capt_custom_theme_widget()
{
	global $bwp_capt;
?>
		<script type="text/javascript">
			var RecaptchaOptions = {
				custom_translations: {.....}
				theme : 'custom',
				custom_theme_widget: 'recaptcha_widget',
				lang: 'it' // just for audio challenge
			};
		</script>
		<div id="recaptcha_widget" style="display: none;">
			<p class="recaptcha_only_if_incorrect_sol">
				<?php echo $bwp_capt->options['input_error']; ?>
			</p>
			<div id="recaptcha_image"></div>
			<div class="recaptcha_control">
				<a href="javascript:Recaptcha.reload()" title="<?php _e('Get another challenge', 'bwp-recaptcha'); ?>"><img src="<?php echo BWP_CAPT_IMAGES . '/icon_refresh.png'; ?>" alt="<?php _e('Get another challenge', 'bwp-recaptcha'); ?>" /></a>
				<span class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')" title="<?php _e('Get audio reCAPTCHA', 'bwp-recaptcha'); ?>"><img src="<?php echo BWP_CAPT_IMAGES . '/icon_sound.png'; ?>" alt="<?php _e('Get audio reCAPTCHA', 'bwp-recaptcha'); ?>" /></a></span>
				<span class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')" title="<?php _e('Get image reCAPTCHA', 'bwp-recaptcha'); ?>"><img src="<?php echo BWP_CAPT_IMAGES . '/icon_image.png'; ?>" alt="<?php _e('Get image reCAPTCHA', 'bwp-recaptcha'); ?>" /></a></span>
				<span><a href="javascript:Recaptcha.showhelp()" title="<?php _e('About reCAPTCHA', 'bwp-recaptcha'); ?>"><img src="<?php echo BWP_CAPT_IMAGES . '/icon_help.png'; ?>" alt="<?php _e('About reCAPTCHA', 'bwp-recaptcha'); ?>" /></a></span>
			</div>

			<div class="recaptcha_text">
				<span class="recaptcha_only_if_image"><label for="recaptcha_response_field"><em><small><?php _e('Enter the two words in the box:', 'bwp-recaptcha'); ?></small></em></label></span>
				<span class="recaptcha_only_if_audio"><label for="recaptcha_response_field"><em><small><?php _e('Enter the numbers you hear:', 'bwp-recaptcha'); ?></small></em></label></span>
				<input type="text" id="recaptcha_response_field" tabindex="<?php echo (int) $bwp_capt->options['input_tab']; ?>" class="input" name="recaptcha_response_field" />
			</div>
		</div>
<?php
}

All strings inside the _e() function (highlighted lines) are hard-coded text strings that you must translate yourself or (more preferably) create a .po/.mo file for translation, which you can then send to me for inclusion within BWP reCAPTCHA (that will greatly benefit other users too).

That’s it, feel free to comment below if you are still in doubt.

Take Social Sharing to
the Next Level with Monarch!

Take Social Sharing to the Next Level with Monarch!
Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

8 Opinions for How-to: Add custom translations to BWP reCAPTCHA

  1. User's Gravatar
    1
    Carlo Collodi February 27, 2014 at 1:26 am – Permalink

    I’ts tragically funny that in your example code there is italian translaton, but then the italian translaiton is not included in the 8 default languages 🙂

    • User's Gravatar
      2
      Khang Minh March 3, 2014 at 5:13 pm – Permalink

      Good catch 🙂

  2. User's Gravatar
    3
    zahid June 27, 2014 at 3:26 am – Permalink

    Enter the two words in the box: …. HOW TO CHANGE THIS LABEL? IN THE COMMENT FORM, SOMETIMES COMING NUMERIC VALUES, SO I WANT TO CHANGE TO “Type the text mentioned above”

    • User's Gravatar
      4
      Khang Minh June 27, 2014 at 9:26 am – Permalink

      What theme are you using? All built-in themes should use the label “Type the text” instead now. If you’re still seeing “two words…”, try adding custom translation with instructions_visual set to “Type the text mentioned above”.

      If you’re using the custom theme you need to change the string in the widget’s HTML, which has been described in the current tip.

  3. User's Gravatar
    5
    zahid June 27, 2014 at 12:41 pm – Permalink

    Thanks for your reply. I am using Twenty Fourteen Theme. Could you kindly tell me the location/path of ‘Widget HTML’, I tried to find out the path/location for editing, but could not find. Sorry for the inconveniences caused by me.

    • User's Gravatar
      6
      Khang Minh July 1, 2014 at 9:53 pm – Permalink

      Actually I meant your recaptcha theme (go to wp-admin > BWP reCAPT > Theme Options). You only need to edit the widget html if you’re using a Custom Theme.

      You can currently override the default html by overriding this function: bwp_capt_custom_theme_widget inside a must-use plugin, but I will improve it in the next version so you can override in theme’s functions.php as well.

      The default html can be located here: /wp-content/plugins/bwp-recaptcha/includes/class-bwp-recaptcha.php

  4. User's Gravatar
    7
    Kevin December 17, 2014 at 10:02 am – Permalink

    This was very helpful – thank you!

    One question – how do you translate the text in the box “Invalid captcha error message” on the General Options page. The field doesn’t allow any HTML and doesn’t seem to be picked up by WPML for string translation. For now I’ve put both English and French in the field – not a great solution and hopefully temporary.

    Thank you

  5. User's Gravatar
    8
    deep July 7, 2015 at 7:26 pm – Permalink

    plugin is activated

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.




  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: