1

Short description:

I try to translate strings in JS file. To test it I decided to create a simple test plugin. I have PHP and JS strings there. Translated PHP strings work fine, JS strings don't work.

Tools and environment:

  • WP-CLI 2.4.0
  • Wordpress 5.5.1
  • Ubuntu 20.04
  • Original languange: English (United States)
  • Translate language: German

Plugin PHP file content:

<?php

/*
 * Plugin Name: Test
 * Text Domain: test
 * Domain Path: /languages
 */

/**
 * Init all
 */
function run()
{
    wp_register_script(
        'script',
        plugins_url('script.js', __FILE__),
        array('wp-i18n'),
        false,
        true
    );
    wp_enqueue_script('script');

    wp_set_script_translations('script', 'test',  dirname(plugin_basename(__FILE__)) . '/languages/');
    load_plugin_textdomain('test', false, dirname(plugin_basename(__FILE__)) . '/languages/');
}
add_action('init', 'run');

/**
 * Register a custom menu page.
 */
function register_my_custom_menu_page()
{
    add_menu_page(
        'Custom Menu Title',
        __('Custom Menu', 'test'),
        'manage_options',
        'my_custom',
        'callback'
    );
}
add_action('admin_menu', 'register_my_custom_menu_page');

/**
 * Display a custom menu page
 */
function callback()
{
    esc_html_e('Admin Page', 'test'); ?>
    <h1 id="h1"></h1>
<?php }

Plugin JS file content:

const { __ } = wp.i18n;

alert(__('js-alert', 'test'));

console.log(__('js-log', 'test'));

div = document.getElementById('h1');
div.innerHTML += __('js-html', 'test');

Procedure for creating translation files:

  1. Creating POT file with wp i18n make-pot . languages/test.pot
  2. Creating PO file with cp languages/test.pot languages/test-de_DE.po
  3. Filling msgstr strings in test-de_DE.po
  4. Adding line "Language: de_DE\n" to test-de_DE.po
  5. Creating MO file with msgfmt languages/test-de_DE.po -o languages/test-de_DE.mo
  6. Creating JSON file with wp i18n make-json languages/test-de_DE.po --no-purge --pretty-print

Language files structure after performing the steps above:

wp-content/plugins/test/languages/test-de_DE-9a9569e9d73f33740eada95275da7f30.json
wp-content/plugins/test/languages/test-de_DE.mo
wp-content/plugins/test/languages/test-de_DE.po
wp-content/plugins/test/languages/test.pot

The content of test-de_DE.po that was used to create the MO and JSON

# Copyright (C) 2020
# This file is distributed under the same license as the Test plugin.
msgid ""
msgstr ""
"Project-Id-Version: Test\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/test\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: de_DE\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2020-10-28T10:43:41+01:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.4.0\n"
"X-Domain: test\n"

#. Plugin Name of the plugin
msgid "Test"
msgstr "Test DE"

#: test.php:35
msgid "Custom Menu"
msgstr "Custom Menu DE"

#: test.php:48
msgid "Admin Page"
msgstr "Admin Page DE"

#: script.js:3
msgid "js-alert"
msgstr "js-alert-de"

#: script.js:5
msgid "js-log"
msgstr "js-log-de"

#: script.js:8
msgid "js-html"
msgstr "js-html-de"

Result on my test website:

enter image description here

Additional context:

  • wp_set_script_translations returns true all the time
  • load_plugin_textdomain returns true all the time
  • i know i can use wp_localize_script() but i would like to do it entirely with wp.i18n

Plugin files structure:

/test
  /languages
    test-de_DE-9a9569e9d73f33740eada95275da7f30.json
    test-de_DE.mo
    test-de_DE.po
    test.pot
  scripts.js
  test.php
2

I have no words 🤦‍♂️

A simple change

  • dirname(plugin_basename(__FILE__)) . '/languages/' inside wp_set_script_translations() function (3rd argument)

to

  • plugin_dir_path(__FILE__) . 'languages/'

fixed the problem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.