I18N Language Globe
Plugin Description:
For i18n multi-language sites, a Globe with a languages navigation dropdown.
Requires the I18N Plugin.
Place a clickable globe somewhere in the header or footer of each page, letting the visitors know that there are more languages they might choose from!
The navigation dropdown offers all languages in which the current page is available.
Each language name will be displayed in its own language. So you see en (English) as "English", pl (Polish) as "Polski", el (Greek) as "Ελληνικά", and uk (Ukrainian) as "Українська".
The list of slug extensions and language names is based on the ISO 639-1 two-letter language codes, plus some more that are in real-world use.
If it is necessary to adjust the list because different slug extensions are used, the file "languages_array.php" in the /plugins/i18n_language_globe directory must be modified.
Responsiveness
On a desktop display (more than 1024px width) the globe and current language are displayed, using the current font size.
Below this, a slightly bigger font is used, allowing better interaction on a touch display.
Below 768px, i.e. for mobile screens, only the globe is displayed, without the current language name.
Install Instructions:
Just unzip and upload the contents to the plugin directory, and activate the plugin.
There are no settings to adjust.
After this, you can call the function
get_i18n_language_globe($text_color = null, $background_color = null, $border_color = null)
for displaying the language dropdown. Or
return_i18n_language_globe($text_color = null, $background_color = null, $border_color = null)
for returning the language dropdown html code to the caller for further use.
So I suggest to make up a <div> that will be styled and placed as desired in the header or footer section of the page template, and inside call the function
get_i18n_language_globe();
Without parameters, the globe and the languages dropdown will have current text and background colors of the containing div, and there will be no border around the languages dropdown. Use the color parameters to style the dropdown further according to the desired look-and-feel.
You can have more than one globe navigation on the page. You can put one in the header and another one in the footer, both styled differently.