WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
qtranslate - How to add language switcher button in menu bar (18 posts)

  1. creativebox
    Member
    Posted 3 months 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 3 months 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 3 months ago #

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

  4. acub
    Member
    Posted 3 months ago #

    Good job putting it all together, ElectritFeet.

    Chapeau!

  5. chappie
    Member
    Posted 3 months ago #

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

  6. ElectricFeet
    Member
    Posted 3 months 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 3 months 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 3 months 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 3 months 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 3 months 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 3 months ago #

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

  12. creativebox
    Member
    Posted 3 months 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 3 months 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 3 months ago #

    Thank you very much @ElectricFeet. Works perfect!

  15. iLucato
    Member
    Posted 2 months 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 2 months 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 2 months ago #

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

  18. ElectricFeet
    Member
    Posted 2 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic