Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client needs to make the heading text in a custom plugin translatable, as well as another text passed through using AJAX.
Solution:
For the heading text:
1. Ensure you use the

esc_html__()

function with the text domain specified, like this:

echo esc_html__( 'Text to translate', 'text-domain-here' );

2. Scan your plugin for strings:
- Navigate to WPML > Theme and plugins localization
- Select your plugin and click on Scan selected plugins for strings
- Wait for the operation to complete
3. Translate the strings:
- Go to WPML > String Translation and translate them.

For AJAX-passed text:
1. Declare 'wp-i18n' as a dependency in your JS file:

wp_register_script( 
'sample-script', 
plugins_url( 'app.js', __FILE__ ), 
array( 'wp-i18n' ) 
);

2. Use the i18n functions to translate strings in your JavaScript:

const { __ } = wp.i18n;
alert( __( 'This is a translatable sentence', 'your-text-domain' ) );

For further guidance, refer to the tutorial on scanning themes or plugins and the section on Adding GetText Calls to JavaScript (JS) Code in our documentation.

If this solution does not apply to your case, or if it seems outdated, please check the related known issues, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. We highly recommend opening a new support ticket if needed.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 3 replies, has 0 voices.

Last updated by Nicolas V. 1 month, 1 week ago.

Assisted by: Nicolas V..

Author Posts
November 14, 2024 at 3:41 pm #16403879

Nikhil Vishwanath

Hi,

Thank you very much for sharing this info.

I checked the page and can see that it is now translated.

Another question regarding this:
We have a custom plugin on the site which shows a popup message with a heading text and button options "Yes" and "No".

How can we make the heading text translatable in other languages? If we use the same process you mentioned, what would we have to do in that case?

We have used esc_html__() inside the h2 tag in our custom code.

Looking forward to your response.

Thank you.

November 14, 2024 at 3:52 pm #16403919

Nicolas V.
Supporter

Languages: English (English ) French (Français )

Timezone: America/Lima (GMT-05:00)

Hello,

You won't follow the same workflow here because it's not a text that you can change on an option page.

'esc_html__()' is the correct function to retrieve translation, please make sure that you add the domain name as a second argument.

1. Your code should look like this:

echo esc_html__( 'Text to transalate', 'text-domain-here' );

2. Scan your plugin
- Go to "WPML > Theme and plugins localization"
- Select your plugin and click on "Scan selected plugins for strings"
- Wait until the operation is completed

3. Translate
- Go to "WPML > String Translation" to translate them

The tutorial I've shared explains different methods. This one is "Scanning the Theme or Plugin"

November 14, 2024 at 4:00 pm #16403960

Nikhil Vishwanath

Hi,

Thanks for the response.

We got the text using this method.
Although there is another text we are passing through using AJAX. This string is sent back to the JS request to display on the page after the content is loaded.

How can we make that translatable as well?

Thanks.

November 14, 2024 at 8:44 pm #16405015

Nicolas V.
Supporter

Languages: English (English ) French (Français )

Timezone: America/Lima (GMT-05:00)

Hello,

While custom code falls outside the scope of our support policy, let me share a few links to guide you in the right direction:

https://wpml.org/documentation/support/translating-the-theme-you-created/
section "Adding GetText Calls to JavaScript (JS) Code" there is a link to the WordPress documentation https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-support-in-wordpress/

To utilize i18n functions in your JavaScript code, you need to make sure your JS file declares ‘wp-i18n‘ as a dependency.

wp_register_script( 
'sample-script', 
plugins_url( 'app.js', __FILE__ ), 
array( 'wp-i18n' ) 
);

Once you add the dependency, you can use the i18n functions in your JavaScript file. Here’s an example of how to use the __() function to translate a string:

const { __ } = wp.i18n;
alert( __( 'This is a translatable sentence', 'your-text-domain' ) );