WordPress Gtranslate plugin and textarea field translation issue

Among WordPress website translation plugins, GTranslate plugin is considered one of the best free options. With this solution, you can easily translate a website into multiple languages, providing a multilingual experience to your users without much effort. In this article, we will explain how to install and configure GTranslate on your WordPress site, and we will discuss a practical solution for a common problem: translating texts in textareas, which are not taken into account by default.

1. Installation and configuration of GTranslate

GTranslate allows you to use the power of Google Translate to automatically translate your WordPress site. Here are the steps to install and configure this plugin on your site:

Step 1: Install GTranslate

1. Go to your WordPress dashboard.
2. Go to Extensions > Add .
3. Search for GTranslate in the search bar.
4. Click Install and then Activate .

Step 2: Configure GTranslate

1. Once the plugin is activated, go to Settings > GTranslate .
2. Choose the languages you want to translate your site into.
3. Select the Free Machine Translation option.
4. Configure the language display method (e.g. with a flag or drop-down list).
5. Click Save Changes .

Your site is now ready to be automatically translated into multiple languages. Visitors can select the language of their choice, and the page will be automatically translated.

2. Problem translating texts in a text area

One of the drawbacks of GTranslate is that it does not translate text placed in HTML elements of type <textarea> . This is because text areas are usually designed for user input, so GTranslate ignores them by default.

Solution: Use jQuery to inject the placeholder text into the <textarea>

To work around this issue, a good solution is to use a jQuery script that grabs the text from the placeholder and automatically injects it into the textarea. Here's how to do it:

Example of jQuery to solve the problem:

Explanation of the code:

• updateTextarea() : This function checks if the <textarea> element has a non-empty placeholder attribute. If so, it copies the text from the placeholder to the value of the textarea.
• setTimeout() : A 2 second delay is introduced to ensure that GTranslate has completed the translation before the script injects the text into the textarea.
• Click event : If a user clicks on a language switcher element (with the glink nturl notranslate class), the process is reapplied, allowing an update of the translated text.

Conclusion

The GTranslate plugin is a great solution to translate a WordPress site quickly and for free. However, it has some limitations, including the non-translation of text boxes. Fortunately, using a simple jQuery script, it is possible to solve this problem by injecting the placeholder text into the text boxes. This solution guarantees a better multilingual user experience by ensuring that even the text fields are translated correctly.

By following this guide, you will not only be able to install and configure GTranslate, but also solve one of the major problems encountered while using it.