The WPML language switcher dropdown is a useful feature for multilingual websites built with WordPress and the WPML plugin. It allows users to easily switch between different language versions of the site.
To add a language switcher dropdown to your WordPress site using WPML, you can use the icl_get_languages() function provided by WPML. This function returns an array of languages and their details, which you can then use to generate the dropdown HTML.
Here’s an example code snippet that demonstrates how to create a language switcher dropdown using WPML:
function wpsnippets_language_switcher_dropdown() {
$languages = icl_get_languages(array('skip_missing' => 0));
if (!empty($languages)) {
echo '<select id="language-switcher">';
foreach ($languages as $language) {
echo '<option value="' . esc_url($language['url']) . '"';
if ($language['active']) {
echo ' selected';
}
echo '>' . esc_html($language['native_name']) . '</option>';
}
echo '</select>';
}
}
In this code snippet, we define a custom function wpsnippets_language_switcher_dropdown() that retrieves the languages using icl_get_languages(). We then loop through each language and output an <option> element for each language, with the language’s native name as the option text and the language’s URL as the option value. We also add the selected attribute to the currently active language.
To use this code snippet, you can simply call the wpsnippets_language_switcher_dropdown() function wherever you want to display the language switcher dropdown in your theme or plugin.
Note: This code assumes that you have already installed and activated the WPML plugin on your WordPress site.
Examples
Example 1: Adding WPML language switcher dropdown to a WordPress menu
This use case demonstrates how to add a WPML language switcher dropdown to a WordPress menu. The code example below adds a custom filter to the wp_nav_menu_items hook, which appends the language switcher dropdown to the menu items.
function wpsnippets_wpml_language_switcher_menu( $items, $args ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0' );
if ( ! empty( $languages ) ) {
$items .= '<li class="menu-item menu-item-language-switcher">';
$items .= '<select class="wpml-language-switcher" onchange="if (this.value) window.location.href=this.value;">';
foreach ( $languages as $language ) {
$items .= '<option value="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</option>';
}
$items .= '</select>';
$items .= '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_wpml_language_switcher_menu', 10, 2 );
The code adds a custom filter to the wp_nav_menu_items hook, which allows us to modify the menu items. Inside the filter callback function, we first check if the WPML plugin is active by using the icl_get_languages function. If it is active, we retrieve the available languages using the same function. Then, we iterate through the languages and append an <option> element for each language to the $items variable. Finally, we return the modified $items variable.
Example 2: Adding WPML language switcher dropdown to a widget area
This use case demonstrates how to add a WPML language switcher dropdown to a widget area. The code example below adds a custom widget that displays the language switcher dropdown.
class WPSnippets_WPML_Language_Switcher_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpsnippets_wpml_language_switcher_widget',
'WPML Language Switcher',
array( 'description' => 'Displays a dropdown for switching between WPML languages.' )
);
}
public function widget( $args, $instance ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0' );
if ( ! empty( $languages ) ) {
echo $args['before_widget'];
echo '<select class="wpml-language-switcher" onchange="if (this.value) window.location.href=this.value;">';
foreach ( $languages as $language ) {
echo '<option value="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</option>';
}
echo '</select>';
echo $args['after_widget'];
}
}
}
}
function wpsnippets_register_wpml_language_switcher_widget() {
register_widget( 'WPSnippets_WPML_Language_Switcher_Widget' );
}
add_action( 'widgets_init', 'wpsnippets_register_wpml_language_switcher_widget' );
The code defines a custom widget class WPSnippets_WPML_Language_Switcher_Widget that extends the WP_Widget class. In the constructor, we set the widget’s name and description. The widget method is responsible for rendering the widget’s output. Inside this method, we check if the WPML plugin is active and retrieve the available languages. Then, we output the language switcher dropdown using the retrieved languages.
Example 3: Adding WPML language switcher dropdown to a custom location
This use case demonstrates how to add a WPML language switcher dropdown to a custom location in your theme. The code example below adds a custom function that can be called in any template file to display the language switcher dropdown.
function wpsnippets_display_wpml_language_switcher() {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0' );
if ( ! empty( $languages ) ) {
echo '<select class="wpml-language-switcher" onchange="if (this.value) window.location.href=this.value;">';
foreach ( $languages as $language ) {
echo '<option value="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</option>';
}
echo '</select>';
}
}
}
The code defines a custom function wpsnippets_display_wpml_language_switcher that can be called in any template file to display the language switcher dropdown. Inside the function, we check if the WPML plugin is active and retrieve the available languages. Then, we output the language switcher dropdown using the retrieved languages.