This tutorial will guide you how to translate any Genesis Child Theme with WPML.The Genesis framework makes it easy for non-coders to create professional and user-friendly websites.
- The Genesis Framework.
- WPML Multilingual CMS: Our core module, which is always required.
- WPML String Translation plugin: To translate the interface strings such as the site’s tagline, widgets, SEO elements, and general texts in Admin screen. This add-on is available with the Multilingual CMS account type.
- WPML Add-ons:
- Translation Management: To help you manage your translation work, register new translators, and send job to translators without even leaving your WordPress dashboard.
- Media Translation: To translate your images.
- See more Add-on.
- Gravity Forms plugin to build the contact form.
- Gravity Forms Multilingual.
StudioPress always recommends using Genesis Framework with a child theme in order to protect all your customizations. We have selected Parallax Pro for demo purposes but this tutorial can be used for any Genesis child theme.
After activating Genesis, you can purchase and install WPML plugins.
Then, click Configure WPML and a 4-step installation wizard will start. You can learn how to get started with WPML’s Getting Started Guide; it will help you configure WPML in a few minutes.
You will want to refer to some of its subtopics later, such as Theme and Plugin Localization and String Translation. We recommend keeping this tutorial open while following the steps in this tutorial.
Translating the Home Page (the 5 Home Section Widget Areas)
Translating texts of the theme: Example of the Site Identity
Translating Home Section 1 Widget Area: Main Text and Call-to-Action Button
Translating Home Section 2 Widget Area: Text Widget
Translating Home Section 3 Widget Area: Genesis – Featured Page
Translating Home Section 4 Widget Area: HTML Pricing Table
Translating Home Section 5 Widget Area: Contact Form
In this section, we are going to learn how to translate a page for every child theme of Genesis. As an example, we used the three-column design from the Pro Parallax theme.
|English version (Front-end)||French version (Front-end)|
1.Go to Pages -> All Pages
2.The simplest way to translate content is by clicking on the + icon (add translation) under the French flag:
3.The page is ready to be translated to French.
Tip: Click on Copy content from English from the Language box.
4.Replace the English content with the French translation and click on update:
WPML also lets you translate a Custom Post Type in the same way as a traditional page or post.
WordPress comes with a powerful taxonomy system such as post categories, tags as well as user-defined taxonomies. WPML makes it easy to translate them:
- Navigate to WPML -> Taxonomy Translation -> Select the Taxonomy to translate:
- We have picked up “Categories”; now click on the + icon under the French Flag.
- Translate the name, slug, and description of the category to French:
You can also choose how the URLs are constructed for the different language versions of your content, including the use of subdomains, directories, or URL parameters.
WPML lets you translate both available menus with Parallax Pro: A primary menu and a secondary menu.
|English version (Front-end)||French version (Front-end)|
WPML’s menu translation lets you translate menus in two ways from the Appearance -> Menu page:
- By a manual translation
- By a synchronization of the menus between languages
In accordance with the Genesis Framework, most Genesis child themes have several featured areas. The Parallax Pro theme, which we are using as an example, consists of five featured areas. Each of them is actually a widget area, where you can display a Text widget we call “strings”.
|Home Page in English||Home Page in French|
WPML String translation lets you translate your Site Title and your Tagline.
|Site Title in English||Site Title in French|
Important: Before starting the actual translation, we need to activate a setting and scan your child theme. Scanning the theme is intended to find all the text parts belonging to your child theme. These settings allow you to translate all the hard-coded strings directly in your String Translation table.
Navigate to the WPML -> Theme and plugins localization page to choose how you want to translate your theme and plugin strings:
- Translate the theme and plugins using WPML’s String Translation – This will load the translations from the string translation table.
- Don’t use String Translation to translate the theme and plugins – This will load the translation from the .mo file that comes with the theme.
For now, we will learn how to translate your theme using String Translation.
- Go to WPML -> Theme and Plugin Localization
- Make sure that Translate the theme and plugins using WPML’s String Translation is activated; then click Save“.
- Scroll down and click the Scan the theme for strings button.
Now that your theme is scanned, you can translate your Site Title: “Welcome”.
Go to WPML -> String Translation.
1.Search for “welcome” and your string to translate should appear:
2.Click on the translations link and an empty box will be displayed with a new language.
3.Write down the translation in the requested language, mark as complete, and then save. The status will be updated to “Translation complete”:
Repeat the same steps for the tagline and simply change your search content.
|Home Section 1 (English)||Home Section 1 (French)|
The Home Section 1 Widget Area contains:
- The main text (string) of my home page: “Open yourself to the world.”
- The call-to-action button: “Start the Translation”.
How to translate “Open yourself to the world.”
- Go to WPML -> String Translation
- Search for the string to translate:
- Click on the blue translations link and a box called “French” will be displayed:
- Write down the translation, mark as complete and then save:
2.Translating your Call-to-Action buttons:
|Call-to-action Button (English)||Call-to-action (French)|
WPML String Translation lets you translate all the Parallax Pro buttons. You can translate the text for all your Call-to-Action buttons in a similar fashion:
Translating Home Section 2 Widget Area: Text Widget”>Translating the Home Section 2 Widget Area: Text Widget
|Home Section 2 (English)||Home Section 2 (French)|
Home Section 2 widget area displays a text message containing a title and some content:
To translate this part just repeat the previous steps using String Translation:
Go to WPML -> String Translations page and use the search on the top to find the “Unlimited Languages” and “WPML comes with over 40 languages” strings. Translate the strings.
|Home Section 3 (English)||Home Section 3 (French)|
This page has been built using Genesis – Featured Post widget:
Again, use String Translation to search and translate the elements of your Genesis – Featured Posts or Pages:
In order to translate the post title and content, you will need to follow the process we explain in the first part of the tutorial: Translating post and pages.
|HTML Pricing table (English)||HTML pricing table(French)|
Again, go to WPML -> String Translations to search and translate the HTML elements of your pricing plans:
|Contact Form (English)||Contact Form (French)|
The Home Section 5 widget area displays a form created with Gravity Forms:
Use our Gravity Forms Multilingual Plugin to translate your form in a few simple steps. It is fast and convenient to set-up multilingual notifications and emails for your international audience.
WPML Media Add-on simply lets you translate the caption and description for your images, sliders, and galleries. You can easily reuse the same files in content for different languages.
|Translating Images (English)||Translating Images (French)|
We offer documentation explaining the WPML media translation process in detail.
You can translate media directly from the post, or from the library itself.
It works for all the child themes of Genesis; therefore, you can apply the method for Parallax Pro.
1. Edit your post containing the media to translate:
3.The library will be open. You just have to translate the caption:
Genesis Framework comes with some powerful Search Engine Optimization settings. You can access the general SEO settings from the Genesis Menu as well as underneath each page or post. WPML lets you translate all the SEO fields such as title, meta description, canonical URLs and so on.
- Go to a post or page and populate the SEO field in English. Translate the post to French (process explained above):
- Scroll down your translated post and go to the “Theme SEO Settings” section. Fill the fields in French:
WPML allows you to translate your footer in a similar way as the Home Page; the content of the Footer is also defined through some widgets.
WPML includes a Translation Management add-on plugin, which allows site managers to determine which user needs to translate specific content. You can send translation work directly from your WordPress admin in a few easy steps: add it to your basket and send it to a third party, and you will get the translation back in a few days.
WPML support is available 6 days a week, 20 hours a day. We give native-language support in 7 different languages by experienced and dedicated supporters. Whenever you need us, we are there for you.
If you need help with building or maintaining your site, take a look at our list of WPML Contractors. They are experienced developers specialized in developing multilingual sites.