All Elegantthemes themes are built on the same code framework and are compatible with WPML. We’ve chosen Foxy, which is one of the most popular themes by Elegantthemes, to show you how to use it with WPML.

Additional documentation:

Overview

Let’s start with an overview of the different elements in need of translation in a site developed with the Foxy theme. Here is the top part of the home page:

Foxy home page, top

Foxy home page, top

  1. We use a standard WP menu for this tutorial, created from Appearance->Menus. In this menu, Blog and Featured are Post Categories, Portfolio is a page with a custom portfolio template (that retrieves posts with the Portfolio post category), and Home and Testimonials are custom links to, respectively, the home page, and the archive for the custom post type Testimonials. To translate the menu, you first need to translate all items (posts, pages and categories) that the menu entries point to, and then use WPML->WP Menus Sync to automatically translate the menu. This will create a translated menu with the corresponding translated items. You then need to complete the translated menu by adding to it the missing custom links from Appearance->Settings.
  2. To translate the slider, all you need to do is to ensure that the posts it displays are translated before hand, with their translated category. The slider gets its posts from a post category that you set in Foxy Theme Options, and WPML will automatically retrieve the posts from the translated category when viewing the site in another language.
  3. The pages displayed in the home layout are defined in Foxy Theme Options as well. Again, WPML will retrieve the translated pages when viewing the site in another language, provided you have translated the pages first.

Here is the bottom part of the home page:

Foxy home page, bottom

Foxy home page, bottom


Here, the ‘admin strings’, which are defined in Foxy Theme Options, can be translated using WPML->String Translation under context admin_texts_theme_Foxy, and custom posts such as Testimonials just as any other post (more details on both topics below).

Finally, let us look at the archive page for this custom post type:

Custom post type archive

Custom post type archive


Besides the title and content of the custom posts, we also find some additional strings: the name of the custom post type as title of the archive page, and other strings (‘Read more’) that may belong to either WordPress or the theme’s text. All of these are also translated through string translation. For WordPress and theme strings, you should first follow the procedure for WPML->Theme and Plugin Localization

For this tutorial, we followed these procedures to create a bilingual English-German site, and this is the end result in German (with apologies for using Google Translate):

Translated Foxy home page, top

Translated Foxy home page, top

Translated Foxy home page, bottom


Translated Foxy home page, bottom


Translated Foxy custom post type archive

Translated Foxy custom post type archive

Foxy porfolio page

Foxy porfolio page

Translated Foxy portfolio page


Translated Foxy portfolio page

The images also show the translation of the portfolio page. As said above, this is a (possibly empty) page with the Portfolio template, which makes it display posts from the Portfolio category. All we needed to do to obtain the image was: a) translate the page to German, which automatically assigns it the same template (we actually duplicated rather than translated it, and changed the title in the duplicate); b) translate the posts in the Portfolio category.

Translating posts, pages, and post categories

Post, pages, and post categories can be translated using the standard WPML procedures. For categories, just follow the procedure described in Translating post categories and custom taxonomies. For posts and pages, including posts of a custom type such as Testimonials, WPML provides many ways to handle translation, see Translating your contents. Here we just illustrate how a post is translated manually. After using any of WPML’s translation controls to add or edit a translation (respectively, a ‘+’ or pencil icon, available from both ‘All Posts’ and the single post edit-page) or to duplicate it (available from the single post edit-page) you open a standard edit-post page for the translated post, that you can edit at will:

Translating posts in the Foxy theme

Translating posts in the Foxy theme

The important thing to remember here is that a translated post is just an independent WordPress post, but for which WPML records the ‘is-translation-of’ relationship, as shown in the top right box in the image. Also, note that if you have translated post categories before hand, the new translated post will automatically get assigned the translated categories corresponding to the categories of the original post.

Translated post categories

Translated post categories

This the reason why we didn’t need to do anything special besides translating the posts to get the slider or the portfolio page display in the right language, as they both draw their posts from specific post categories.

Translating other strings

Admin strings

Some strings defined in Foxy Theme Settings, such as the Callout text and button text, are translated from WPML->String Translation:

Translating admin strings in the Foxy theme

Translating admin strings in the Foxy theme

Custom post types strings

To ensure that the archive page is displayed correctly, you need to provide translations for its singular and plural names:

Translatin the custom post type name

Translating the custom post type name

WordPress strings, Foxy theme strings, and Text Widgets

Finally, for other strings such as ‘Read more’, ‘Write a comment’, ‘Post Tagged’, etc. you have to follow, as said, the procedure for WPML->Theme and Plugin Localization, including getting the needed WordPress and Foxy localization files. This will load the translations found in the localization files, and register all strings including the untranslated ones, so that you can complete the missing translations from String Translation. Look in particular for strings under context theme Foxy. For text widgets and widget titles, look for context Widget.

Shortcodes

Foxy and other Elegantthemes come with an assorted array of shortcodes to style your pages and posts. You can translate them just as any other part of the post, simply editing the textual content inside the shortcode in the translated post. For example, if a page contains the shortcode [button link="http://www.example.com/samplepage" ]Button Text [/button], you simply change it in the translated page to, say, [button link="http://www.example.com/de/mytranslatedpage" ]Translated Button Text [/button]. Similarly with all other shortcodes, such as those for page tabs or sliders.

Known limitations

There are a few things that cannot currently be translated, e.g the logo and some of Foxy’s custom widgets such as the Advertisement Widget, in case you wanted to customize logo or ads per language. Shortcodes in Text Widgets will only be translatable in an upcoming release of WPML. And slug translation for the custom post type Testimonial does not work well, at least with some permalink settings.