The WPML plugin is a popular choice for creating multilingual websites in WordPress. One common requirement is to add a language switcher in the menu, allowing users to easily switch between different language versions of the site.
To achieve this, you can use the wp_nav_menu_items filter hook to add a custom menu item for each language. Here’s an example code snippet that demonstrates how to add a language switcher in the menu using WPML:
function wpsnippets_add_language_switcher( $items, $args ) {
// Check if the menu is the primary menu
if ( 'primary' === $args->theme_location ) {
// Get the list of available languages from WPML
$languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );
// Loop through each language and add a menu item for it
foreach ( $languages as $language ) {
$items .= '<li class="menu-item menu-item-language">';
$items .= '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
$items .= '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_add_language_switcher', 10, 2 );
In this code snippet, we define a custom function wpsnippets_add_language_switcher that takes two parameters: $items (the existing menu items) and $args (the menu arguments). We then check if the menu is the primary menu using the $args->theme_location property.
If it is the primary menu, we retrieve the list of available languages using the wpml_active_languages filter hook. We then loop through each language and append a new menu item to the existing menu items using the $items variable.
The menu item is wrapped in <li> tags with a custom class menu-item-language. The language URL is obtained from the $language['url'] property, and the language name is obtained from the $language['native_name'] property. Both the URL and name are properly escaped using esc_url() and esc_html() functions respectively.
Finally, we return the modified menu items using the return statement.
By adding this code snippet to your theme’s functions.php file, you will be able to display a language switcher in the menu, allowing users to switch between different language versions of your site.
Examples
Example 1: Adding WPML language switcher to a menu
This example demonstrates how to add the WPML language switcher to a WordPress menu using the wp_nav_menu_items filter.
function wpsnippets_add_language_switcher_to_menu( $items, $args ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0' );
if ( ! empty( $languages ) ) {
$switcher = '<ul class="language-switcher">';
foreach ( $languages as $language ) {
$switcher .= '<li class="' . $language['language_code'] . '">';
if ( $language['active'] ) {
$switcher .= '<span>' . $language['native_name'] . '</span>';
} else {
$switcher .= '<a href="' . $language['url'] . '">' . $language['native_name'] . '</a>';
}
$switcher .= '</li>';
}
$switcher .= '</ul>';
$items .= $switcher;
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_add_language_switcher_to_menu', 10, 2 );
This code adds the WPML language switcher to a WordPress menu by hooking into the wp_nav_menu_items filter. It first checks if the WPML plugin is active by using the icl_get_languages function. If it is active, it retrieves the list of languages using the same function and iterates over them to generate the language switcher HTML. The resulting HTML is appended to the menu items and returned.
Example 2: Customizing the WPML language switcher in a menu
This example demonstrates how to customize the WPML language switcher in a WordPress menu by modifying the generated HTML.
function wpsnippets_customize_language_switcher( $switcher_html ) {
$switcher_html = str_replace( '<ul class="language-switcher">', '<ul class="language-switcher custom-class">', $switcher_html );
$switcher_html = str_replace( '<li', '<li class="custom-item"', $switcher_html );
$switcher_html = str_replace( '<span>', '<span class="custom-span">', $switcher_html );
$switcher_html = str_replace( '<a', '<a class="custom-link"', $switcher_html );
return $switcher_html;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_customize_language_switcher', 10, 1 );
This code customizes the WPML language switcher in a WordPress menu by modifying the generated HTML using string replacement functions. It adds a custom CSS class to the language switcher <ul> element, a custom CSS class to each language switcher <li> element, a custom CSS class to the active language switcher <span> element, and a custom CSS class to each language switcher <a> element.
Example 3: Displaying the WPML language switcher in a widget
This example demonstrates how to display the WPML language switcher in a WordPress widget using the widget_text_content filter.
function wpsnippets_display_language_switcher_in_widget( $content ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0' );
if ( ! empty( $languages ) ) {
$switcher = '<ul class="language-switcher">';
foreach ( $languages as $language ) {
$switcher .= '<li class="' . $language['language_code'] . '">';
if ( $language['active'] ) {
$switcher .= '<span>' . $language['native_name'] . '</span>';
} else {
$switcher .= '<a href="' . $language['url'] . '">' . $language['native_name'] . '</a>';
}
$switcher .= '</li>';
}
$switcher .= '</ul>';
$content .= $switcher;
}
}
return $content;
}
add_filter( 'widget_text_content', 'wpsnippets_display_language_switcher_in_widget' );
This code displays the WPML language switcher in a WordPress widget by hooking into the widget_text_content filter. It first checks if the WPML plugin is active by using the icl_get_languages function. If it is active, it retrieves the list of languages using the same function and iterates over them to generate the language switcher HTML. The resulting HTML is appended to the widget content and returned.