Custom WordPress Theme Translation with Poedit

There are a lot tutorials on this but here at Linkstraffic we like to add our personal touch to a guide and today we are dealing about translating strings through WordPress theme pages.

Let’s assume you have a form like the following inside the front page of your custom made theme :


<form name="form" method="post" action="/member-access" class="form">

<fieldset>
<legend>Subscribe now</legend>

<label for="gender" class="select">Gender<span class="req">*</span></label>

<div class="div_select"><select name="gender" id="gender" class="dropdown">
<option value="man">a man</option><option value="woman">a woman</option></select></div>


<div class="button_div">
<input name="submit" type="submit" value="Save" class="buttons" /></div>


<div class="req-text"><span class="req">*</span> required field</div>

</div>
</fieldset>

</form>

There are only a few strings but for the sake of clarity of this simple tutorial, that’s all we need.

As you can see with the form, the strings are in english and for now WordPress does not know about the language in use in the file.

This form is located inside the following file :

/wp-content/themes/myowntheme/front-page.php

 

Poedit

If you don’t have poedit software on your computer, then download it right away :

# apt-get install poedit

on linux or :

 

https://poedit.net/download

on other systems.

Preparation

Beforehand we should prepare the file for translation and this is achieved by adding the strings into a code like this :

<?php _e('String to translate', 'myowntheme');?>

See the form now with the modification :


<form name="form" method="post" action="/member-access" class="form">

<fieldset>
<legend>Subscribe now</legend>

<label for="gender" class="select">Gender<span class="req">*</span></label>

<div class="div_select"><select name="gender" id="gender" class="dropdown">
<option value="man">a man</option><option value="woman">a woman</option></select></div>


<div class="button_div">
<input name="submit" type="submit" value="Save" class="buttons" /></div>


<div class="req-text"><span class="req">*</span> required field</div>

</div>
</fieldset>

</form>

Now upload your updated file, no changes made ! Of course, the default language is written inside the parenthesis so that does not affect the results.

Poedit

It’s time to configure Poedit to fetch the strings to translate inside your theme directory. We need to create a new catalog in Poedit

First open up the Catalog Manager and Add a new one by browsing inside your theme directory. Then Go to under the File Menu and click New.

Now open the Catalog properties via the menu.

Important note : the project and version name should reflect your theme name, the source code charset should  also be filled.

 

French is the default one for this project, so don’t worry, just input your default language, team name, email and a name for this project.

Before going to the Sources paths and Sources keywords, click on OK and save the project to a languages directory within your theme, name the file like this :

themename/languages/themename.pot

If if doesn’t exist, create it.

Get back to the Catalog properties and fill in details about the files/folders you wish to update the strings from :

Now close, save and update.

You should see the strings to be translated inside the top box. All you need to do is :

  1. Create a new file

  • Save it to your theme languages’ directory (ie : en.po for english)
  • Load the strings from the existing pot file.
  • Translate the strings
  • Save the file
  • Verify that you have .mo extensions generated and upload those files to your server inside the languages directory of your theme.

Do not forget to add this function call to your functions.php page :

function my_theme_setup(){
$result = load_theme_textdomain( 'yourthemename', get_template_directory() . '/languages' );

/* DEBUGING :

if ( $result )
return;
$locale = apply_filters( 'theme_locale', get_locale(), 'my_theme' );
die( "Could not find $path/$locale.mo." );
*/

}

add_action( 'after_setup_theme', 'my_theme_setup' );

The above call will load the corresponding language based on the local.

NOTE : for english, name you file as follow : en_US.mo

 

Now you are fully ready to translate your themes, have fun.

 

Further readings :

https://codex.wordpress.org/I18n_for_WordPress_Developers

https://codex.wordpress.org/Function_Reference/load_theme_textdomain

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: