Theme translation readiness in Wordpress - Step-by-Step Execution

Concept Flow - Theme translation readiness

Start: Theme code

↓

Load text domain

↓

Wrap strings with translation functions

↓

Generate .pot file

↓

Translate .pot to .po/.mo

↓

Load translations at runtime

↓

Display translated strings

↓

End

This flow shows how a WordPress theme prepares for translation by loading text domains, wrapping strings, generating translation files, and displaying translated text.

Execution Sample

Wordpress

<?php
load_theme_textdomain('mytheme', get_template_directory() . '/languages');
echo __('Hello, world!', 'mytheme');
?>

This code loads the theme's text domain and outputs a translatable string.

Execution Table

Step	Action	Function Called	Input String	Output String	Notes
1	Load text domain	load_theme_textdomain('mytheme', get_template_directory() . '/languages')	-	Text domain 'mytheme' loaded	Makes translations available
2	Call translation function	__('Hello, world!', 'mytheme')	Hello, world!	Hello, world!	No translation file yet, so original string shown
3	Add translation file	mytheme-fr_FR.mo loaded	-	-	French translation file loaded
4	Call translation function again	__('Hello, world!', 'mytheme')	Hello, world!	Bonjour, le monde!	Translated string shown
5	End	-	-	-	Theme displays translated text if available

💡 Translation files loaded or not determines if string is translated or original

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
text_domain_loaded	false	true	true	true
current_language	default (en_US)	default (en_US)	fr_FR	fr_FR
displayed_string	''	'Hello, world!'	'Hello, world!'	'Bonjour, le monde!'

Key Moments - 3 Insights

Why does the string show in English even after wrapping with __()?

Because the translation file (.mo) for the current language is not loaded yet, so the original string is displayed as shown in execution_table step 2.

What does load_theme_textdomain() do?

It tells WordPress where to find translation files for the theme, enabling translated strings to be loaded, as seen in execution_table step 1.

How does WordPress know which string to translate?

By using the translation function __() with the exact original string and the text domain, WordPress looks up the translation in the loaded .mo files, shown in steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output string at step 2?

A Bonjour, le monde!

B Translation missing

C Hello, world!

D Error

💡 Hint

Check the Output String column at step 2 in the execution_table.

At which step does the theme load the French translation file?

A Step 3

B Step 1

C Step 4

D Step 5

💡 Hint

Look for the row mentioning '.mo loaded' in the Function Called column.

If load_theme_textdomain() was not called, what would happen to the output string?

A It would show the translated string

B It would show the original string

C It would cause a fatal error

D It would show an empty string

💡 Hint

Refer to variable_tracker for text_domain_loaded variable and execution_table step 2.

Concept Snapshot

Theme translation readiness in WordPress:
- Use load_theme_textdomain() to load translations
- Wrap strings with __() or _e() with text domain
- Generate .pot file for translators
- Translate .pot to .po/.mo files
- Load .mo files at runtime
- Display translated strings if available

Full Transcript

This visual execution shows how a WordPress theme becomes ready for translation. First, the theme loads its text domain with load_theme_textdomain(), telling WordPress where to find translation files. Then, strings in the theme are wrapped with translation functions like __() using the text domain. Initially, without translation files loaded, the original English strings display. When translation files (.mo) for another language are loaded, the same translation functions output the translated strings. Variables like text_domain_loaded and current_language track the state. Key moments include understanding why strings show untranslated initially and the role of load_theme_textdomain(). The quiz tests understanding of output strings at different steps and the effect of loading translation files.

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