The WPML plugin is a popular choice for creating multilingual websites with 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:
function wpsnippets_add_language_switcher( $items, $args ) {
// Check if the menu is the primary navigation menu
if ( $args->theme_location == 'primary' ) {
// 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 navigation menu by comparing the theme_location property of $args with the desired location (in this case, ‘primary’).
If the menu is the primary navigation 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. The menu item is wrapped in <li> tags with a custom CSS class for styling purposes. The language URL and native name are retrieved from the $language array and properly escaped using esc_url and esc_html functions.
Finally, we return the modified menu items to be displayed in the menu.
Remember to replace 'primary' with the actual theme location of your menu. You can find this information in your theme’s functions.php file or in the WordPress dashboard under Appearance > Menus.
This code snippet can be useful for any multilingual website built with WordPress and WPML. It allows you to easily add a language switcher in the menu, improving the user experience for visitors who want to switch between different language versions of your site.
Examples
Example #1: Adding WPML Language Switcher to Menu
This use case demonstrates how to add the WPML language switcher to a WordPress menu. The code example below adds a custom function wpsnippets_wpml_language_switcher_menu that retrieves the language switcher HTML and appends it to the menu.
function wpsnippets_wpml_language_switcher_menu( $items, $args ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0&orderby=code' );
if ( ! empty( $languages ) ) {
$switcher = '<ul class="wpml-language-switcher">';
foreach ( $languages as $language ) {
$switcher .= '<li class="' . esc_attr( $language['language_code'] ) . '">';
$switcher .= '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
$switcher .= '</li>';
}
$switcher .= '</ul>';
$items .= '<li class="menu-item wpml-language-switcher-menu">' . $switcher . '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_wpml_language_switcher_menu', 10, 2 );
The code adds a filter to the wp_nav_menu_items hook and checks if the WPML plugin is active. If WPML is active, it retrieves the list of languages using icl_get_languages(). Then, it generates the language switcher HTML and appends it to the menu items.
Example #2: Customizing WPML Language Switcher in Menu
This use case demonstrates how to customize the WPML language switcher in the WordPress menu. The code example below modifies the language switcher HTML by adding a CSS class to each language item.
function wpsnippets_wpml_language_switcher_menu( $items, $args ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0&orderby=code' );
if ( ! empty( $languages ) ) {
$switcher = '<ul class="wpml-language-switcher">';
foreach ( $languages as $language ) {
$switcher .= '<li class="' . esc_attr( $language['language_code'] ) . ' custom-class">';
$switcher .= '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
$switcher .= '</li>';
}
$switcher .= '</ul>';
$items .= '<li class="menu-item wpml-language-switcher-menu">' . $switcher . '</li>';
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_wpml_language_switcher_menu', 10, 2 );
The code is similar to the previous example, but it adds the CSS class custom-class to each language item in the switcher. This allows you to apply custom styling or JavaScript functionality to specific language items.
Example #3: Displaying WPML Language Switcher in a Widget
This use case demonstrates how to display the WPML language switcher in a widget area. The code example below creates a custom widget called WPML_Language_Switcher_Widget that outputs the language switcher HTML.
class WPML_Language_Switcher_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'wpml_language_switcher_widget',
__( 'WPML Language Switcher', 'text-domain' ),
array( 'description' => __( 'Displays the WPML language switcher.', 'text-domain' ) )
);
}
public function widget( $args, $instance ) {
if ( function_exists( 'icl_get_languages' ) ) {
$languages = icl_get_languages( 'skip_missing=0&orderby=code' );
if ( ! empty( $languages ) ) {
echo '<ul class="wpml-language-switcher">';
foreach ( $languages as $language ) {
echo '<li class="' . esc_attr( $language['language_code'] ) . '">';
echo '<a href="' . esc_url( $language['url'] ) . '">' . esc_html( $language['native_name'] ) . '</a>';
echo '</li>';
}
echo '</ul>';
}
}
}
}
register_widget( 'WPML_Language_Switcher_Widget' );
The code creates a custom widget class WPML_Language_Switcher_Widget that extends the WP_Widget class. The widget() method retrieves the list of languages and outputs the language switcher HTML. You can then add this widget to any widget area in your theme.