WPML language switcher mobile customization

To customize the WPML language switcher for mobile devices, you can use the wp_nav_menu_items filter hook to modify the output of the language switcher menu. By targeting the specific menu location used by WPML, you can add custom CSS classes or modify the HTML structure to make it more mobile-friendly.

Here’s an example code snippet that demonstrates how to customize the WPML language switcher for mobile devices:

function wpsnippets_custom_language_switcher( $items, $args ) {
    // Check if the menu location is for WPML language switcher
    if ( $args->theme_location == 'wpml-languages' ) {
        // Add a custom CSS class to the language switcher menu
        $items = str_replace( 'menu-item', 'menu-item custom-language-switcher', $items );

        // Modify the HTML structure of the language switcher menu
        $items = str_replace( '<ul class="sub-menu">', '<ul class="sub-menu custom-sub-menu">', $items );
    }

    return $items;
}
add_filter( 'wp_nav_menu_items', 'wpsnippets_custom_language_switcher', 10, 2 );

In this code snippet, we define a custom function wpsnippets_custom_language_switcher that takes two parameters: $items (the HTML output of the menu items) and $args (the arguments passed to the wp_nav_menu_items filter hook).

Inside the function, we check if the menu location is for the WPML language switcher by comparing the $args->theme_location value with the desired location (in this case, ‘wpml-languages’). If it matches, we perform the desired customizations.

In this example, we add a custom CSS class (custom-language-switcher) to each menu item by using the str_replace function to replace the existing class (menu-item) with the new class. We also modify the HTML structure of the sub-menu by replacing the default <ul class="sub-menu"> with <ul class="sub-menu custom-sub-menu">.

Finally, we return the modified $items to apply the customizations.

You can customize the CSS classes and HTML structure according to your specific mobile design requirements.

Examples

Example 1: Customizing WPML Language Switcher for Mobile Devices

This example demonstrates how to customize the WPML language switcher for mobile devices by adding a custom CSS class to the language switcher container.

function wpsnippets_custom_language_switcher_class( $switcher ) {
    if ( wp_is_mobile() ) {
        $switcher['class'] .= ' mobile-language-switcher';
    }
    return $switcher;
}
add_filter( 'wpml_language_switcher', 'wpsnippets_custom_language_switcher_class' );

In this code example, we use the wpml_language_switcher filter to modify the language switcher output. The wpsnippets_custom_language_switcher_class function checks if the current device is a mobile device using the wp_is_mobile() function. If it is, we append the mobile-language-switcher class to the existing classes of the language switcher container. This allows us to apply custom CSS styles specifically for mobile devices.

Example 2: Changing WPML Language Switcher Icons for Mobile Devices

This example demonstrates how to change the icons used in the WPML language switcher for mobile devices by modifying the language switcher template.

function wpsnippets_custom_language_switcher_template( $template ) {
    if ( wp_is_mobile() ) {
        $template = 'custom-mobile-language-switcher.php';
    }
    return $template;
}
add_filter( 'icl_ls_languages', 'wpsnippets_custom_language_switcher_template' );

In this code example, we use the icl_ls_languages filter to modify the language switcher template. The wpsnippets_custom_language_switcher_template function checks if the current device is a mobile device using the wp_is_mobile() function. If it is, we set the template to custom-mobile-language-switcher.php. This allows us to create a custom template file with different icons specifically for mobile devices.

Example 3: Hiding WPML Language Switcher on Mobile Devices

This example demonstrates how to hide the WPML language switcher on mobile devices by modifying the language switcher output.

function wpsnippets_hide_language_switcher_on_mobile( $switcher ) {
    if ( wp_is_mobile() ) {
        $switcher['show_flags'] = false;
        $switcher['show_names'] = false;
    }
    return $switcher;
}
add_filter( 'wpml_language_switcher', 'wpsnippets_hide_language_switcher_on_mobile' );

In this code example, we use the wpml_language_switcher filter to modify the language switcher output. The wpsnippets_hide_language_switcher_on_mobile function checks if the current device is a mobile device using the wp_is_mobile() function. If it is, we set the show_flags and show_names properties of the language switcher to false. This effectively hides the flags and language names on mobile devices, making the switcher more compact.