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:
- The name of the filter hook
- The name of our function
- 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.
- 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