Follow this tutorial to learn how to create multilingual WordPress sites using the Avada theme and WPML. Avada is a highly responsive theme with a modern and clean design with many features such as premium sliders, unlimited colors, advanced theme options, and much more! If you have chosen Avada as your site’s theme, this tutorial teaches you how to turn it into a multilingual site with WPML.
What you will need
- The Avada theme (version 5.0.3 or above), also available at Theme Forest.
- A recent version of WPML (version 3.7 or above), including the String Translation, Translation Management and Media translation add-ons.
- WPML’s Getting Started Guide helps you to set up WPML in a few minutes. Later you may want to refer to some of its subtopics, such as Theme and Plugin Localization and String Translation. We recommend that you keep this guide open while following this tutorial.
- Avada’s documentation will provide you with all the information needed to set it up. You can also find an excellent collection of tutorials and step-by-step videos on Avada’s YouTube channel.
- Getting started
- Translating pages built using the Fusion Builder
- Translating Avada Demo Pages
- Updating a page and its translation
- Translating other pages, posts, custom post types and taxonomies
- Translating Fusion Sliders
- Translating Avada theme text and other strings
- Translating Avada’s theme options
- Translating Avada’s menus
- Getting help – WPML Forum
- Get WPML
- Install the Avada theme and activate it.
- Next, install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) followed by other WPML plugins that may depend on them.
- Set up WPML on the WPML -> Languages page. See our WPML Getting Started Guide for reference. The initial, simple three-step setup is self-explanatory. You can install the demo content by navigating to Avada -> Install Demos and clicking on Install (we are installing Avada Classic as an example for this tutorial).
For this tutorial, we use some of the demo content provided with Avada. You can install the demo content by navigating to Avada -> Install Demos and then clicking on Install (we are installing Avada Classic as an example for this tutorial).
Translating pages built using the Fusion Builder
- Preserving the existing translations when editing the default language page
- Automatic Translation for internal links
- Copy-once mode for custom fields
You need to activate the WPML Translation Editor in order to translate the pages created using Fusion Builder. Go to WPML -> Translation Management page and click the Multilingual Content Setup tab. Then, go to the How to translate posts and pages section and select the Use the translation editor option.
WPML allows you to translate content in three ways: You can translate yourself, send content to your own translators, or send jobs to a translation service.
Watch a short video of translating pages built with the Fusion builder:
Scenario 1: Translate the content yourself.
Publish the page you just created with Fusion builder. Once you publish, the Language box will be displayed. Click the plus button to choose the language to translate your page.
You can find theplus buttons in the Language box when editing your page or on the listing page:
The plus button located in the Language box when editing the page.
The plus located under the flag in Pages -> All pages
By clicking on one of the plus buttons, you open WPML’s Translation Editor. Use it to translate the contents of your page and tick the box when the Translation is complete. Note that you need to choose the Translation is complete option for all the fields in order to save the translation. Once this is done, click on the Save & Close button to publish the translated page. In this example, we will translate the About me page that is imported by the Avada demo content.
If you have already translated the page, the plus button changes to a pencil icon. Click on the pencil icon in case you need to modify the translation.
Scenario 2: You want to send the pages to a translator.
For this, go to the WPML -> Translation Management page and select the content to translate (pages or posts).
Then, click to add the selected items to Translation basket.
Finally, from the Translation basket tab, you need to select translators.
The translators will be notified and they will translate the content on the WPML -> Translations page. The translated content will then appear in WordPress.
This is how the default and the translated About Me page looks like on the front-end.
|English – About Me page||Spanish – About Me page|
Translating Avada Demo Pages
Avada comes with demo pages that you can import to a new page you are creating. These pages are built using Fusion builder. In order to translate these pages, follow the same steps that we followed to translate the pages built using Fusion builder.
To import a demo page from the library, go to Pages -> Add New and click on the Use Fusion Builder button.
When you click the Library tab, a pop-up dialog box appears, click on the Demos tab, and then click the Load button.
To translate the page, follow the same steps that we followed to translate pages built using the Fusion builder.
Updating a page and its translation
In this part, we show you how to update your translation if you need to modify the content of your default language page.
Scenario: I have added a new Module to my page and I need to translate it.
- Add a new Fusion Module to your page. For this example, Add the Title module. Add this module to the top of the “About me” page. Remember to Update the page after adding the module. This is important to load the textual elements of the module to the Translation Editor screen.
- In the Language box, you will see an arrow instead of a plus button. This indicates that the translation needs to be updated since you recently added some new content to your default language page. Click on the arrow to update the translation in your secondary language page.
- You will see the WPML Translation Editor with new fields that need to be filled in. Also, note that the translation completion percentage is back to 96%
- Translate and mark the translations as complete ,and then Save and Close.
Translating other pages, posts, custom post types and taxonomies
You can translate all your pages, posts, and custom post types using the translation editor.
Translating custom post types and post (Portfolio)
Here is an example of how you can translate a Portfolio item:
- From your WordPress dashboard, navigate to Portfolio -> Portfolio page and click on the plus icon to translate a Portfolio item.
- The Translation Editor opens again. Note that the Translation Editor screen displays the Portfolio categories for translation. Translating the catagories affects all terms now only the terms assigned to this portfolio item.
You can follow the same steps to translate the regular posts.
Translating post categories
In this example, we translate the post categories. Note that you can translate any post type category using the same method.
- Go to the Posts -> Categories page and click on the category you want to translate.
- Click on the add link to add the translation
- Add your translation to the Name, Slug and Description fields and click on Add New Catagory.
Translating custom toxonomies
In this example, we translate the Portfolio Categories. You can translate all the custom taxonomies using the same method.
- From your WordPress dashboard, go to the WPML -> Taxonomy Translation page.
- Select Portfolio Categories from the Select the taxonomy to translate drop-down menu.
- Click on the plus button to add the custom taxonomy translation by filling the required fields and then click on the Save button
Translating Fusion Sliders
In this example, we will translate the Home slider imported by the Avada demo content.
Before translating the slides we need to set the custom fileds that hold the slides textual elements to Translate:
- From your WordPress dashbord, navigate to WPML -> Translation Managment and click on the Multilingual Content Setup tab.
- Click on the Custom fields translation link to jump to that section.
- Set the pyre_heading and pyre_caption custom fields to Translate and Save.
To translate the slides follow the steps below:
- From your WordPress dashboard navigate to Fusion Slider -> Add or Edit Slides.
- Click on the plus icon of the desired language you want to translate the slider into. This will take you to the Translation Editor page.
- Add your translated text to the feilds and mark the translated feilds as Translation is complete.
- Click Save & Close.
Translating Avada theme text and other strings
To translate the theme strings, you need to scan it for strings. This registers the strings for translation on the String Translation screen. (Read more about Theme and Plugin Localization.)
This can be done by following the steps below:
- From your WordPress dashboard, go to the WPML -> Theme and plugin localization page.
- Choose the Translate the theme and plugins using WPML’s String Translation option and click the Save button.
- Click on the Scan the theme for strings button. This registers the theme texts for translation on the string translation screen. Check the illustration below.
- Now you can go to the WPML -> String translation page to translate the theme strings
Strings can be filtered by:
- Select which strings to display (Translation complete, Translation needed, Waiting for translator).
- Select a specific text domain.
- Search for a specific string by typing it in the search for: field and click the search button.
- Click on translations and add your translated text. Then choose the Translation is complete option and click Save.
Note that translating the theme options admin text can be achieved by choosing the admin_texts_avada_theme_options string domain on the string translation screen.
Translating Avada’s theme options
Theme options can be translated using the string translation page. For example, if we want to translate the Copyright Text available in Avada’s Footer content theme option.
Navigate to the String Translation page and search for the copyright text. As you can see it is under the string domain admin_texts_avada_theme_options. Click on the translations link, add your translated text, mark the Translation is complete option and click Save.
Translating Avada’s menus
With WPML, you can easily synchronize your language menus. For more information, please check our complete menus translation tutorial.
Getting help – WPML Forum
If you need help using WPML with Avada theme, please visit our technical forum. Before posting about issues, we recommend that you review this quick checklist:
- Ensure that 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.
- Check whether the problem does not exist when the WPML plugins are deactivated, and that it appears only when the core WPML plugins are activated. In other words, try to ensure that it is an issue of compatibility of Bridge with WPML so that Avada support is able to assist you better.
You can test WPML for 30 days and see if you like it.
If you are not happy with our plugin, we refund you without any questions in the 30 days.