WPML language switcher language switcher widget

The WPML plugin is a popular choice for creating multilingual websites with WordPress. One of the key features of WPML is the language switcher, which allows visitors to switch between different languages on your site. To add a language switcher widget to your WordPress site using WPML, you can use the icl_get_languages() function to retrieve the available languages and their details, and then loop through the results to display the language switcher.

Here’s an example code snippet that demonstrates how to create a custom function to display the language switcher widget using WPML:

function wpsnippets_display_language_switcher() {
    $languages = icl_get_languages();

    if (count($languages) > 1) {
        echo '<ul class="language-switcher">';
        foreach ($languages as $language) {
            echo '<li>';
            if ($language['active']) {
                echo '<span class="current-language">' . $language['native_name'] . '</span>';
            } else {
                echo '<a href="' . $language['url'] . '">' . $language['native_name'] . '</a>';
            }
            echo '</li>';
        }
        echo '</ul>';
    }
}

To use this code snippet, you can simply call the wpsnippets_display_language_switcher() function in your theme template files or widget areas where you want the language switcher to appear. The function retrieves the available languages using icl_get_languages(), checks if there are more than one language, and then loops through the languages to display them as a list.

You can customize the HTML markup and CSS classes in the code snippet to match your site’s design. The example code uses an unordered list (<ul>) with list items (<li>) for each language, and adds a CSS class of current-language to the active language for styling purposes.

Remember to have the WPML plugin installed and activated for this code snippet to work properly.

Examples

Example 1: Adding WPML Language Switcher Widget to a Sidebar

This example demonstrates how to add the WPML Language Switcher widget to a sidebar in WordPress using the register_sidebar and wp_nav_menu functions.

// Register a sidebar for the language switcher widget
function wpsnippets_register_language_switcher_sidebar() {
    register_sidebar( array(
        'name'          => __( 'Language Switcher', 'text-domain' ),
        'id'            => 'language-switcher',
        'description'   => __( 'Add WPML Language Switcher widget here.', 'text-domain' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'wpsnippets_register_language_switcher_sidebar' );

Explanation: The code registers a sidebar named “Language Switcher” using the register_sidebar function. It provides a unique ID, description, and HTML markup for the widget. This allows users to add the WPML Language Switcher widget to this sidebar from the WordPress admin panel.

Example 2: Customizing WPML Language Switcher Widget Output

This example demonstrates how to customize the output of the WPML Language Switcher widget by modifying the wp_nav_menu arguments.

// Customize WPML Language Switcher widget output
function wpsnippets_customize_language_switcher_widget( $args ) {
    if ( isset( $args['theme_location'] ) && $args['theme_location'] === 'language-switcher' ) {
        $args['menu_class'] .= ' custom-language-switcher';
        $args['container'] = 'div';
        $args['container_class'] = 'language-switcher-container';
    }
    return $args;
}
add_filter( 'wp_nav_menu_args', 'wpsnippets_customize_language_switcher_widget' );

Explanation: The code uses the wp_nav_menu_args filter to modify the arguments passed to the wp_nav_menu function when rendering the language switcher widget. It checks if the menu location is “language-switcher” and adds custom CSS classes and container elements to the widget output.

Example 3: Displaying WPML Language Switcher Widget Programmatically

This example demonstrates how to display the WPML Language Switcher widget programmatically using the wp_nav_menu function.

// Display WPML Language Switcher widget programmatically
function wpsnippets_display_language_switcher_widget() {
    wp_nav_menu( array(
        'theme_location' => 'language-switcher',
        'menu_class'     => 'language-switcher',
        'container'      => 'div',
        'container_class'=> 'language-switcher-container',
    ) );
}

Explanation: The code uses the wp_nav_menu function to display the language switcher widget programmatically. It specifies the theme location, CSS classes, and container elements for the widget output. This allows developers to place the language switcher widget anywhere in their theme templates.