Using Gloty
Language switcher
The switcher lets visitors move between language versions of the page they are already on. Gloty ships four ways to place it and three visual styles, all configured on Gloty → Settings.
The switcher only appears with two or more active languages. Below that there is nothing to switch between, so Gloty renders nothing and does not even load its stylesheet.
Where it can appear
Floating (default)
Set Position on Gloty → Settings → Language switcher to one of Top left, Top right, Bottom left, or Bottom right, and the switcher is injected into your site footer as a fixed-position element in that corner. No theme edits required. Since 1.4.0
Shortcode
Place the switcher exactly where you want it — in a page, a template, or a page-builder widget:
[gloty_lang_switcher]Override the style for this one instance:
[gloty_lang_switcher style="inline"]
[gloty_lang_switcher style="flags"]
[gloty_lang_switcher style="dropdown"]| Attribute | Values | Default |
|---|---|---|
style |
dropdown, inline,
flags
|
Whatever you set in Settings |
Widget
Under Appearance → Widgets add Gloty Language Switcher to any widget area. It takes an optional title and a style of either Dropdown or Inline list.
Footer list
Instead of a floating corner element, some sites want a calm, full-width row of languages at the bottom of the page. Enable it with WP-CLI:
wp option update gloty_switcher_footer_list 1
This renders an inline list across the footer and replaces the
floating switcher. It is a standalone option deliberately kept out
of the Settings screen's save cycle, so saving Settings can never
silently turn it off. Disable it with
wp option delete gloty_switcher_footer_list.
Manual placement only
Set Position to Manual (shortcode / widget only) to stop Gloty injecting anything. The shortcode and widget keep working; nothing appears automatically.
Styles
| Style | Renders as | Good for |
|---|---|---|
| Dropdown |
A native <details> disclosure showing the
current language, expanding to the full list. No JavaScript.
|
Three or more languages, or tight header space. |
| Inline links | A simple list of language links, all visible. | Two or three languages; footers. |
| Flags only | Flag glyphs with the language name as the accessible label. | Very compact placements. |
The Show flags toggle adds a flag glyph to the dropdown and inline styles too. Flags render as emoji, so they use whatever the visitor's device provides; where a flag cannot be resolved, the flags-only style falls back to the upper-cased language code.
A note on flags. Flags represent countries, not languages — Spanish is not only Spain, English is not only the UK. If your audience spans regions, language names read better than flags.
Accessibility
Every rendered switcher:
- Uses real links, so it works without JavaScript and is keyboard-navigable.
-
Marks each link with
hreflangso assistive technology announces the target language. -
Marks the current language with
aria-current. - Hides decorative flag glyphs from screen readers and keeps the language name as the accessible name.
Styling it yourself
Gloty ships a small stylesheet so the switcher looks presentable out of the box, and everything is class-based so your theme can override it. The markup uses these hooks:
| Class | Applies to |
|---|---|
.gloty-lang-switcher |
Root element of every style. |
.gloty-lang-switcher--dropdown.gloty-lang-switcher--inline.gloty-lang-switcher--flags
|
Style-specific root modifier. |
.gloty-lang-switcher__toggle |
The dropdown's summary / current-language button. |
.gloty-lang-switcher__list |
The dropdown's list of languages. |
.gloty-lang-switcher__item |
Each language entry. |
.gloty-lang-switcher__item--active |
The language currently being viewed. |
.gloty-lang-switcher__flag |
The flag glyph wrapper. |
.gloty-lang-switcher-float plus
--top-left, --top-right,
--bottom-left, --bottom-right
|
The floating wrapper and its corner. |
.gloty-lang-switcher-footer |
The full-width footer list wrapper. |
Example — pin the floating switcher above a sticky mobile bar:
@media (max-width: 782px) {
.gloty-lang-switcher-float--bottom-right {
bottom: 72px;
}
}Related
If you would rather send visitors to their own language automatically rather than making them choose, see automatic redirection. The two work together: a redirect happens once, and the switcher always overrides it.