What is WPML add-on

 

 

 

 

 

 

 

 

 

 

WPML is a wordpress plugin that allows you to use multiple languages on your website. It is a very useful plugin when you have visitors that come from all over the world. But WPSOLR search doesn’t work with multiple languages by default. This is where the WPML add-on comes in. With this extension, WPSOLR can search in multiple languages by creating several indexes, one for each language to be precise. This considerably improves performance when searching in multiple languages.

 

Install the WPML plugins

Install the “WPML Multilingual CMS” and “WPML String Translation” plugins like you would any other plugin. Then register the plugins so you will be able to get future updates.

 

Setup WPML

Click on WPML in the sidebar.

Choose the language the content is currently written in.

Choose the languages you want to use on your site. I’m going to choose french.

Here you have a variety of options to choose from. You can select the order of the languages and choose what to do if there is a language it can’t translate. You can either skip that language or link to home of language for missing translations.  You can choose to add a language switcher to either a menu, a widget area or the footer. Finally, you can add a link to the translation in the content.

You can decide if you want to send information to wpml.org.

You can enter your site key in this step.

 

Translate content

If you have WooCommerce content you might have difficulty translating it. By default, WPML translates posts and pages.

Go to “WPML” -> “Settings” then scroll down to “Post Types Translation”.  Select the type of content you want to be translated.

Next scroll down to “Media Translation” and click on “Start”. Leave the default configuration if you’re not sure what to choose.

Click on the “+” icon on the very right of the screen.

Then type in the translated text. When you’re done click on publish. If you want to see the original text, click on “Copy content from English” in the sidebar. This will fill in the text from the original language in the different fields. It can be very helpful if you don’t remember what you wrote.

 

Change website language

Click on “WPML” -> “Languages” then scroll down until you reach “Language URL format”. Click on “Different languages in directories” if you want to be able to switch language by changing directories in url.

 

Create an index

Click on “Connect your indexes” then, if you want to create a test index, click on “Click to generate a free index to test WPSOLR”.

Select “Create a free test index”. The index is only valid for two hours however, so you will have to create more if you want to use it for longer. You will however need to have the same number of indexes as languages you want your website to have, but you can only create one test index. You will therefore need to connect to a search server or service for the other indexes.

Choose the search engine for your index then choose a hosting service. Choose the language you want your index to be used for, in my case i want the second index to be used for the french search. name your WPSOLR index and give a name to the search engine index. get your endpoint url from Elasticsearch server, and fill in the user and password you were given.

 

Activate the WPML extension

Go to “Activate extensions”.

Then click on “WPML” in the sidebar.

Click on the checkbox. This will activate the WPSOLR WPML add-on.

Scroll down and choose the languages you want to use for each index.

If you want to be able to choose more layouts in WPSOLR filters, click on “Theme” in sidebar, then on “Use this extension”. When you’re done save.

 

Configure WPSOLR

Click on “Define your search with ‘Test index from Elastic Cloud'”.

Next click on “Search” and select one of the two indexes in “Search with this search engine index”.

Click on “Data” in the sidebar.

Then select the data you want to index.

You can choose the taxonomies you want to use.

You can also choose the fields you want to use. If you want to use a slider you will have to change the default option, which is text, to floating point number if there are decibel numbers or integer if there are only whole numbers.

Click on “Suggestions” in the sidebar

Then create a new suggestion. Choose a name for your suggestion in the “Label” field and click on the “Is active” checkbox. In the “jQuery selectors” field, fill in the search bar id. I will show you how to retrieve it later. In the “Query” section, choose “Suggest content” and then scroll down.

Click on “Products” if you want to display products in search suggestions. If you also want to display the price, you can click on the “Show Products price” checkbox.

head over to the search bar you want the suggestions to apply to and right click and select “inspect”. You will then see something similar to the photo. copy the search bar id. In my case it is “woocommerce-product-search-field-0”. When you’re done, go back to WordPress admin.

Click on “Filter” in the sidebar.

Click on the filters you would like to use on your website then click on “Save Options”.

If you want to change the layout of the filter you select the one you want in “Layout”. You can also change layout skin on “Range Slider – Ion.RangeSlider js library”. Give your filters a title so that they are translated. if you want to people to be able to choose a product or page based on date of creation, modify “displaydate_dt” filter. Choose a label then choose the range slider and a skin. You will also have to enter some javascript to choose date format. Enter this code for the english US format:

wpsolr_ion_range_slider_options =
{
grid: true,
prettify: function tsToDate (ts) {
var lang = "en-US";
var d = new Date(ts); return d.toLocaleDateString(lang, { year: 'numeric', month: 'long', day: 'numeric' });
 } 
};

If you want to be able to change the currency and the format based on the language, enter this javascript code:

wpsolr_ion_range_slider_options =

{

grid: true,

prefix: "$",

prettify: function my_prettify (n) {
return n.toLocaleString('en-US', {maximumFractionDigits:2});
}};

 

Index content

Click on “Send your data”

Click on “Index selected post types in index ‘index-name'”. Then do the same thing for the other index.

 

Add the WPSOLR Facet widget

 

Click on “Customise” on the front part of your website, then select “Widget” and “Sidebar”. Add the WPSOLR Facets widget.

 

Translate WPSOLR Facets and WordPress widgets

Click on “WPML” then on “String Translation” in the sidebar.

Click on the + sign and add your translation. This will translate facets and widgets on your website.

Translate the WPSOLR facets.

 

Be sure to also translate the code i showed you earlier to display date in your language format. You just have to change “var lang = ” to your language.

Don’t forget to also translate the JS code for the price slider. Change “prefix” to “postfix” and “$” to “€”.  You will also have to change “en-US” to “fr”. Everything should be working as expected after that.

 

 

Translate WordPress menus

Choose “Appearance” in WordPress admin sidebar then “Menus”.

Then click on “Create Menu” and choose a name, the language and if you want it to be the translation of a certain english menu.

Choose the pages you want in your menu then click on “Add to Menu”.

Rearrange them if you want then click on save.

 

Test your website search

As you can see, we only get english content when searching right now.

The suggestions are working as well.

Now let’s switch over to french.

We now have search in the french language. If you want more detailed instructions, you can watch this video: