How to translate javascript files from theme folder without plugin ?

Resolved soimagine
(@soimagine)

2 weeks ago

Hi.
I can’t understand why the documentation of WordPress allow only the javascript translation from plugin and not directly from functions.php inside theme folder?

The translation for PHP files of theme folder works perfectly. Also for the PHP files from my custom plugin.

Why do I have to create a plugin just to load a json file from the languages folder inside the theme folder?

The $handle parameter from wp_set_script_translations() and load_script_translations() allow only enqueue javascript files, but my main javascript file is added in footer.php of theme folder <script type="text/javascript">

Does exist a wp hook or a wp function to load json file or .po file without plugin ? Or can we do it with php alone?

Viewing 4 replies - 1 through 4 (of 4 total)

Moderator bcworkz
(@bcworkz)

1 week, 6 days ago

I think the set function just establishes the path to the correct translation file, so if you want to load that file for your un-enqueued script you’d need to establish the path through your own means.

The PHP load function basically just calls file_get_contents(). You can do that yourself and output the file contents as inline script. The script translations file is a JSON object, so you’d want to assign it to a JS var for use in your script. Since you’re working outside of the WP enqueue scheme, your script would directly access the data in your translations object var.

Untested, but I’m reasonably sure it’ll work. You still need to create a plugin or child theme to contain your PHP code, there’s no other alternative for custom code. So IMO you may as well enqueue your script and work within the WP paradigm. Enqueuing scripts and translation files work just as well from a parent or child functions.php as they would from a plugin.
Thread Starter soimagine
(@soimagine)

1 week, 6 days ago
@bcworkz, Thanks.
I Indeed enqueued my file.js which was integrated in footer.php.
I checked with wp_script_is() that is was correctly enqueued. It’s good.

Theme/functions.php
```
add_filter('locale', 'getnewlocale');
function getnewlocale($locale) {
   $gen_locale = explode('/',$_SERVER["REQUEST_URI"])[1];
   if ( !is_admin() ) {
     $locale = ($gen_locale == 'fr') ? 'fr_FR' : (($gen_locale == 'en') ? 'en_GB' : '' );
   return $locale;
}
}

add_action("after_setup_theme", function () {
   load_theme_textdomain( 'ActivUs', get_stylesheet_directory() . '/languages' );
});

function actionjs_enqueue_scripts() {
   wp_enqueue_script( 'main-action', get_template_directory_uri() . '/script/action.js', array('jquery', 'wp-i18n' ), '1.0.0', true);

}
add_action( 'wp_enqueue_scripts', 'actionjs_enqueue_scripts' );

function load_js_text_domain(){
	wp_set_script_translations( 'main-action', 'Activus', get_stylesheet_directory().'/languages');
	//var_dump(wp_script_is( 'main-action', 'enqueued' )); OK
}
add_action( 'wp_enqueue_scripts', 'load_js_text_domain', 100 );
```
But I’m always stuck because my internationalized string in my file.js are still not loaded.

The translation gettext __('string',text-domain'); is recognised correctly inside file.js (with id=”main-action”) and the default language (fr) is displayed correctly, but not for en_GB.

the strings of characters to be translated are inside the on(‘click’,…) functions in file.js.

The script to read internationalized string inside file.js
Theme/script/file.js :
```
var localeData = $('html').prop('lang');
localeData = localeData.replace('-', '_'); //return en_GB
const { __ } = wp.i18n;
const textdomain = 'text-domain';
__( '__', 'ActivUs' );
wp.i18n.setLocaleData(localeData,'text-domain');
```
Files in the “Theme/languages” folder :
```
textdomain-en_GB-main-action.json
en_GB.mo
en_GB.po
text-domain.pot
```
Example of Theme/languages/en_GB.po file:
```
#: script/file.js:969
#: script/file.js:2094
msgid "Revenir à la page précédente"
msgstr "Go back to previous page"
```
Thanks for your help
Moderator bcworkz
(@bcworkz)

1 week, 5 days ago

I’m afraid my ability to help further falls short. I had a good idea how to load translations outside of the wp-i18n scheme and had a feeling that enqueuing and doing it the WP way would be better, but I don’t know how the JS part of translations really work. I assumed if you did all the right things it would just work. It seems like you’ve done all the right things, yet it’s not working 🙁

I think you may need to call load_script_translations() yourself? I think when translations are left for the polyglots team that wp-i18n does this for you, but when you provide your own translation files you need to do this yourself? It’s similar to what happens with PHP translations. We often do not see the call in examples because the use of polyglots team translations are assumed.

Whether it’s needed or not, it wouldn’t hurt to give it a try 🙂 At worst it’s redundant and unnecessary and less performative.
Thread Starter soimagine
(@soimagine)

1 week, 5 days ago
I resolved my issue.
the problem come from the language use by the json file instantiation. The language code used is only [ISO 639] and not both of them [ISO 639]_[ISO 3166].

That means that you can’t distinguish between ‘en_US’ and ‘en_GB’. So it makes no sense to name .po and .json files with the locale (en_GB) if json use only ISO 639 to retrieve the language used.

Also I didn’t find a Cli Command to update the .json file .
The documentation define “make-json” only to create.
If I do a “make-json on exiting .json file I’m losing all the translations.

So script must be like that :
```
"locale_data": {
        "messages": {
            "": {
                "domain": "your-text-domain",
                "lang": "en", // And not "en_GB", only ISO 639
                "plural-forms": "nplurals=2; plural=(n != 1);"
            },
```

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

How to translate javascript files from theme folder without plugin ?

Topic Tags

Views