In this tutorial, you will learn how to create a multilingual site with Stitched and WPML.

Stitched is a theme for Artisans, you can use it’s homepage introduction component to tell your visitors about yourself and you are able to extend it’s functionality by installing the recommended plugins that can be integrated with it.

Stitched & WPML
Stitched & WPML

Stitched is  developed by WooThemes, for themes and plugins developed by WooThemes we recommend you use WPML built in GUI for the translation of special features that WooThemes / Plugins use in their code, in this tutorial I will guide you for a step by step smooth way to do so.

You can see a live example in the Stitched + WPML demo site.

To run a multilingual Stitched site with WPML, you will need:

  • Stitched theme
  • A recent version of WPML, including the String Translation and Translation Management modules

Getting Started

These are the main steps you need to follow to get started:

  • Install and activate Stitched
  • Install and activate the WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management)
  • Set up WPML from WPML->Languages. See our WPML Getting Started Guide for complete reference
  • Install and activate one of the several plugins that can be integrated with Stitched, for the purpose of this tutorial we’ll use Projects

Translating the Introductory Message

The Stitched theme ‘Introductory Message’ feature is a combination of the site admin’s Gravatar image as well as the site tagline text. With WPML any text (or string as we like to call it here) that is not part of posts, pages & taxonomy is translated using the String Translation module.

The text for that is set in Settings > General

Set in WordPress admin: General-->Settings
Set in WordPress admin: General–>Settings

And now to translate you just go to WPML->String Translation and look for that string
, translate it, mark it as completed and save

String in WPML->String Transaltion
String in WPML->String Transaltion

So this is how our front-end looks now including the Gravatar image that the theme is fetching automatically according to your settings

Introducery front end look
Introducery front end look

Translating General Texts

Stitched comes with some more strings you might want to translate. You can complete any missing translations using WPML’s String Translation module as I described for the ‘Introductory Message’. If some strings are missing follow the instructions for Theme and Plugin Localization. In a nutshell, go to WPML->Theme and Plugin Localization, and click on ‘Scan the theme for strings’. Note that you can easily filter for the right strings in the context scroll down – for stitched filter to ‘theme woothemes’ and for the ‘Projects plugin’ filter for ‘plugin projects-by-woothemes’, this looks something like that:

Filtering strings by context
Filtering strings by context

Translating integrated plugins

Now that we have seen how to translate all the text coming from the theme, let’s see how do we make the strings and features coming from a Woo Plugin also translatable. For the sake of this tutorial I have chosen the very nice plugin recommended for use with Stitched – ‘Projects by WooThemes’.

After you have installed and activated ‘Projects’ you’ll be able to see in your WordPress admin a new menu called exactly this…’projects’ as here:

Projects menu opened in WordPress admin
Projects menu opened in WordPress admin

In order to make your projects and their categories translatable you use WPML settings (WPML GUI), basically what you do is you go to WPML->Translation Management like that

Translation Management
Translation Management

Choose Multilingual Content Setup from the tabs at the top

Multilingual Content Setup
Multilingual Content Setup

Before we continue just a few words of what actually is happening here in the background – Projects Plugin like many other plugins (and themes) is using Custom Post Types for it’s functionality, these are kind of ‘special’ posts, because they are special WPML does not ‘know’ that these need to be translated, so our next step here is to tell WPML exactly that – translate Projects!

Click on Custom posts, choose Translate for Projects – as you see you can also set the Projects slugs to be translatable, and just below you can translate the Custom Taxonomies related to these custom posts, in this case called ‘Project categories’, now just Save and that’s it. In the same manner you can control how the custom fields are being handled for transaltion by clicking on Custom fields translation link at the top, for Projects you can set 3 custom fields:_client, _project_image_gallery, & _url but for these I recommend you follow the next point

Stitched Custom Post Type
Stitched Custom Post Type

Let’s see how does the Projects admin page looks like, we click on ‘Projects’ in the admin screen and now – as in any ‘normal’ page or post we can duplicate, or translate any existing Project, create a new one in any language we like to, and very important – use the full functionality of the post type project – in this case we are able to add Details, Description and the special gallery it offers us, like that:

Projects Admin 1
Projects Admin 1
Projects Admin 2
Projects Admin 2


Making Custom Fields (and other things) translatable in custom post edit page
Last point here – as you have probably noticed in the last screen – you can also control how Custom fields and even Taxonomy & Post Types are handled for translation in each edit page for a Post, let’s enlarge that a bit:

Stitched custom Fields
Stitched custom Fields

Here we want the _project_image_gallery to be copied between languages, and I found the _client & _url fields to make sense left not translated – you can still change these in the translated post page but we don’t really need them translated.

Styling the language switcher

Last but not least, let’s make a small tweak to have WPML languages switcher perfectly integrated in Stitched main navigation. WPML language switcher has added classes to it that can be styled according to your needs, you can even create a whole custom language switcher if you want too. Here this is not needed,  all we want is to give the flag some padding so it ‘sits’ in place and not seem awkward

Switcher needs CSS fix
Switcher needs CSS fix

To do that  let’s go to WPML->Languages->Language switcher options->Additional CSS (optional) and add some padding to the class that controls the styling of the switcher’s flag image – img.iclflag

img.iclflag WPML CSS
img.iclflag WPML CSS

Now it looks very nice, just like any other Stitched menu item

Stitched language switcher fixed
Stitched language switcher fixed

Concluding

Stitched is a very nice theme to go Multilingual and tell the world about yourself and your projects, you can also add a shop to it using WooCommerce & WooCommerce Multilingual. We have seen how you can smoothly adjust it’s features using WPML.

Versions used

  • WordPress 3.9
  • WPML 3.1.5
  • Stitched theme 1.0.2
  • Projects plugin 1.2.0

2 Responses to “How to build a multilingual site with Stitched from Woo themes”

    • Hi Hugo, thanks for the feedback.

      I have just tested last week Projects plugin with Stitched theme and it was working with no issues. I haven’t tested with Canvas, though it should be OK.

      I’ll ask Rupashree to pass me the ticket and I’ll see if I can resolve that.

      Amit