Country selectors let the visitors select a specific geo-targeted version of the website.
These interface elements are most of the time implemented with simple dropdown lists. However, more elaborate implementations use country flags, images of geographical regions, and more.
In this tutorial, I will share multiple ideas on how to implement a country selector in WordPress.
Add your country selector to WordPress
This section will explore different implementation methods of country selectors that don’t involve using a WordPress plugin.
Generate a dropdown list with the “Custom HTML” widget
An easy method to implement a country selector without a plugin is to create a Custom HTML widget that includes the HTML of a country selector.
The code necessary to create a country selector with this method is composed of two parts. The first part is a form with a select element.
<form onsubmit="return mysubmit(event);">
<select id="option" name="Region">
<option value="en">English</option>
<option value="de">German</option>
<option value="es">Spanish</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
The second part is the JavaScript script used to process the form submission. Specifically, the script redirects the user to the selected website based on the select element’s value.
<script>
function mysubmit(event) {
event.preventDefault()
let url = '';
const value = document.getElementById('option').value;
switch (value) {
case 'en':
url = 'https://example.com/en/';
break;
case 'de':
url = 'https://example.com/de/';
break;
case 'es':
url = 'https://example.com/es/';
break;
}
window.location.href = url;
}
</script>
Generate a country selector in a popup window
This type of implementation generates a popup window with a country selector. This solution is generally used to force users to select a specific website version.
Note that this implementation is slightly more complex than the one explained in the previous section and involves changes on the active theme or setting up a custom plugin. In the following steps, I will consider the first options.
To create a country selector in a popup or modal window, edit the functions.php file of the theme and use the wp_footer hook to add the content of the modal window.
//Add the HTML of the popup at the end of the body tag
function add_popup_html()
{
?>
<div id="country-selector-popup">
<p>Choose your country:</p>
<form onsubmit="return submitRegion(event);">
<select id="country-selector">
<option value="us">United States</option>
<option value="de">Germany</option>
<option value="es">Spain</option>
</select>
<input type="submit" id="submit" value="Submit">
</form>
</div>
<?php
}
add_action('wp_footer', 'add_popup_html');
Then, add the wp_enqueue_scripts hook to include the CSS and the JavaScript files of the modal window.
//Enqueue the CSS and JS file used by the country selector popup
function custom_enqueue()
{
wp_enqueue_style('country-selector-popup', get_template_directory_uri() . '/css/country-selector-popup.css', false, '1.00', 'all');
wp_enqueue_script('country-selector-popup', get_template_directory_uri() . '/js/country-selector-popup.js', array(), '1.00', true);
}
add_action('wp_enqueue_scripts', 'custom_enqueue');
Below you can find the content of the CSS stylesheet. Note that I used a single selector with a limited set of rules to make things simple. Feel free to customize this file to improve the design of the modal window.
#country-selector-popup {
display: none;
padding: 40px;
background: #fff;
border: 2px solid #ccc;
z-index: 999;
position: fixed;
left: calc(50% - 200px);
top: calc(50% - 200px);
width: 400px;
height: 400px;
}
The JavaScript file below redirects to the correct website version after the form submission. The script also performs a redirect when the cookie with the selected region is already set.
/**
* If the cookie associated with the region is not set display the country selection popup, otherwise redirect
* the user to the correct geo-targeted version.
*/
const countryCode = getCookie('region');
if (countryCode === false) {
document.getElementById("country-selector-popup").style.display = "block";
} else {
redirectBasedOnCountryCode(countryCode);
}
/**
* An utility function used to get the value of a cookie.
*/
function getCookie(cname) {
'use strict';
let name = cname + '=';
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return false;
}
/**
* Stores the selection of the user in a cookie and redirects the user to the selected geo-targeted version.
*
* @param event
*/
function submitRegion(event) {
event.preventDefault()
//Get the country code value from the country selector
const countryCode = document.getElementById('country-selector').value;
//Set a cookie to keep the selection of the user and avoid displaying the popup multiple times
document.cookie = "region=" + countryCode;
//Redirect the user
redirectBasedOnCountryCode(countryCode);
}
//Redirect the user to the geo-targeted version of the page based on the provided country code
function redirectBasedOnCountryCode(countryCode) {
let url = null;
switch (countryCode) {
case 'en':
url = 'https://example.com/en/';
break;
case 'de':
url = 'https://example.com/de/';
break;
case 'es':
url = 'https://example.com/es/';
break;
}
window.location.href = url;
}
Create an original style for the country selector
This section will look into ways to replace the HTML select with a more refined UI element.
Customize the select element with Select2
You can’t completely customize the look of an HTML select only with CSS. However, you can use a JavaScript-based replacement like Select2 to generate an augmented select element replacement and then apply your CSS customizations.
To install Select2, first, download it from the Select2 GitHub repository, then add its assets with the wp_enqueue_scripts hook. More information on how to use and configure Select2 with WordPress is available in this tutorial.
Finally, to customize your country selector generated with Select2, add your custom CSS rules in your theme stylesheet or in a new dedicated CSS file.
Generate a country selector with flags
When the list of countries is limited, using flag images with links instead of an HTML select is sometimes appropriate. Flags are easy to scan and can simplify the selection for your users.
You may now be wondering where to find the flags. The Flags icons by GoSquared icon set is perfect for this purpose. It includes most of the countries in the world and looks great. This icon set contains variations in terms of style and size. In terms of style, the icons comes in “flat” style and “shine” style (with a glossy effect applied), while in terms of size, these flags are available in the following formats: 16px, 24px, 32px, 48px, 64px.
Generate a country selector with maps of continents, countries, or regions
Another common type of country selector uses maps of geographic locations like regions, nations, or continents with the related links.
You can find these maps in graphic stock websites like Shutterstock, GraphicRiver, etc. Just type “map” and the location to generate many valuable results.
Generate a country selector with a WordPress plugin
In this section, WordPress beginners can find simple solutions to add a country selector to their WordPress website.
With a generic form plugin
With a generic form plugin, you can create a country selector in five minutes. For example, with WPForms, you can first select the Blank Form template and then include a Dropdown element with the list of countries.
Country Based Website Switcher
WordPress websites with the WooCommerce plugin installed can use the Country Based Website Switcher plugin to generate a country switcher.
To use this plugin, simply enter the alternative URLs of your store from the dedicated menu. Note that this extension generates a country selector popup or a list/dropdown of the alternative versions of the page in the post by using shortcodes.
Hreflang flags
The Hreflang Flags automatically generate a country selector by extracting the hreflang data from the page HTML. Consequently, you can only use it on websites where hreflang is present.