Add qTranslateX flags to the menu: 2 quick and easy ways

Here are two solutions for getting qtranslateX flags in the menu. They require no child theme nor php knowledge. They both assume that qTranslateX is installed.

They are simple, require no coding knowledge and use only the WordPress Menu screens. However, this simplicity has a cost. Because they don’t use the qTranslateX language chooser to choose the language, when you select a flag, a user will be sent to the home page of the relevant language. Update: Tim suggests a way around this limitation on the WordPress Customizr forum. Thanks Tim!

Check back here next week (or thereabouts) for a more complex implementation, which does require php knowledge, puts the flags in the header (not the menu), and which will take you to the same page in another language.

GB-English and French are used below, for illustration.

Two languages in the menu:

1. Go to your WordPress dashboard and select Appearance > Menus.
   • If you already created a menu, 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 for this (Menu settings > Main menu).
2. On the left side of the page, there are 3 dropdowns: Pages/Links/Categories. Choose Links.
3. Make a link to example.com (any domain will do — we will be changing it), with link text English. Add it to the menu.
4. Make another link to example.com, with link text Français. Add it to the menu.
5. Cool tip:At the top of the screen, you’ll find a dropdown called “Screen Options”. Click it and make sure that “CSS Classes” is checked. Later, this will allow you to style the menu-items individually.
6. Open the English menu-item:
   • For the url, enter the link to your English pages (e.g /[YourWPDirectory]/en/)
   • For the navigation label, enter <img src=”/[YourWPDirectory]/wp-content/plugins/qtranslate-x/flags/gb.png” alt=”English” >. This picks up the British flag that comes with qTranslateX. You can choose your own here instead, if you want.
   • For the CSS Classes, enter my-en-flag.
7. Open the Français menu-item:
   • For the url, enter the link to your French pages (e.g /[YourWPDirectory]/fr/)
   • For the navigation label, enter <img src=”/[YourWPDirectory]/wp-content/plugins/qtranslate-x/flags/fr.png” alt=”Français” >. This picks up the French flag that comes with qTranslateX. Again, you can choose your own.
   • For the CSS Classes, enter my-fr-flag.

Save your menu e voilà, you now have two flags. They will be spaced the same way as your menu-items, which will probably make them look too far apart. You can alter the CSS to move them nearer to each other. For example, you can add the following to your Custom CSS in Appearance > Customize:

.my-en-flag > a {
	padding: 5px 2px 5px 20px;
}
.my-fr-flag > a {
	padding: 5px 20px 5px 2px;
}

It would have been nice to be able to use qTranslateX shortcodes in the urls, so as to have just one menu-item, displaying only one flag — the en flag if you’re on the French site and the fr flag if you’re on the English site — but unfortunately WordPress strips them out. Solution 2 (below) resolves this by having a dropdown instead.

Two or more languages in the menu, with dropdown

1. Go to your WordPress dashboard and select Appearance > Menus.
   • If you already created a menu, 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 for this (Menu settings > Main menu).
2. On the left side of the page, there are 3 dropdowns: Pages/Links/Categories. Choose Links.
3. 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.
4. Make another link to example.com (any domain will do — we will be changing it), with link text English. Add it to the menu.
5. Make another link to example.com, with link text Français. Add it to the menu.
6. Drag the English and Français menu-items slightly to the right, so they become sub-menus of the language-chooser menu-item.
7. Open the “Choose another language/Choisir une autre langue” menu-item
   • For the url, enter #
   • For the navigation label, enter [:en]<img src=”[YourWPDirectory]/wp-content/plugins/qtranslate-x/flags/gb.png” alt=”English” >[:fr]<img src=”[YourWPDirectory]/wp-content/plugins/qtranslate-x/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.
8. Open the English menu-item:
   • For the url, enter the link to your English pages (e.g /[YourWPDirectory]/en/)
   • For the navigation label, enter <img src=”/[YourWPDirectory]/wp-content/plugins/qtranslate-x/flags/gb.png” alt=”English” > : English. This picks up the British flag that comes with qTranslateX. You can choose your own here instead, if you want.
9. Open the Français menu-item:
   • For the url, enter the link to your French pages (e.g /[YourWPDirectory]/fr/)
   • For the navigation label, enter <img src=”/[YourWPDirectory]/wp-content/plugins/qtranslate-x/flags/fr.png” alt=”Français” > : Français. This picks up the French flag that comes with qTranslateX. Again, you can choose your own.

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