The language switcher is the primary UI element that allows visitors to change languages on your site. Lang Forge provides multiple ways to render it: shortcode, widget, PHP function, and WPML-compatible action hook.
8.1 Shortcode
Use the shortcode in any post, page, widget area, or page builder element:
text
| Parameter | Values | Default |
|---|---|---|
style | dropdown, list, flags | dropdown |
show_flags | yes / no | Yes |
show_names | yes / no | Yes |
show_current | yes / no | Yes |
8.2 Widget
Lang Forge registers the Language Switcher widget (LF_Language_Switcher_Widget) for use in widget areas. Configure via Appearance > Widgets with the same options: style, show flags, show names, show current.
php
// Register a dedicated widget area for the language switcher
add_action('widgets_init', function () {
register_sidebar([
'name' => 'Language Switcher Area',
'id' => 'lang-switcher-area',
'before_widget' => '<div class="lang-switcher-widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
]);
});
// In your template
if (is_active_sidebar('lang-switcher-area')) {
dynamic_sidebar('lang-switcher-area');
}8.3 PHP Function
php
// Returns HTML string (does not echo)
$html = lf_language_switcher([
'style' => 'dropdown',
'show_flags' => true,
'show_names' => true,
'show_current' => true,
]);
echo $html;php
// Add language switcher as the last item in a WordPress menu
add_filter('wp_nav_menu_items', function ($items, $args) {
if ($args->theme_location === 'primary') {
$switcher = lf_language_switcher([
'style' => 'dropdown',
'show_flags' => true,
'show_names' => false,
]);
$items .= '<li class="menu-item menu-item-lang-switcher">' . $switcher . '</li>';
}
return $items;
}, 10, 2);8.4 Custom Styling
The switcher outputs standard HTML with both Lang Forge and WPML-compatible CSS classes:
css
/* Main container */
.lf-language-switcher { }
/* Style variants */
.lf-dropdown { }
.lf-list { }
.lf-flags { }
/* WPML-compatible classes (for theme compatibility) */
.wpml-ls-legacy-dropdown { }
.wpml-ls-legacy-list-horizontal { }
.wpml-ls-item { }
.wpml-ls-current-language { }
.wpml-ls-link { }
.wpml-ls-flag { }
.wpml-ls-native { }css
/* Modern dropdown language switcher */
.lf-language-switcher.lf-dropdown {
position: relative;
display: inline-block;
font-family: inherit;
}
.lf-language-switcher .lf-current-lang {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
cursor: pointer;
font-size: 14px;
color: #1a202c;
transition: border-color 0.2s, box-shadow 0.2s;
}
.lf-language-switcher .lf-current-lang:hover {
border-color: #cbd5e0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.lf-language-switcher .lf-lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 180px;
overflow: hidden;
}
.lf-language-switcher:hover .lf-lang-dropdown,
.lf-language-switcher:focus-within .lf-lang-dropdown {
display: block;
}
.lf-language-switcher .wpml-ls-flag {
width: 20px;
height: 14px;
border-radius: 2px;
object-fit: cover;
}
.lf-language-switcher .wpml-ls-link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
text-decoration: none;
color: #333;
font-size: 14px;
transition: background-color 0.15s;
}
.lf-language-switcher .wpml-ls-link:hover {
background-color: #f7fafc;
}
.lf-language-switcher .wpml-ls-current-language .wpml-ls-link {
font-weight: 600;
color: #2b6cb0;
background-color: #ebf8ff;
}—