Translation – Making Your Theme Speak All the Languages! 🌍🗣️

Why Translation? 🌐

Think about it: WordPress powers millions of websites globally. If your theme is limited to just one language, you’re cutting off a huge potential user base. By internationalizing (i18n), we can make your theme easily translatable into any language.

But don’t worry, you don’t need to learn a bunch of new languages (unless you want to show off your skills 😎). WordPress handles the translation for you—you just need to make your theme translatable.

Step 1: Let WordPress Know Your Theme Supports Translations 🗣️

First things first, let’s inform WordPress that your theme is translation-ready. Open your functions.php file and add this function:

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

What did we just do? 👇

• load_theme_textdomain(): This tells WordPress where to find the translation files for your theme (we’ll create those files soon, don’t worry!). The 'mynoobtheme' is the text domain—basically, a unique identifier for your theme's translations.
• get_template_directory() . '/languages': This is the folder where your translation files will live. (Spoiler: we’re going to create the /languages/ folder in your theme soon.)

Step 2: Wrapping Theme Text for Translation 📜

Now, the fun part! Let’s go through your theme files and wrap all the text in WordPress-friendly functions to make it translatable.

For example, any text you’ve hardcoded in your theme like this:

<h1>Welcome to My Awesome Site!</h1>

Needs to be wrapped in a special function so it can be translated, like this:

<h1><?php _e('Welcome to My Awesome Site!', 'mynoobtheme'); ?></h1>

What’s happening here? 🤓

• _e(): This function echoes the translated text if a translation exists. If there’s no translation, it’ll just output the default text.
• 'Welcome to My Awesome Site!': This is the original text in English.
• 'mynoobtheme': This is the text domain we defined earlier.

You can also use another function called __() if you want to return the translated text instead of echoing it:

$title = __('Welcome to My Awesome Site!', 'mynoobtheme');

Step 3: Translating Strings with printf() 🎤

Sometimes, you’ll want to insert dynamic content into your translatable text. For instance, if you’re displaying a message like this:

<p>Hello, John! Welcome back!</p>

To make this translatable, you can use printf() like this:

<p><?php printf(__('Hello, %s! Welcome back!', 'mynoobtheme'), $username); ?></p>

The %s acts as a placeholder for the dynamic content ($username in this case), which gets inserted into the string. WordPress will handle the translation of the rest of the sentence, keeping everything in order!

Step 4: Plural Forms – When One Isn't Enough 🤯

Let’s say you want to display a message like this:

• “You have 1 new message.” or
• “You have 5 new messages.”

Obviously, the plural form needs to change depending on the number of messages. To handle plural forms in a translatable way, we use the ngettext() function like this:

<?php
$message_count = 5;
printf(_n('You have %s new message.', 'You have %s new messages.', $message_count, 'mynoobtheme'), $message_count);
?>

Here’s how it works:

• _n(): The function for handling plural forms.
• The first string is the singular form (You have 1 new message.), and the second string is the plural form (You have 5 new messages.).
• $message_count: This is the number that determines whether to use the singular or plural form.

Step 5: Creating Translation Files – The .pot Magic 🧙‍♂️

Now that we’ve wrapped all our text in translation functions, it’s time to generate a .pot (Portable Object Template) file. This file contains all the translatable strings from your theme, and translators can use it to create translation files for different languages.

Step 5.1: Generate a .pot File

To generate the .pot file, you can use a tool like Poedit or a plugin like Loco Translate. Here’s how you can do it with Poedit:

1. Download and install Poedit.
2. Open Poedit and select Create New Translation.
3. Choose Extract from sources and point it to your theme folder.
4. Poedit will scan your theme files for any translatable strings wrapped in __(''), _e(), and other i18n functions.
5. Save the generated .pot file inside your theme’s languages/ directory.

Step 5.2: Translating Strings

Now that we have our .pot file, translators can use it to create .po and .mo files for different languages. Here’s a breakdown:

• .pot: The template file that contains all your theme’s original strings.
• .po: The translation file (Portable Object) where translators map your original strings to their language.
• .mo: A compiled version of the .po file that WordPress uses to display the translated text.

Step 6: Loading Translations on the Frontend 🌐

Once the translation files are ready, WordPress will automatically load them based on the user’s language settings. If someone is using WordPress in French, and you have a French translation available, WordPress will show your theme in French!

To test this, you can:

1. Go to Settings > General in the WordPress dashboard.
2. Change the Site Language to a different language (like French).
3. Watch as your theme magically speaks another language! 🌟

Up Next: Adding Widgets and Sidebars – Because Themes Need Space for Cool Stuff! 🧱🎉

Now that your theme speaks all the languages, let’s spice it up with Widgets and Sidebars in the next chapter! Get ready to add customizable areas for users to drag and drop all sorts of cool stuff into their site.