Theme translation readiness in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the theme text translatable using the correct function.

Wordpress

echo [1]('Welcome to my site', 'mytheme');

Drag options to blanks, or click blank then click option'

Atranslate

Bprint

Cecho

D__

Attempts:

3 left

💡 Hint

Common Mistakes

Using echo instead of a translation function.

Using print which is not a translation function.

Using a non-existent function like translate.

The __() function returns the translated string for the given text domain.

2fill in blank

medium

Complete the code to load the theme's text domain for translation.

Wordpress

load_theme_textdomain('mytheme', [1]);

Drag options to blanks, or click blank then click option'

A__DIR__ . '/languages'

Bget_stylesheet_directory() . '/languages'

Cget_template_directory() . '/languages'

D'/wp-content/languages'

Attempts:

3 left

💡 Hint

Common Mistakes

Using __DIR__ which may not work correctly in all cases.

Using get_stylesheet_directory() which points to child theme directory.

Using a hardcoded path that may not be portable.

get_template_directory() . '/languages' points to the theme's languages folder where translation files are stored.

3fill in blank

hard

Fix the error in this translation function call to correctly escape and translate the text.

Wordpress

echo esc_html_e([1], 'mytheme');

Drag options to blanks, or click blank then click option'

A'Hello World'

BHello World

C"Hello World"

D__('Hello World')

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the text unquoted causing syntax errors.

Passing a function call inside esc_html_e which is incorrect.

Using double quotes inconsistently.

The text to translate must be a string literal, so it needs quotes like 'Hello World'.

4fill in blank

hard

Fill both blanks to create a translation-ready string with a placeholder for a dynamic value.

Wordpress

printf( [1], [2] );

Drag options to blanks, or click blank then click option'

A__('Hello %s', 'mytheme')

B'Hello %s'

C$username

Desc_html($username)

Attempts:

3 left

💡 Hint

Common Mistakes

Not translating the string before printing.

Not escaping the dynamic value which can cause security issues.

Using raw variables without quotes or escaping.

Use __() to translate the string with a placeholder, and escape the dynamic value with esc_html() for safety.

5fill in blank

hard

Fill all three blanks to register a theme text domain and load translation files correctly.

Wordpress

function mytheme_setup() {
  load_theme_textdomain([1], [2] . [3]);
}
add_action('after_setup_theme', 'mytheme_setup');

Drag options to blanks, or click blank then click option'

A'mytheme'

Bget_template_directory()

C'/languages/'

D'mytheme-textdomain'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect text domain names.

Not concatenating the path properly.

Using child theme directory instead of template directory.

The text domain is 'mytheme', the path is built by joining the template directory and the 'languages' folder.

Practice

1. Which function is used to make a string translatable in a WordPress theme without immediately displaying it?

easy

A. translate_text()

B. _e()

C. load_theme_textdomain()

D. __()

Solution

1. Step 1: Understand translation functions

   __() returns the translated string without printing it, while _e() echoes it immediately.

2. Step 2: Identify the function that returns the string

   Since the question asks for making a string translatable without displaying it, __() is the correct choice.

3. Final Answer:

   __() -> Option D

4. Quick Check:

   Return translatable string = __() [OK]

Hint: Use __() to get translated text without printing [OK]

Common Mistakes:

• Confusing _e() with __()
• Thinking load_theme_textdomain() translates strings
• Using non-existent translate_text() function

2. Which hook is the recommended place to call load_theme_textdomain() in a WordPress theme?

easy

A. init

B. after_setup_theme

C. wp_enqueue_scripts

D. template_redirect

Solution

1. Step 1: Identify when to load text domain

   The load_theme_textdomain() function should be called early enough to load translations before theme output.

2. Step 2: Recognize the correct hook

   after_setup_theme is the recommended hook for theme setup tasks including loading text domain.

3. Final Answer:

   after_setup_theme -> Option B

4. Quick Check:

   Load text domain on after_setup_theme hook [OK]

Hint: Use after_setup_theme hook to load translations [OK]

Common Mistakes:

• Using init hook which is too late
• Calling load_theme_textdomain() outside any hook
• Confusing with wp_enqueue_scripts hook

3. Given this code snippet in a theme's functions.php:

add_action('after_setup_theme', function() {
  load_theme_textdomain('mytheme', get_template_directory() . '/languages');
});

echo __('Welcome', 'mytheme');

What will be the output if the translation file for 'mytheme' contains a Spanish translation for 'Welcome' as 'Bienvenido'?

medium

A. Bienvenido

B. Welcome

C. mytheme: Welcome

D. Error: Text domain not loaded

Solution

1. Step 1: Confirm text domain loading

   The code loads the text domain 'mytheme' from the /languages folder on after_setup_theme hook.

2. Step 2: Check translation output

   The __() function uses 'mytheme' text domain to translate 'Welcome'. Since Spanish translation exists, it outputs 'Bienvenido'.

3. Final Answer:

   Bienvenido -> Option A

4. Quick Check:

   Loaded text domain translates 'Welcome' to 'Bienvenido' [OK]

Hint: If translation file exists, __() returns translated text [OK]

Common Mistakes:

• Assuming original text prints without translation
• Forgetting to load text domain before translation
• Mixing up _e() and __() output

4. Identify the error in this code snippet for making theme text translatable:

function mytheme_setup() {
  load_theme_textdomain('mytheme', get_template_directory() . '/languages');
}
add_action('init', 'mytheme_setup');

echo __('Hello World', 'mytheme');

medium

A. Using 'init' hook instead of 'after_setup_theme' for loading text domain

B. Missing text domain parameter in __('Hello World')

C. Incorrect path to languages folder

D. Using echo instead of _e() for translation

Solution

1. Step 1: Check hook used for loading text domain

   The code uses 'init' hook, which is too late for loading theme translations properly.

2. Step 2: Identify recommended hook

   The recommended hook is 'after_setup_theme' to ensure translations load early in theme setup.

3. Final Answer:

   Using 'init' hook instead of 'after_setup_theme' for loading text domain -> Option A

4. Quick Check:

   Load text domain on after_setup_theme, not init [OK]

Hint: Load text domain on after_setup_theme hook, not init [OK]

Common Mistakes:

• Using init hook for load_theme_textdomain
• Forgetting to add text domain in translation functions
• Confusing echo and _e() usage

5. You want to make your WordPress theme fully translation-ready. Which combination of steps is correct? A) Wrap all user-facing strings with _e() or __(), load text domain in after_setup_theme, and place translation files in /languages folder. B) Use _e() only, load text domain in init hook, and place translation files in theme root. C) Wrap strings with __(), load text domain in wp_loaded hook, and place translation files in /lang folder. D) Use _e() and __() without loading text domain, place translation files anywhere.

hard

A. Wrap strings with __(), load text domain on wp_loaded, store files in /lang

B. Use _e() only, load text domain on init, store files in theme root

C. Wrap strings with _e() or __(), load text domain on after_setup_theme, store files in /languages

D. Use _e() and __() without loading text domain, store files anywhere

Solution

1. Step 1: Identify correct translation function usage

   Both _e() and __() should be used to wrap user-facing strings for translation.

2. Step 2: Confirm proper hook and folder for translations

   Text domain must be loaded on after_setup_theme hook, and translation files should be stored in a /languages folder inside the theme.

3. Final Answer:

   Wrap strings with _e() or __(), load text domain on after_setup_theme, store files in /languages -> Option C

4. Quick Check:

   Correct functions + hook + folder = Wrap strings with _e() or __(), load text domain on after_setup_theme, store files in /languages [OK]

Hint: Use _e()/__(), after_setup_theme hook, and /languages folder [OK]

Common Mistakes:

• Loading text domain too late or not at all
• Placing translation files outside /languages folder
• Using only one translation function incorrectly