Create a multilingual site with WPML and an Ignition Framework based theme
Creating a multilingual site with an Ignition Framework based theme is as simple as with any other theme. In this guide we take a look at how to create a bilingual site using the Aegean Resort theme. We are going to use the WPML plugin to achieve our goal.
WPML
WPML is the most popular premium WordPress plugin for creating multilingual sites. Once you download, install and activate the plugin click the Configure WPML button to continue.
Onboarding
This will trigger the onboarding procedure.
In the first step you will need to set the language for any existing content from the drop down.
In the second step check the languages you want to translate your site to.
In the third step you can set the language order in the language pickers and select what happens when a translation for a certain item does not exist. Here you can also add language switchers to the menu, widget areas and the footer, but we’re going to skip this since we will be using the framework’s built in switcher.
The 4th and 5th steps allow you to share data with WPML and register your plugin to receive automatic updates.
Once you are done with the onboarding you will be prompted to take care of media translation for existing and future media types. Click the Set media languages button to proceed.
In the next page you will be asked how you would like WPML to handle media translations, the default values should be ok for most cases. Click the Start button to apply the changes to existing images and then click the Apply button to set these options as defaults for media that will be uploaded in the future. Please make sure to read the Media Translation Documentation provided by WPML to decide if the default options are suitable for your site and use-case.
Translating items
Now we’re ready to start translating our content. Let’s start with a post. Go to your Posts in the dashboard.
Notice that next to the title column we have the language column. Each post was a plus mark next to its title, this means that no translation exists for the particular language and we can add one. Let’s press the plus button to proceed.
You are presented with the familiar interface of the block editor (or the classic one if that’s what you are using) to start adding the content as you normally do.
Notice the Language of this post metabox on the right hand sidebar. This allows you to copy over content from the original language and modify it instead of rewriting the content from scratch. The media attachments section informs you that any media uploaded to the post including the featured image will be duplicated for the translated item, this is perfect if you plan on using the same media (which is most likely the case). If you wish to add other media to the translated post, untick the boxes and proceed with the post creation as usual, including media uploading. After finishing you can publish your post.
Translating categories
As you might have noticed, our original posts were categorized under the Offers category. We went ahead and created a new category for the translated item with a translated category name of course, now we need to let WPML know of their relationship. Navigate to Posts > Categories and edit the newly created category applied to the translated post.
From the Language meta box select the original category from the This is a translation of drop down and save the category, that’s it, now WPML nows that this category is a translation of the original Offers category.
We’re done translating our first item! In the posts listing in your dashboard you can see them both if you select the All languages option from the WP Admin bar at the top.
The procedure for translating pages and custom post types is the same as with the posts.
Enabling translation for custom post types
By default custom post types will not appear as translatable, however you can easily enable this feature.
Navigate to WPML > Settings and from the Post Types Translation section set the Accommodation (or any other custom post type you want to translate) to Translatable. Save and then do the same for the Taxonomies Translation. Your final settings should look like the ones below.
Creating a menu
Navigate to Appearance > Menus and edit the current menu of your site.
In the menu structure section you will notice that the menu has a language assigned to it (this was done when we set the default language for any existing content during the onboarding procedure). To the right we have two options.
Adding a new menu
If you click the plus button next to the language you’re creating a translation for WPML will allow you to create a new menu for that language.
Give the menu a name, make sure the Language and Translation of options are correct, select the proper display location from Menu Settings and proceed to add the menu items to the menu just as you would normally do, once done click the Create Menu button to save the menu and you are good to go.
Menu sync
Another option WPML offers is menu sync, this can be activated if you click on the Synchronize menus between languages link shown in the second to last picture.
This will present you with the above screen. Essentially each time you translate an item that’s on the menu set for the default language, WPML will automatically add it to a menu created for the new language. This means that your menus will be identical, if this works for you you can choose the sync option and be done with it. If you need slightly different menus for each language you’ll have to go with the first option.
Add a language switcher to the top bar
The Ignition Framework bundles a shortcode specifically built to create a language switcher. To add one to the site’s top bar navigate to Customize > Top Bar and add it to any content area.
In the example above we have use the following shortcode:
Of course you can use the language switcher shortcode in any of the theme’s content areas in the top bar, header, footer, widgets or even in the content.
Translating widgets
Translating widgets is very easy. Navigate to Appearance > Widgets and notice the language drop down that appears in each widget.
From the drop down select in which language this particular widget will appear in and save it. Now create a new widget of the same type, add he same content but translated and select the proper language for it in the drop down. That’s it, now each widget will only appear on its set language.
Translate static strings
Take a look at this knowledgebase article for info on how to translate static strings.