WordPress.org

Forums

Customizr
[closed] qtranslate - How to add language switcher button in menu bar (35 posts)

  1. creativebox
    Member
    Posted 1 year ago #

    Hi guys,

    How can I add that button in menu bar? I'm not a developer and only see the option with the qtranslate widget, but think that's not very user friendly. Is there an easy way to put lang switch buttons in menu? Thanks for your suggestions.

  2. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  3. ElectricFeet
    Member
    Posted 1 year ago #

    Thanks to mods for correcting the post and happy holidays :-)

  4. acub
    Member
    Posted 1 year ago #

    Good job putting it all together, ElectritFeet.

    Chapeau!

  5. chappie
    Member
    Posted 1 year ago #

    Wow! Now that's what I call a post.

  6. ElectricFeet
    Member
    Posted 1 year ago #

    @acub A "chapeau" from a grade IV php guru just made my Christmas. This was my first php filter too, so celebrations all round :-)

  7. creativebox
    Member
    Posted 1 year ago #

    ElectricFeet,

    I can not express how much I appreciate your explanation. That's a tutorial!
    I chose the third option and here is the result: http://www.creativebox.bg. Everything works great!
    I noticed a problem when browsing with IE. Scroll bar on the right is over the lang switch button and only a part of it could be seen: http://www.creativebox.bg/docs/scroll.jpg. Can anything be done about this? And another thing: can I enlarge the size of the flags?

    Thank you again for your mega useful post!

  8. ElectricFeet
    Member
    Posted 1 year ago #

    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?

  9. ElectricFeet
    Member
    Posted 1 year ago #

    By the way, I discovered a really neat feature in the menu screens in WordPress last night. In solution 1, above, instead of finding out the menu number of the flags and altering the CSS using #menu-item-14 etc. (which is prone to error, as they may change in time), you can do the following:

    • Go to Appearance > Menus
    • Click "Screen options" (top right)
    • Check the "CSS Classes" box
    • When editing your menus, add specific classes in the "CSS Classes (optional)" field. For example, in the English menu item, add the class MyEnglishMenuItem; In the French menu item, add the class MyFrenchMenuItem; etc.

    Now you can style your flags in the menu with

    .MyEnglishMenuItem > a {
     padding: 5px 2px 5px 20px;
    }
    .MyFrenchMenuItem > a {
     padding: 5px 20px 5px 2px;
    }

    etc. Makes it easier to remember what you are doing 3 weeks later :-)

  10. creativebox
    Member
    Posted 1 year ago #

    I found a little bug using solution 3. When you try to click on the upper sub menu item, there is something like hidden unclickable area (see http://www.creativebox.bg). That's when you are not logged as wp admin, when you are logged there is no such problem. Is there any solution for this?

  11. ElectricFeet
    Member
    Posted 1 year ago #

    Could you explain what you mean by the "upper sub menu item"?

  12. creativebox
    Member
    Posted 1 year ago #

    Please open http://www.creativebox.bg, click on Creative Box menu item, and when you hover with your mouse pointer on the first submenu item 'About Us', you'll see this unclickable area. Same on Projects ->Theatre in advance 2013 and Gallery ->Theatre in advance 2013. I hope that you'll understand me.

  13. ElectricFeet
    Member
    Posted 1 year ago #

    Good catch! You're absolutely right. The ul that the flags are sitting in is above the menu dropdowns. The CSS should instead be `ul.qtrans_language_chooser {
    width:100%;
    padding:0px;
    margin:0;
    list-style-type:none;
    position:absolute;
    top: 106px;
    }

    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;
    }
    }`
    That is, delete z-index:201; from the first CSS rule.

    Thank you!

  14. creativebox
    Member
    Posted 1 year ago #

    Thank you very much @ElectricFeet. Works perfect!

  15. iLucato
    Member
    Posted 1 year ago #

    Hi EletricFeet,
    By doing your option 1 or 2, and entering an URL... "For the url, enter the link to your English pages (e.g /[your root directory]/en/)"
    But by doing this it sends the page to the homepage instead of keeping in the page I was and just changing the language as the Select Language widget does. I wonder how to create a WP menu for two languages likewise language selector widget where by selecting a language it gets to change the language and keep on the same page/content instead of sending to the home page or other page.

    How do I get to create a menu item in WP to work this way. I mean, just switch the language and keep on the same page instead of sending to the home page?

    Thanks.

  16. ElectricFeet
    Member
    Posted 1 year ago #

    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.

  17. iLucato
    Member
    Posted 1 year ago #

    Thanks EleticFeet, I'll check this out. Any news/doubt, I post back here.

  18. ElectricFeet
    Member
    Posted 1 year ago #

    OK, but create a new thread, because this thread applies to the menu bar, not in a widget.

  19. Tim Morley
    Member
    Posted 10 months ago #

    iLucato asked: "I wonder how to create a WP menu for two languages [...] where by selecting a language it gets to change the language and keep on the same page/content instead of sending to the home page..."

    You can do is like this:

    • In Settings —> Languages —> Advanced settings, set the "URL modification mode" to the first option, which is "Use Query Mode (?lang=en)".
    • Scroll half way down the page and click the red "Save changes" button.
    • Now follow the instructions above for Solution 2, but for each of the menu items, instead of /[your root directory]/en/ for the URL, just enter ?lang=en, replacing en with whatever language codes you're using.

    Et voilà ! The language switcher in the main menu allows you to switch languages on any page without being thrown back to the homepage.

    You can see it in action on the (as yet half built) site here: http://strilo.co.uk/123soleil. If you click on one of the (mostly still blank) pages from the menu at the top, you can then switch languages and see that you stay on the same page.

    Hope that helps.

  20. ElectricFeet
    Member
    Posted 10 months ago #

    Thanks Tim, that looks like a really neat trick!

  21. BigMacOnTrack
    Member
    Posted 10 months ago #

    This might be a silly question, but what is my root directory? Ive tried a couple things but have not been able to get the language changes working with it. Thanks for any help

  22. ElectricFeet
    Member
    Posted 10 months ago #

    When I wrote up the snippet based on the above, I updated the terms to make them more understandable.

    Basically, it's the WP site address. Something like http://example.com or http://example.com/wordpress

    For others coming to this thread: things have moved on in the last few months. Since this draft, the following snippets/docs are available:

    I was going to write an article on getting Polylang's flags into the menu, but I don't need to —it's very clever and adds itself as an option in Appearance > Menus, so it's a piece of cake to add.

  23. BigMacOnTrack
    Member
    Posted 10 months ago #

    Thanks for the great reply. I did try the site address, but adding "/en/" to the end of it didnt work to translate the page, but rather loads an 404 error page.
    The qt buttons work within the sidebar, as is the standard form of implementing the qt translation. But when adding them to the menu (flag icons work), I have not been able to turn them into a working link to switch the site language. (I use the term "translate", but I am aware that it simply switches between 2 language texts)

    Do you have any idea whats going on?

  24. ElectricFeet
    Member
    Posted 10 months ago #

    Site link?

  25. BigMacOnTrack
    Member
    Posted 10 months ago #

    --

  26. ElectricFeet
    Member
    Posted 10 months ago #

    Err, this is the Customizr forum and you're using a different theme. As you paid for it, you should use their support options: http://www.sktthemes.net/forums/

    However, maybe you need to look at Settings —> Languages —> Advanced settings -> "URL modification mode".

    Note that the /en/ link will work when you are on your /de/ pages and vice-versa. So you will have to set up your languages before being able to switch to them.

  27. BigMacOnTrack
    Member
    Posted 10 months ago #

    Thats explains it, too bad I cant use your guide to implement the icons in the menu. You had a good way of explaining. Im looking at the advanced options right now

  28. ElectricFeet
    Member
    Posted 10 months ago #

    Thanks :-)

    The first question to ask your theme authors is what language plugins they support. The main ones are qTranslate, mqTranslate (a recent more updated version of qTranslate) and Polylang. Use one that the theme authors say will work with the theme.

    Good luck!

  29. BigMacOnTrack
    Member
    Posted 10 months ago #

    I do have mq installed and working well. Its finding the right URL to manually add in a translate icon thats giving me a challenge.

  30. ElectricFeet
    Member
    Posted 9 months ago #

    But you paid for that theme. The theme authors should help you... http://www.sktthemes.net/forums/

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic