The Fox and WPML

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.

Part 1: Set up WPML

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.

Part 2: Understand The Concept

2.1 – Overview and Website Structure

WPML helps you to set up multilingual site. Your original site looks like:

https://yoursite.com

Then your site in different languages will look like:

https://yoursite.com/fr/
https://yoursite.com/de/

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:

  1. Homepage: It can be FOX Homepage Builder or Elementor homepage.
  2. Header, including logo, menu, tagline.. in short all things you see in the header
  3. Footer, including logo, footer menu, copyright text..
  4. Sidebar, including widgets in the sidebar
  5. Pages like About, Contact, Terms..
  6. Posts you want to translate
  7. Archives: Category name, Category description, Tag name, Tag description..

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.

2.2 – The Language Select Menu (Language Switcher)

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.

Language switcher at the topbar
Language Switcher in the footer by default

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.

Part 3: Translate Homepage

There’re 2 ways to create homepage/frontpage: By FOX Homepage Builder in Customize > Homepage Builder or by Elementor.

3.1 – Translate FOX Homepage Builder

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.

After translating the heading, your section looks like this.

3.2 – Translate Homepage by Elementor

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.

Part 4: Translate Header

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:

  • Site Logo
  • Tagline
  • Menu
  • Header Text
  • Header Button
  • Off-canvas Menu

How to translate Predefined Header (Classic Header)?

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:

  • Site Logo (text or image logo, depending on what you chose)
  • Site Tagline
  • Header Shortcode (if you use shortcode in Customize > Header > Classic Header > Header custom element shortcode)

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

English version of header
After translating, here’s the French version of your site.

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.

Here’s the way to find all FOX theme options to translate
Specially to the image logo option, here you can add image logo option. Please upload new image for French logo, copy its URL then paste it to the field of the wi_logo translation field.
Here’s the result.

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.

  1. Please go to Dashboard > Appearance > Menus.
  2. Select “Primary” menu to edit if you want to translate it.
  3. Click to “+” button to create a French Translation for the English version.
  4. Add your custom items there and save.
In the backend.
In the frontend of French site, it shows the French menu

How to translate Header Builder by FOX Block?

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.

  1. Go to Dashboard > FOX Blocks, you’ll see Site Header post there.
  2. Click to “+” icon next to that post to add French translation of this post. (If you don’t see any “+” icon, please read this to enable it)
  3. Now translate each item of the Site Header Block and save it after you have done all items. Note that if you haven’t finished translating all items, your French header will not be available yet.
Here’s the backend of FOX Block
You’ll see an interface like this

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.

Part 5: Translate Footer

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.

Part 6: Translate Other Parts

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.

Part 7: Translate Theme Strings

In The Fox theme, sometimes you’ll see English words like: “Next”, “Read more”.. and you wish to create French version for those words.

  1. Go to Dashboard > WPML > Theme and plugins localization
  2. Scroll to “Strings in the themes” section, check to “FOX” theme, hit “Scan selected themes for strings“. Wait for the plugin scanning process.
  3. Go to WPML > String Translation > choose “wi” domain. You’ll see list of 400+ available words for translation. You can translate any word you want there.
Demos $59 Buy