Add qTranslate flags to the menu: 2 quick and easy ways 27

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

Here are two solutions for getting qTranslate flags in the menu. They require no child theme nor php knowledge. They both assume that qTranslate 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 qTranslate 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/flags/gb.png" alt="English" >. This picks up the British flag that comes with qTranslate. 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/flags/fr.png" alt="Français" >. This picks up the French flag that comes with qTranslate. 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:

It would have been nice to be able to use qTranslate 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/flags/gb.png" alt="English" >[:fr]<img src="[YourWPDirectory]/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.
  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/flags/gb.png" alt="English" > : English. This picks up the British flag that comes with qTranslate. 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/flags/fr.png" alt="Français" > : Français. This picks up the French flag that comes with qTranslate. Again, you can choose your own.

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


About ElectricFeet

ElectricFeet started using Wordpress for the first time in the summer of 2013. Customizr is such a great theme, it's hard not to get swept up in the fun of discovering new tricks for modding pages with (and for) others on the Wordpress forums. The fun continues :-)


27 thoughts on “Add qTranslate flags to the menu: 2 quick and easy ways

  • Reply
    Surfsyster

    Hi!

    I really like this theme, and qTranslate, but I don’t get them to work together with the new Worpress 3.81. Do you have any tips on how to solve this?

    Thanks in advance!
    Angelica

  • Reply
    Antonis

    Thanks Nicolas, great instruction on how to :) I’m using(trying) qtranslate on XAMPP, but it should be on production soon. The flags fits perfectly on menu!
    Best

  • Reply
    Carolina Rezende

    I was looking for something like this, Thank’s a lot, that worked for me. I spent 2 days looking for this…My WordPress is 3.8.1

  • Reply
    Abdallah Suleiman Katsina

    Hi Guys
    Do you mean i should add all of these to a menu link name? [:en][:fr]
    and what is [YourWPDirectory]? guide me to know this please.
    Thanks

    • Reply
      ElectricFeet Post author

      Hi Abdallah, yes, you need to put in the [:en] ... [:fr] ... text as I specified it above. These are the codes that qTranslate chooses to pick out the language relevant to your page. If you have a site in Italian and Spanish, for example, you would use [:it] ... [:es] ... .

      Use [YourWPDirectory] only if you have chosen to put your WordPress installation in a subfolder—for example, if you can only see your WordPress site by typing http://yoursite.com/wordpress/. But if simply typing http://yoursite.com/ takes you to your WordPress site then you don’t need to use [YourWPDirectory].

  • Reply
    Abdallah Suleiman Katsina

    Hi Mr. Micolas

    I did all my possible best and followed according to the mail you sent to me to get the qtranslate working but it was not possible.
    I send you my site login details by email to help me do it, i can bear the cost or if you use my domain name to itemize everything for me with simple guide.

    Thank you.

  • Reply
    Rebecca

    Hello, thanks for this tutorial. It all worked fine for me, only the CSS modification didn’t work. I pasted the code you suggested, but it didn’t change anything, the flags still look very far apart from each other. Do you have any idea what might have went wrong? Thanks and best regards, Rebecca

  • Reply
    Antonis Kioupliotis

    Hi Nicolas,
    there is a small typo for the navigation level link, it should be <img src="//[YourWPDirectory]/wp-content/plugins/qtranslate/flags/gb.png" instead of <img src="/[YourWPDirectory]/wp-content/plugins/qtranslate/flags/gb.png"…the second slash it's missing :)
    Best
    Antonis

  • Reply
    ElectricFeet Post author

    Hi Antonis, One slash should work, unless you are typing the full http:// … address. You may not even need the /[YourWPDirectory] part, depending on your setup.

    • Reply
      Antonis Kioupliotis

      hi,
      this way works fine for me: a {
      padding: 5px 2px 5px 20px;
      }
      .my-fr-flag > a {
      padding: 5px 20px 5px 2px;
      }
      any idea to solve this?
      thanks!

  • Reply
    Antonis Kioupliotis

    some text is missing…ok, once again: <img src="//xxxxxx.com/wp-content/plugins/qtranslate/flags/gr.png" works fine for me, with only one slash not.
    another problem yet is the code to keep the flags closer. If I use the given code, nothing's changed…

  • Reply
    Vesna

    Great solution, thank you!
    If Y want to stay on the same page when I click the flag, what URL should I use?
    For example: I am on the page CONTACT and if I click EN flag, it throws me HOME… Obvious, because my URL is frontpage in english. What should I do to stay on CONTACT page, but in chosen language?

  • Reply
    Christoph

    Hello!

    I did everything you said and everything seems to work fine.
    Only one thing: The language flags are not showing up! I need those flags urgently. Can you help me?

    I posted the link to my project. Would be great if you can tell me what I did wrong.

    Thank you,
    Chris

  • Reply
    Stephanie

    Hi,
    I am using mqtranslate because it’s up to date. My theme does not have a widget area and I cannot use the WP-Menu panel. I need to stay with the one provided by the theme so no way I can use your workaround.
    Is there anything I can do to put the language switcher where I want it? For instance after the header?
    What code would I have to use??
    Thanks
    Stephanie

  • Reply
    Kerstin

    Hi,
    thank you so much for this little tutorial! Unfortunately, my flags won’t show up, there’s only the name of the link. What can I do?
    Thanks,
    Kerstin

    • Reply
      ElectricFeet Post author

      Hi Kerstin. Could you post on the WordPress forum with a link to your site? wordpress.org/support/theme/customizr#postform

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">