Theme translation readiness in Wordpress - Mini Project: Build & Apply

Theme Translation Readiness in WordPress

📖 Scenario: You are building a WordPress theme that will be used by people all over the world. To make sure everyone can read your theme in their own language, you need to prepare your theme for translation.This means marking text in your theme so WordPress can find it and translate it easily.

🎯 Goal: You will create a simple WordPress theme file and make it ready for translation by using the correct WordPress functions and setup.

📋 What You'll Learn

Create a theme text domain variable

Load the theme text domain for translations

Use translation functions for all visible text

Add a language folder for translation files

💡 Why This Matters

🌍 Real World

Themes used worldwide need to be translated so users can read them in their own language.

💼 Career

Knowing how to make themes translation-ready is essential for WordPress theme developers working with international clients or marketplaces.

1

Create the theme text domain variable

Create a variable called $theme_text_domain and set it to the string 'mytheme'.

Wordpress

# Your code here

Hint

The text domain is a unique identifier for your theme's translations. It is usually your theme's folder name.

2

Load the theme text domain

Add code to load the theme text domain using load_theme_textdomain with the variable $theme_text_domain and the path get_template_directory() . '/languages' inside a function called mytheme_setup hooked to after_setup_theme.

Wordpress

<?php
$theme_text_domain = 'mytheme';
// Your code here

Hint

This code tells WordPress where to find your translation files so it can use them.

3

Use translation functions for visible text

In your theme's header.php file, write a line that outputs the site title using echo and the translation function __() with the text 'Welcome to My Theme' and the text domain variable $theme_text_domain.

Wordpress

<?php
$theme_text_domain = 'mytheme';

function mytheme_setup() {
    global $theme_text_domain;
    load_theme_textdomain($theme_text_domain, get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'mytheme_setup');

// header.php content
// Your code here

Hint

The __() function marks text for translation and returns the translated string.

4

Add the languages folder for translation files

Add a comment line that says // Create a folder named 'languages' in your theme directory to store .mo and .po files to remind where translation files go.

Wordpress

<?php
$theme_text_domain = 'mytheme';

function mytheme_setup() {
    global $theme_text_domain;
    load_theme_textdomain($theme_text_domain, get_template_directory() . '/languages');
}
add_action('after_setup_theme', 'mytheme_setup');

// header.php content

echo __('Welcome to My Theme', $theme_text_domain);

// Your code here

Hint

This folder is where translators put the files that contain the translated text.

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