qtranslate – How to add language switcher button in menu bar

Here are two solutions for flags in the header. They are simple, require no coding knowledge and use only the WordPress Menu screens. They don’t use the qTranslate code to choose the language, so the downside of the simplicity is that when you select a flag, you will be sent to the home page of the relevant language.

I will also add a way to get the qTranslate functionality into the header (near the menu) below (with credit to @acub in previous posts). GB-English and French are used here, for illustration.

Solution 1: Two languages in the menu; no child theme or php knowledge necessary (assumes qTranslate is installed)

• Go to your WordPress dashboard and select Appearance > Menus.

• If you already have a menu here, select it. You will simply be adding to it.
• If you don’t have a menu here, you’ll need to create a new one, add all your pages, and make it your main menu — there’s a checkbox at the bottom (Menu settings > Main menu).

• On the left side of the page, there are 3 dropdowns: Pages/Links/Categories. Choose Links.
• Make a link to example.com (any domain will do — we will be changing it), with link text English. Add it to the menu.
• Make another link to example.com, with link text Français. Add it to the menu.
• Open the English menu item

• For the url, enter the link to your English pages (e.g /[your root directory]/en/)
• For the navigation label, enter <img src="/[your root directory]/wp-content/plugins/qtranslate/flags/gb.png" alt="English" >
• Open the Français menu item
• For the url, enter the link to your French pages (e.g /[your root directory]/fr/)
• For the navigation label, enter <img src="/[your root directory]/wp-content/plugins/qtranslate/flags/fr.png" alt="Français" >

Save your menu e voilà, you have two flags. They will be spaced the same way as your menu items, which will probably make them look too far apart. If you know how to use firebug, or can locate them in “view source” for your page, then you can find out their menu number. With this number, you can alter the CSS to move them nearer to each other. For example:

#menu-item-14 > a {
 padding: 5px 2px 5px 20px;
}
#menu-item-15 > a {
 padding: 5px 20px 5px 2px;
}

It would have been nice to be able to use qTranslate shortcodes in the url string, so as to have just one menu item, but unfortunately WordPress strips them out. Solution 2 (below) resolves this by having a dropdown instead.

Solution 2: Two or more languages in the menu; no child theme or php knowledge necessary (assumes qTranslate is installed)

• Go to your WordPress dashboard and select Appearance > Menus.

• If you already have a menu here, select it. You will simply be adding to it.
• If you don’t have a menu here, you’ll need to create a new one, add all your pages, and make it your main menu — there’s a checkbox at the bottom (Menu settings > Main menu).

• On the left side of the page, there are 3 dropdowns: Pages/Links/Categories. Choose Links.
• Make a link to example.com (any domain will do — we will be changing it), with link text [:en]Choose another language[:fr]Choisir une autre langue. Add it to the menu.
• Make another link to example.com, with link text English. Add it to the menu.
• Make another link to example.com, with link text Français. Add it to the menu.
• Drag the English and French menu items slightly to the right, so they become sub-menus of the language chooser menu item.
• Open the “Choose another language/Choisir une autre langue” menu item

• For the url, enter #
• For the navigation label, enter [:en]<img src="/wordpress/wp-content/plugins/qtranslate/flags/gb.png" alt="English" >[:fr]<img src="/wordpress/wp-content/plugins/qtranslate/flags/fr.png" alt="Français" >
• This will ensure that when you are in the English page, the gb flag will show, but when you are in the French page, the fr flag will show.

Open the English menu item

• For the url, enter the link to your English pages (e.g /[your root directory]/en/)
• For the navigation label, enter <img src="/[your root directory]/wp-content/plugins/qtranslate/flags/gb.png" alt="English" > : English

Open the Français menu item

• For the url, enter the link to your French pages (e.g /[your root directory]/fr/)
• For the navigation label, enter <img src="/[your root directory]/wp-content/plugins/qtranslate/flags/fr.png" alt="Français" > : Français

Save your menu and your language dropdown in the menu should be complete.

Solution 3: All available languages near the menu; child theme and php necessary (assumes qTranslate is installed)

• In your child theme, add the following to your functions.php:

  add_filter ('__after_header', 'qtrans_lang_chooser');
  function qtrans_lang_chooser() {
  	if (function_exists('qtrans_generateLanguageSelectCode')) {
  		ob_start();
  		echo qtrans_generateLanguageSelectCode('image');
  		$output = ob_get_contents();
  		ob_end_clean();
  		echo $output;
  	}
  }

This tells WordPress to insert your own html, generated by your own new function “qtrans_lang_chooser” into the page just after the header. This “qtrans_lang_chooser” function checks if the qTranslate language chooser function exists (i.e. you have qTranslate installed) and, if so, puts it in your new html area.

• Save the functions.php and look at your page. At this stage, you will have an ugly bulleted list of flags just above the slider.
• Now add the following to your style.css:

  ul.qtrans_language_chooser {
      width:100%;
      padding:0px;
      margin:0;
      list-style-type:none;
      position:absolute;
      top: 106px;
      z-index:201;
  } 
  
  ul.qtrans_language_chooser a {
      float:right;
      width:20px;
      height: 12px;
      margin:0 2px;
      display:inline;
      z-index:201;
  } 
  
  ul.qtrans_language_chooser > .active {
  display:none;
  } 
  
  @media (max-width: 979px) {
  
      ul.qtrans_language_chooser {
      top: 16px;
        }
  }

This moves the flags to just below the navbar box in full-screen mode, and to the top-right of the page in responsive mode (< 979px). Note that it may look messy if you are logged on to WordPress, as the WordPress admin bar shifts the page down (but not the flags).

The ul.qtrans_language_chooser > .active hides the flag for the current language, so you will only see one flag if you have 2 languages; 2 flags if you have 3 languages etc.

Save the style.css and you should have flags at the top of the page, nicely formatted.

Note that if you also have the qTranslate language chooser loaded elsewhere in the page (e.g. in the footer) this will alter the styling of that language chooser as well, so you will need to differentiate your CSS more carefully.

I’ve also noticed that if you have the qTranslate language chooser loaded elsewhere in the page, the sub-menu items sometimes don’t drop-down properly.

I therefore recommend that if you are implementing this solution, you use this as your only language switcher. From a user perspective, a language chooser in the footer widget area is not particularly useful, as the user will probably already have left the page due to language problems before they get to the footer. And if you have the language chooser high up in the sidebar, then you probably won’t need another in the menu, anyway.

So there you are! Three ways to add qTranslate flags to the top of your page / menu.

Please let me know if this works for you (and which solution you used). This took a long time to write up, and I may have made some errors.

If all is OK, I’ll add this to the snippets on themesandco.com.

Good job putting it all together, ElectritFeet.

Chapeau!

@acub A “chapeau” from a grade IV php guru just made my Christmas. This was my first php filter too, so celebrations all round 🙂

For the flags, you can simply point to images of larger .png files. (I wouldn’t enlarge the qTranslate ones, as they will probably look a bit odd if they’re stretched.)

For the scroll bar problem, that looks like particularly bad behaviour on the part of IE. It’s also cutting off the Customir box, which shouldn’t happen, either. Are you sure there’s not something else going on with your IE setup?

You can’t do this in the menu with the method above. You need to add a widget. I wrote a snippet to do this here.