This tutorial teaches how to fully translate sites built with U-Design theme and WPML.
U-Design is a rich theme and translating it requires the full functionality of WPML. This means that you will need to have the complete Multilingual CMS package. To get started, install U-Design, WPML, WPML String Translation and WPML Translation Management.
- Quick overview
- Getting started
- Preparing the site for multilingual content
- Translating pages and posts
- Create a multilingual widgetized home page
- Translating sliders
- Translating portfolios
- Getting help
Before you get started, you should know that the following help resources are available for you:
- Comprehensive U-Design documentation is available right from your WordPress admin, by opening the U-Design Tab in the left sidebar. This gives you access to the Documentation enclosed with the theme (found in wp-content/themes/u-design/scripts/documentation/index.html), and the theme’s YouTube Tutorial Channel. In addition, to set up this tutorial we use code snippets from U-Design’s Get The Code page.
- The WPML Getting Started Guide contains clear explanations of many of the steps involved into turning an U-Design site multilingual with WPML. You’ll want to refer later to some of its subtopics, such as Theme and Plugin Localization, Menu Synchronization, and String Translation. We recommend you keep this guide open while following this tutorial.
Let’s first identify the elements that we want to translate. First, take a look at the home page and some of its elements:
In addition, certain posts such as portfolio items are defined in part through some custom fields such as portfolio_item_description which you can also translate.
This is how these elements are translated:
- Admin strings are translated from WPML->String Translation, choosing the context admin_texts_theme_u-design.
- Most of the theme strings, such as the footer text, can be translated following the instructions for theme localization, using the translations provided by the theme in its localization files (.po). You can complete the missing translations from WPML->String Translation. They are found under context theme_udesign.
- Menus can be translated using WPML->Menu Sync, though if you just use the default U-Design menus they will be automatically translated once the pages they point to are translated.
- Text Widgets can be translated also with WPML->String Translation, for example footer or sidebar widgets, under context Widgets or theme_udesign. However, if you use shortcodes in your widgets (as in the sample code provided by U-Design for their widgetized home page, you must use instead Multilingual Text Widgets instead of simple Text Widgets. This is described below in the section on building a translated widgetized home page.
- Blog posts and pages can be translated in the usual way for WPML, see Translating your content. Alternatively, you can display untranslated content on pages in secondary languages.
- Translation of sliders for U-Design is a bit non-standard, but can be done easily; see below.
- Portfolios are defined in U-Design by creating posts with a portfolio template and assigning portfolio categories to pages with a portfolio template. As such, they are translated basically in the same way as other posts and pages and post categories. However, portfolio posts also have some properties that are defined through custom fields, such as portfolio_item_description. We describe later how to translate these.
If this looks initially complex, we’ll now guide you step by step.
These are the main steps you need to follow to get started:
- Install the U-Design theme and activate it.
- Install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management), and then other WPML plugins that may depend on them.
- Set up WPML from WPML->Languages. See our WPML Getting Started Guide for complete reference, but the initial simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector. (For starters, choose at least the footer language selector, you can change this later.)
After the initial setup and activation, create a page titled ‘Blog’, and assign it the U-Design template ‘Blog Template’. Your site’s front page will then look something like this:
We will later cover how to improve the front page using U-Design’s ‘widgetized home page,’ but since this will require being familiar with WPML String Translation Module, we begin by delving a bit into it. In the process, we’ll get the whole site ready for multilingual content.
U-Design comes with its own localization files, i.e. translations of the theme texts to a number of languages. Sometimes some texts are not translated, so to complete the missing translations you need to follow the procedure for Theme and Plugin Localization from WPML Getting Started Guide. In a nutshell, go to WPML->Theme and Plugin Localization, and click on ‘Scan the theme for strings’. After doing it, you’ll see something like this:
Clicking on ‘View all the theme’s texts’ will take you to the WPML->String Translation page (also available from the WPML submenu in WordPress admin left sidebar):
WPML has loaded the translations provided by U-Design localization files for the site’s active languages, and you can edit the translations here.
Note the ‘Select strings within context’ dropdown top right of the image. By choosing other (or all) contexts you can see other strings that may need translation. In addition to the ‘theme udesign‘ context, ‘admin_texts_theme_u-design‘ is also very relevant to the theme, and unlike the former, is not translated, as it consists mostly of your site and bussiness information.
In order to begin shaping our multilingual site, let’s start by translating some posts and pages. Go to All Pages.
You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page. Go ahead and edit or add the translated page for ‘Sample Page’. In the image, we have just added some dummy translation text.
You can translate in a similar way all other pages and posts, including custom post types. After doing so with some other pages and posts, we can already see the beginnings of our Spanish site:
Note how the menus have also been translated; for this to happen, we only needed to translate the items they pointed to. For more complex menu translation and synchronization use WPML->Menu Sync, documented in Translating Menus.
(If you notice, we also translated one of the theme’s admin strings, the ‘call toll free’ at the top.)
See also the ‘translated’ sample page and blog page, where only posts in Spanish appear:
WPML also allows you to display content coming from the original language when viewing pages in other languages. If a translation exists WPML displays it, otherwise, it displays content from the original language. All other parts of the site, like menus and widgets are still displayed in the visitor’s current (second) language. This is especially useful for sites with a big amount of content, like real estate and directory sites.
Alternatively, you can duplicate specific posts when editing them, or use the WPML -> Translation Management page for batch duplicating multiple posts and pages.
Learn more about this on the page about displaying untranslated content on pages in secondary languages.
U-Design offers a number of options for building the home page. We chose the default, the ‘widgetized home page,’ which is the most flexible. In order to set it up, get this code snippet from U-Design, but rather than inserting, as per their instructions, a text widget to the ‘Home Page Before Content Sidebar’, we’ll add multiple Mulitilingual text widgets, as shown to the left, where we just pasted their code for the English version of the widget, and added some dummy translations for the Spanish version.
Note that both widgets, one per language, are included in the same sidebar. After saving both widgets, you can compare the English and Spanish home pages:
As you can see, only the widget defined for each language appears in the corresponding page.
U-Design comes with up to 7 different sliders for the front page, one of which, the Revolution Slider, is an independent plugin that can also be used as a widget in other pages.
In order to translate a Revolution Slider (if you want them to be different in each language), you must create one slider per language. For this you may want to use the ‘duplicate’ functionality so that all graphic elements, layer structure, etc. are shared between languages, then edit only that which needs translation. For example:
As you can see in the image, each slider has its own shortcode. All you need to do is to translate the shortcode from WPML->String Translation, looking for the string rev_slider_shortcode
Other sliders are defined in terms of strings associated to each slide, e.g. for Cycle 2, c2_slide_default_info_txt_1, c2_slide_button_txt_1, c2_slide_default_info_txt_2,…, where the number ending each string refers to the slide number. In order to translate them, you need to modify the wpml-config.xml file that comes with the theme. Complete instructions can be found in this U-Design support thread http://dreamthemedesign.com/u-design-support/discussion/comment/22185#Comment_22185.
Please note this is only a workaround that goes against recommended best practices, and that this file will be overwritten when you update the theme.
As said above, in U-Design portfolios are created by means of standard post and pages, specifically by: 1) creating a page with a portfolio template; 2) creating portfolio categories (which are just standard post categories); 3) creating portfolio posts (which are standard posts belonging to some of the portfolio categories); and finally, and this is the crucial part, 4) assigning a portfolio category to a portfolio page from U-Design options. In order to make this multilingual, all you need to do is to follow the standard WPML procedure for translating posts, pages, and post categories. You can make the assignment of the portfolio category to a portfolio page just in the original language and it will automatically get the translated portfolio in all languages –as long as you have translated the portfolio page and its associated portfolio posts to those languages. The only special thing to do has to do with custom fields associated to portfolio posts, fields such as portfolio_item_description or portfolio_item_link, portfolio_item_preview_title, etc. For example, in a translated Spanish portfolio post, we modified portfolio_item_description:
This is how the Spanish portfolio post is then displayed in the Spanish portfolio page:
Remember, in order to get this we first had to translate the English ‘Portfolio’ page into the Spanish ‘ES – Portfolio’ page (which will automatically carry over the portfolio template associated to the former), and the English ‘Portfolio Post 1’ post into the ‘ES – Portfolio Post 1’ post (which carries over the -translated- portfolio category associated to the former). Furthermore, we had translated before hand the portfolio category associated to the ‘Portfolio’ page from the U-Design portfolio settings.
If you need help with using WPML with U-Design theme, please head over to our technical forum.
Before posting about issues, we recommend that you review this quick checklist:
- Make sure you have the latest versions of the theme and of the WPML plugins, and that they are all activated. These include WPML Multilingual CMS, WPML String Translation and WPML Translation Management.
- The problem does not appear if the WPML plugins are deactivated, and it does appear when only the core WPML plugins are activated. In other words, try to make sure that it is an issue of compatibility of U-Design with WPML, since otherwise U-Design support is likely to be able to help you better.
When you report issues, please:
- Tell us which version you’re using for WordPress, U-Design, and WPML.
- Tell us about your site’s languages and the default language.
- Tell us which URL structure you’re using.
- List any other major plugins that you’re using, especially those that may be involved with changing URL structure.
- Tag your thread with the keyword U-Design theme. This will help route it to the correct support person.