genesis-and-wpml
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.

What you will need (required plugins)

  • 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 screens.

What you may need (optional plugins)

  • 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.

Essential Resources

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.

The Parallax Pro documentation provides you with all the information needed to import the demo content. There is also an excellent collection of tutorials and resources on StudioPress FM.

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.

Contents of this tutorial

Translating post and pages
Translating custom Post types and custom taxonomies
Translating the slug of your URLs
Translating the navigation menus

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

Translating images
Translating the Footer
Sending your content to professional translation
Getting Help: Our support

 

Translating Post and Pages

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)
 English Post  Post in French

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:

Translating Post and Page

3.The page is ready to be translated to French.
Tip: Click on Copy content from English from the Language box.

Genesis and WPML translation

4.Replace the English content with the French translation and click on update:

Translating Post and Page

 

Translating Custom Post Type and Taxonomy

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:

  1. Navigate to WPML -> Taxonomy Translation -> Select the Taxonomy to translate:

taxonomy-1

  1. We have picked up “Categories”; now click on the + icon under the French Flag.

taxonomy-2

  1. Translate the name, slug, and description of the category to French:

taxonomy-3

Translating the slug of your URL’s

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.

Translating Navigation Menus

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)
 menu-en  menu-fr

WPML’s menu translation lets you translate menus in two ways from the Appearance -> Menu page:

  1. By a manual translation
  1. By a synchronization of the menus between languages

Translating Genesis Home Page

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
en  homepage

 

Translating texts of the theme: Example of the Site Identity

WPML String translation lets you translate your Site Title and your Tagline.

Site Title in English Site Title in French
 tagline-en  tagline-fr

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.

  1. Go to WPML -> Theme and Plugin Localization
  2. Make sure that Translate the theme and plugins using WPML’s String Translation is activated; then click Save“.Selecting Options
  3. Scroll down and click the Scan the theme for strings button.

ST-scan-the-theme

 

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:

st-welcome

2.Click on the translations link and an empty box will be displayed with a new language.

st-welcome-2

3.Write down the translation in the requested language, mark as complete, and then save. The status will be updated to “Translation complete”:

translate-the-string

Repeat the same steps for the tagline and simply change your search content.

 

Translating the Home Section 1 Widget Area: the main text and the call-to-action button

Home Section 1 (English) Home Section 1 (French)
 home-section-1-en  home-section-1-fr

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:

st-section1

  • Click on the blue translations link and a box called “French” will be displayed:

st-section-1-2

  • Write down the translation, mark as complete and then save:

Genesis WPML string translation

2.Translating your Call-to-Action buttons:

Call-to-action Button (English) Call-to-action (French)
 cta-en  cta-fr

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:

cta-backend

 

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-en  home-section-2-fr

Home Section 2 widget area displays a text message containing a title and some content:

home-section-2-back-end

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.

st-home-section-2

 

Home Section 3 (English) Home Section 3  (French)
 homesection3-en
 home-section-3-fr

This page has been built using Genesis – Featured Post widget:

home-section-3-backend

Again, use String Translation to search and translate the elements of your Genesis – Featured Posts or Pages:

home-section-3-st

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.

Translating the Home Section 4 Widget Area: HTML Pricing Table

 

HTML Pricing table (English) HTML pricing table(French)
 pricing-table-en
pricing-table

Again, go to WPML -> String Translations to search and translate the HTML elements of your pricing plans:

pricing-table-backend

 

Translating the Home Section 5 Widget Area: Contact

 

Contact Form (English) Contact Form (French)
 contact-en
contact-fr

The Home Section 5 widget area displays a form created with Gravity Forms:

contact-back-end

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.

Translating images

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)
 media-eng
media-fr

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:

2. A new post will be displayed. Translate the text to French and click on the image. Then select the pencil icon to translate the caption of the image.translate Genesis images with WPML

3.The library will be open. You just have to translate the caption:

translate Genesis images with WPML4.Your caption is translated in only 2 steps:

translate Genesis images with WPML

Translating the Genesis SEO settings

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):

seo genesis wpml

  • Scroll down your translated post and go to the “Theme SEO Settings” section. Fill the fields in French:

seo genesis wpml

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.

Sending your content to professional translation (if needed)

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.

Getting help: our support

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.