The Fox theme is 100% compatible with WPML. In this article, we’ll show you how to set up a multilingual WordPress website using The Fox theme & WPML. Note that WPML is a premium plugin. You’ll need to make purchase first.
We’ll use English as default language and make 2 translation languages: German and French. And in this article, we will assume English is the primary language and we need to make French version of the website.
Table of Contents
After installing WPML, you must set up it completely before using. If this is the first time you use this plugin, here’s some screenshots to help you to set it up.
Other options are obvious hence we don’t post it here. After finish setting up, you can start translating. However, you’ll need to understand the concept first.
WPML helps you to set up multilingual site. Your original site looks like:
Then your site in different languages will look like:
You might choose different structure like yoursite.com?lang=de but point is you will have different URLs for different languages. And your task is to translate everything you have in yoursite.com into yoursite.com/fr/
Here’re things you’ll need to translate:
Hence in this tutorial, we’ll go through all of those parts and how to translate them into other languages. Note that each thing might be related to different mechanisms. For instance, the header may include logo, tagline, menu or FOX Block so you’ll need to translate them in different places.
Site Text Logo, Tagline can be translated in WPML > Translate Strings. But the menu will be translated iin WPML > Menus and a FOX Block will be translated in Dashboard > FOX Blocks. Also, It depends on how you build. For instance, predefined header can be translated by its components but header builder is a FOX Block and you’ll need to translate that FOX Block in Dashboard > FOX Blocks. That’s only the idea, we’ll go into the details for each part so don’t worry for now.
The Language Select Menu (Language Switcher) is the menu with languages of your site to help you and your visitors to navigate between languages. It’s up to you to put it anywhere you want but people often place it in the topbar, primary menu or in footer area.
After installing WPML, your language switcher will be added after Fotoer automatically. You can customize this Language Swicher (appearance, position..) in Dashboard > WPML > Languages > Menu Language Switcher. If you want to disable Footer Language Switcher, please go to Dashboard > WPML > Languages > Footer language switcher.
One more thing worth noting: If your site has 3 languages English, French and German but you see only English in the language menu, don’t worry. It will show French option in your language switcher if your current page has French translated version. Hence after translating your page into French, you’ll see French option appearing in the Language Switcher automatically.
There’re 2 ways to create homepage/frontpage: By FOX Homepage Builder in Customize > Homepage Builder or by Elementor.
Homepage Builder is made from sections. In each section, it displays posts from certain category or latest posts. It automatically translates into another language if you translate the category and post correctly. The remaining part is to translate the necessary strings of each section like the Heading, View all text..
Step 1: Translate Category & Post Correctly
Say, in 1st section. We display the latest posts filled under category Books.
To have this 1st section being translated correctly into French homepage, we’ll need to translate the category Books and translate all posts of this category. Here’s the detailed guide to translate a category by WPML, but briefly, to translate the category, go to Dashboard > Posts > Category > Books > Edit it > scroll to bottom > Click “+” to add French version of this category.
To translate some post, for instance, the 1st post with Lincoln statue, we go to Dashboard > Posts > All Posts > click “+” to add French version of that post.
Here we have “This is french post” is the translated version of the post “Diceret erroribus eos..” (the one with Lincoln statue) and Livres is the translated version of category Books. Hence if you visit French version of homepage, it’ll display French posts filled under category Livres, like this:
Step 2: Translate Remainng Text: The remaining part is to translate the heading text, view all text and view all link.
Please visit Dashboard > WPML > String Translation > choose domain “FOX Homepage Builder”, you’ll see available strings to translate.
If your homepage is made by Elementor, It’s in the general discipline of translating an Elementor page by WPML, not only for The Fox theme. You can find a lot of detailed tutorials about this problem, for instance this one or this one.
To create French versions, you’ll need to create French version for all site components: Header, Footer, Sidebar, Pages, Posts, Archives (category, tag..).
There’re 2 methods for building Header with The Fox: Using Predefined Header or Header Builder by FOX Block. If you’re using FOX Block + Elementor to edit header, then it’s the Header Builder. If you customize things in Theme Customizer, It’s the Predefined Header (Classic Header).
Different things that need to translate in the header include:
Predefined header is controlled mostly by Theme Customizer. Hence, to translate it you need to translate options. Here’re theme options you’ll need to translate:
And you can find them in Dashboard > WPML > String Translation.
Translate Site Text Logo & Tagline. They’re parts of WordPress hence we’ll see the
Transate Image Logo
To translate image logo, go to Dashboard > WPML > String Translation and choose the domain “admin_texts_theme_mods_fox”, you’ll see all FOX theme options to translate there. It includes all theme options that can be translated, not only the site image logo. There you’ll find the image logo option to translate.
Transate Header shortcode/button
Similar to image logo, you can translate the header shortcode in the same way. And you can see in the photo above, “Buy Now” becomes “Acheter maintenant“. Also, the URL can be changed to if you change it.
Translate Site Menu
While the header menu is only a part of general theme menus, all menus are translated in the same way (footer menu, off-canvas menu..). Translating site menu is not a part of theme, it’s done generally by WPML and quite intuitive.
If you’re using Header Builder by FOX Block, you simply need to translate FOX Block. Note that FOX Block is a custom post type, hence it works the same way as translating a post or a page.
After saving, please go back to the Dashboard > FOX Blocks interface, you’ll see a newly created post. That’s the new Site Header Block created in French.
Here’s the FOX Block Site Header and its version in French:
You can see all strings translated above take effect in the French Site Header. However, there’re points 1, 2, 3 are not translated yet. For instance, you want to set different social icons for French version or have a different French Logo or have different Subscribe button. So the WPML string translation is only a convenient way to translate text to text. To translate fully or control it 100% as you want, you should edit the French version in Elementor.
When you edit it with Elementor, you can edit anything you want rather than just the text.
There’re 2 types of Footer: Predefined Footer or Footer Builder by FOX Block. Principles applied for Header will be applied the same for Footer.
Other parts of the theme like Sidebar, Widgets, Pages, Posts.. are nothing special. They lie in the general discipline of the WPML documentation, hence we recommend you to check their guide for the details.
In The Fox theme, sometimes you’ll see English words like: “Next”, “Read more”.. and you wish to create French version for those words.
Below demos are just examples. More to come in the future and you can mix their features. If you see one feature in a demo, you can use it in any other demos. All demos are included in the download package and ready to import in 5 minutes.