Go to athemes.com

Multilingual website with Botiga and WPML

Both Botiga and Botiga Pro are fully translatable and can be used to create a multilingual website easily.

This article will cover creating such a website using the popular WPML plugin.

Getting started

First of all, you need to install all plugins required by WPML. To get your copies, you must visit the WPML website’s Downloads section, located here.

You will download the following plugins to your computer:

  • WPML Multilingual CMS – this is the core plugin;
  • String translation;
  • Media translation.

Now that you have all three zip files on your computer, you need to upload them to your website and install & activate them. In order to do that, go to the backend of your website and follow these steps:

  • Go to Plugins > Add New, click on Upload plugin;
  • Select one of the zip files you have downloaded previously;
  • Install & activate the plugin;
  • Repeat for all three zip files.

Please note: if you don’t receive zip files when you download from the WPML website, make sure your browser’s automatic unzipping feature is disabled.

WPML’s setup wizard

Once you have activated the main WPML plugin (on the first activation), you will be presented with the option to follow the setup wizard. We recommend you follow this wizard so you can easily set up essential aspects for WPML, like languages, translation mode, license, etc.

Here are the steps you will go through while using the wizard:

  1. Define your site’s languages

    Choose the default language (English in the screenshot above) and then pick as many translation languages as you need by clicking on the plus icon. Keep in mind that the default language will be used for the content you already have on your website.
  2. Everything related to URLs for your different languages will be configured in this step.
  3. On the Register WPML screen, you just have to add your key for the current site.
    If you already have a key, you can just paste it in the Site key field. If not, you can click on the Get a key for this site link and you will be taken to the WPML website, where you can register the website you are working on and receive a key for it, then just go back to your website and paste this key.
    You can also purchase a new subscription for WPML, if you don’t already have a valid one.
  4. The Translation screen will help you decide the manner in which you will translate your website. There are two translation modes to choose from: Translate Everything (which automatically creates translations for all your content) and Translate Some (this lets you choose the content you want to translate).

    Notice in the screenshot above how if you select Translate Some, a new set of options will show up, asking you to decide how will be doing the translation of your website. You can do it yourself, with the help of other users, via a professional service or you can even assign a Translation Manager who will decide on this.
  5. As you’ve probably seen in other plugins as well, in the Support screen you will be asked to give your consent to share relevant support (like the theme in use, plugins, etc) information with WPML.
  6. You’ve now reached the Plugins screen, where WPML will detect popular plugins and suggest components for them.
  7. This is the final step, now everything is configured and you can start your translation work.

How to translate your content

If you’ve activated Translate Everything, then everything will be automatically translated for you.

If you have chosen Translate Some and decided you will handle translations yourself, please continue to read on.

Translating posts, pages or custom post types basically means having different versions of that page for each language. Go to the post type you want to start translating. You will notice in the following screenshot that I’m translating pages and adding translations for the French, German and Spanish languages.

Simply click on the plus icon for the page and language you’re interested in to start translating. This will open up WPML’s Advanced Translation Editor, an easy-to-use tool that will help you translate your pages with ease. See the following screenshot to see the Advanced Translation Editor in action.

Translate all the text, including the post’s title, and click on the green Complete button once you’re done. Remember that you have to translate everything to complete the translation. Of course, you don’t have to do it all at once.

Once a translation for a specific language is completed, that specific language will be represented by a pencil, instead of the plus icon, to suggest that a translation is available and you can edit it if you need to.

Do the same for all posts, pages or custom post types that require manual translation.

Media translation

First of all, make sure you have activated the Media Translation addon, as mentioned at the beginning of this article.

From your site’s backend, please go to WPML > Media Translation. Before that, you’ll be required to complete the setup wizard for media, a process that identifies images on your website and populates the Media Translation interface.

You can have different images for different languages and you can use the Advanced Translation Editor to translate captions, alt text, or image titles. Read more about translating media on the official WPML website.

Translating menus

If you have chosen Translate Everything, then your menus will be automatically translated. If you have chosen Translate Some, you must do a manual translation.

To do a manual translation of your menu, please go to Appearance > Menus. Click on the plus icon for the language you want to create a menu for that specific language. Give it a name and start adding menu items that are relevant to the specific language you’re building the menu for. You can repeat this easy process for each of your languages.

Extensive information on translating menus can be found here.

Translating strings using WPML String Translation

First of all, make sure you have activated the String Translation addon, as mentioned at the beginning of this article.

This addon lets you translate various strings that are not part of your posts or pages. This essentially means items like your site’s tagline or various strings that come from the theme, or even from other plugins.

Simply navigate to WPML > String translation and start translating your strings.

Make sure you repeat the process for each language that you’re using on your website.

Language switcher

For a complete multilingual website, you need a language switcher. Besides using WPML’s default options for adding a language switcher, you can also take advantage of Botiga Pro’s header builder language switcher components.

Make sure the Header & Footer Builder module is active from Appearance > Theme Dashboard, go to Customize > Header > Header Builder and insert the Language Switcher component in your desired header area.