Countries dropdown according to WPML language switcher

The situation for this article is, let’s say we have the country list displayed in a drop down as shown in Screenshot 1 and also WPML Plugin is installed and configured for five different Languages as shown in Screenshot 2.

We want to update countries list in a drop-down box, according to WPML Language switcher i.e whenever the Language in “WPML Language switcher” is changed the country drop down will display all the countries speaking that specific selected language. Isn’t it a cool Feature !!!

WordPress level: Intermediate to WordPress expert.

Prerequisites:

WordPress (version 4.4.2)
Twenty Sixteen theme (Version: 1.1)
Child theme of Twenty Sixteen activated
WPML (Version 3.1.9.7)

Screenshot 1: All Countries Drop Down

Multilingual Plugin WPML is installed and is configured for following languages,

English
French
German
Italian
Spanish

and under “WPML > Languages” menu there is “Language switcher options” section where the Language switcher can be shown in many places in the theme. We show the switcher in “Theme sidebar” and here is a screenshot of the what language dropdown looks like.

Screenshot 2: Language switcher

Now as shown in Screenshot 1, country drop down shows all the list of the countries populated (I will go through how to populate this dropdown field). What we want is to make countries drop down shown according to the language selected in language switcher.

For e.g let’s say if we select the French language, the country dropdown should be populated with French-speaking countries, for German language German speaking countries should be populated and so on.

To achieve this we need to write custom code in functions.php file of “Child theme”, in our case it’s Twenty Sixteen child theme.

Step 1: First of all we will create a shortcode to display countries on a page.

In the Child themes functions.php file, let’s define a constant for storing a list of countries. We can store countries in the database table and build CRUD around it but I would keep things simple for this article.

In the code snippet below, an array is defined with indexes as languages codes and with sub-array with countries speaking that particular language. This array is then serialized and stored into constant variable.

English (en), French(fr), Italian(it), German (de) and Spanish (es) speaking country list is stored in an array.
Note: This is not a comprehensive list of countries speaking a specific language, for article purposes I have selected few countries per specific language.

$countries_to_show = array (
       "en" =>  array(
                  "Australia",
                  "India",
                  "United Kingdom",
                  "United States"
               ),
        'fr' => array(
	          "Belgium",
		  "Switzerland",
                  "Haiti",
                  "Canada",
                  "France"
                ),
        'it' => array(
		  "Italy",
		  "Switzerland",
		),
        'de' => array(
		 "Germany",
		 "Austria",
		 "Switzerland",
	        ),
       'es' => array(
                 "Spain",
                 "Argentina",
                 "Chile",
                 "Mexico"
                ),
);
define('WPTS_COUNTRIES',serialize ( $countries_to_show ));

Step 2: Now we write a shortcode for displaying above countries. But before that, under “WPML > Languages” menu there is an option for setting language URL format. This option is for configuring which URL format should be used to display language specific content and three URL formats are available,

1) Different languages in directories

http://tymescripts.com/ – English,
http://tymescripts.com/fr/ – French
http://tymescripts.com/it/ – Italian
and so on.

2) A different domain per language

http://tymescripts.com/ – English,
http://fr.tymescripts.com – French
http://it.tymescripts.com – Italian
and so on.

3) Language name added as a parameter

http://tymescripts.com/ – English,
http://tymescripts.com/?lang=fr – French
http://tymescripts.com/?lang=it – Italian
and so on.

For this article purpose, we are using 1^st option.

add_shortcode('wpts_countries','wpts_countries');
function wpts_countries()
{
  // WPML global variable	
   $lang = ICL_LANGUAGE_CODE;
	
   $strCountry = "";
   $strCountry .=  '<p>';
   $strCountry  .= '<label for="country"><strong>Country:</strong> </label>';
   $strCountry .=  getContryDropDown($lang);
   $strCountry .= '</p>';
   echo $strCountry;
}

The above code section declares a shortcode for displaying simple country dropdown. The global variable “ICL_LANGUAGE_CODE” is WPML specific global variable which contains current language selection, which means if the English language is selected, ICL_LANGUAGE_ CODE variable will contain value “en”’ and so on.

The function getContryDropDown is defined as below,

function getContryDropDown($lang = null)
{
       // Un-serialze global constant WPTS_COUNTRIES
      $countries = unserialize(WPTS_COUNTRIES);
      $show_countries= array();
      switch($lang)
      {
	 case 'fr':
		$show_countries = $countries['fr'];
	 break;
	 case 'it':
		$show_countries = $countries['it'];
	 break;
	 case 'de':
		$show_countries = $countries['de'];
	 break;
	 case 'es':
		$show_countries = $countries['es'];
	 break;
	 default :
		$show_countries = $countries['en'];
	 break;
     }
			
     $select = "<select id='wpts_countries' name='wpts_countries' title='Select Country' />";
     $select .= "<option value=''>Select Country</option>";
     foreach ($show_countries as $country) 
     {
	 $select .= "<option value='$country'>$country</option>";
     }
     $select .= "</select>";
     return $select;
}

In above function, first, we unserialize global constant WPTS_COUNTRIES and store into $countries variable as an array. After that, we retrieve the corresponding list of countries in switch statement for selected language code ($lang) passed as parameter and store that list in variable $show_countries.

After retrieving language list we loop through the array to build a drop-down box as shown is above code snippet.

Now Let’s create a page and put shortcode [wpts_countries] on that page. Duplicate the page for all the languages as shown in below screen shot, this is important since if the page is not duplicated the language switcher will not work (as per WPML settings ).

Screenshot 3: WPML Translate or Duplicate Page

Now if the code is in place, and if we select the English Language, the countries dropdown is populated with English speaking countries, if we select French Language French speaking countries are populated and so on.

Following screenshot is depicting exactly the same thing,

English: