Multi-Language Menus in WordPress

There are different plugins available to implement multi-language support in WordPress. I usually go with qtranslate for my sites which is a great plugin. My latest site is not a blog but more of an online shop based on eshop. qtranslate integrates well with eshop and the theme I am using. Despite the good integration I had 2 problems:

Problem 1: Image in menu which does not break multi-language support.
I wanted a shopping cart symbol in my primary menu instead of a text link. At first I added a custom link with an <img> tag to my primary menu and linked to the shopping cart page. This works in general but breaks the multi-language support because the link to the shopping cart page is a hard link where the &lang argument is not appended to th URL. I then removed the custom link from my menu and added the shopping cart image link via a filter in my theme’s function.php:

add_filter('wp_nav_menu_items','add_shoppingcart_to_menu', 10, 2);
function add_shoppingcart_to_menu ($nav, $args) {
    $args = (array)$args;
    if ( $args['theme_location'] != 'primary-menu' )
        return $nav;

    $nav.="<li class='menu-item menu-item-cart'><a href='".get_page_link(5)."'><img src='".esc_url(get_bloginfo('stylesheet_directory').'/images/shopping_cart.png')."' alt='".__('Shopping Cart','eshop')."'></a></li>";

    return $nav;
}

The code above hooks into wp_nav_menu_items filter which is defined in wp-includes/nav-menu-template.php. This filter allows us to add custom menu entries. The parameters are explained as follows:

1. The name of the filter hook
2. The name of our function
3. The priority, an optional integer argument that can be used to specify the order in which the functions associated with a particular action are executed (default: 10). Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
4. The accepted arguments, an optional integer argument defining how many arguments your function can accept (default 1), useful because some hooks can pass more than one argument to your function.

I accept 2 function parameters because the theme location (primary menu or secondary menu) is defined in the second function parameter $args. The image links to my shopping cart page with ID 5.

Problem 2: qtranslate language selector inside primary menu
Since I don’t have any widgets in my theme I wanted the language selector in my primary menu. Nothing fancy, just 2 text links for German and English. The best way to do that was to extend my menu filter from above with a custom language selector. The code was taken from the qtranslate widget. I modified it to integrate it seamlessly in my menu:

add_filter('wp_nav_menu_items','add_shoppingcart_to_menu', 10, 2);
function add_shoppingcart_to_menu ($nav, $args) {
    $args = (array)$args;
    if ( $args['theme_location'] != 'primary-menu' )
        return $nav;

    global $q_config;
    $nav.="<li class='menu-item menu-item-cart'><a href='".get_page_link(5)."'><img src='".esc_url(get_bloginfo('stylesheet_directory').'/images/shopping_cart.png')."' alt='".__('Shopping Cart','eshop')."'></a></li>";

    foreach(qtrans_getSortedLanguages() as $language) {
        $css_class = 'menu-item';
        if($language == $q_config['language'])
            $css_class .= '-active';
        $nav.='<li class="'.$css_class.'"><a href="'.qtrans_convertURL($url, $language).'" title="'.$q_config['language_name'][$language].'">'.strtoupper($language).'</a></li>';

    }

    return $nav;
}

The code iterates through the activated languages and displays them inside the menu. The active language is marked as active via CSS.

Check out the site at: www.evelyntoomistu.com