What is the Polylang add-on

Polylang is a WordPress plugin that allows you to create a multilingual website, a lot like WPML. You can translate, posts, pages and products with it. It is very useful to WPSOLR because you can use multiple languages to search in. You will need multiples indexes however as each languages will be indexed separately. If you want to learn how to configure WPSOLR to use Polylang, follow the rest of this guide.

 

Install the Polylang plugin

Install the Polylang plugin. After you’ve activated it, you should see a setup screen.

Setup Polylang

Choose the languages you want to use on your website.

Leave the default options here.

Choose a default language.

You should end up on this screen. Click on “Return to the Dashboard” for now.

 

Translate content

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

Go to “Languages” -> “Settings”. Click on “Settings” under “Custom post types and Taxonomies”.

Select the post types and taxonomies you would like to translate. When you’re done, save your changes.

Click on URL modifications then if you want remove /language/ from url.

Now edit the content you want to translate.

Click on the + icon on the right

You should end up with a new page. You can now begin translating.

 

 

Change website language

To change the website language to french you must enter the website url followed by /language/fr. This will only work if you have selected “Post name” as a permalink.

 

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 Polylang extension

Go to “Activate extensions” then click on “Polylang” in the sidebar. Click on the first checkbox to activate the extension, then scroll down and choose the language the indexes will be using. When you’re done save.

Don’t forget to activate the “Theme” extension as well and to click on the “Use this extension” checkbox.

 

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});
}};

Then go to “Texts” and choose the second option in the dropdown menu.

 

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 “Language” then on “String translations” in the sidebar.

Click on the field designated for your secondary language and write your translation.

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.

 

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: