Add qTranslate flags with a navbar widget

Note :This snippet works only with the Classical style option. More about the theme style option here

A few weeks ago, I showed how to get the qTranslate flags into your menu. While that method is very easy and requires no php knowledge, nor a child theme, it’s a bit of a clunky experience for users. It also uses up valuable menu space and may not fit in with your design.

Here’s another method that’s a bit more complex, but can give you really professional results.


Setting up a new navbar widget

By default, the qTranslate language chooser is set up to be dragged inside a widget area. Customizr’s widgets (like in many other themes) are in the footer and in the sidebars. You may not want sidebars on your pages. And in any case, with Customizr’s front page, sidebars are not even shown at the top of the page.

But you need the language flags to be at the top so that users can see them and switch immediately to their language. What to do?

Well, it turns out that defining your own widget area is actually quite easy. I showed you how to add one after the header here. This time we’ll add a widget area after the navbar, where the flags tuck in nicely.

To define a new widget area, add the following code to your functions.php file in your child theme:

More about the widgets API in WordPress :

Where to copy/paste this code? => in your functions.php file. We strongly recommend you create a child theme. Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

Now you’ve set up the widget area, you’ll need to place it on your page. This is where Customizr’s flexibility comes in, as it has “hooks” throughout the code, on which you can “hook” your code. Add the following code to the code above:

That’s your new widget area set up. When you go to Appearance > Widgets, you’ll find your widget area there, ready to be filled with the qTranslate language chooser.


Adding the qTranslate language chooser to the widget

Go to Appearance > Widgets and do the following:

  1. Drag the qTranslate language chooser over to your new widget area (which you called “Extra Widget After Navbar”)
  2. Add a title, but hide it by checking the “Hide title” checkbox
  3. Select “Image only”
  4. Click “Save”.


Styling the flags

Now comes the cool part. The CSS below will:

  • Move the flags just below the navbar on the right of the page, above the slider
  • Style them horizontally, next to each other
  • (Really cool!) Underline the current language’s flag
  • Move the flags closer together on tablet-sized devices
  • Make the flags sit vertically for smartphones, so they don’t bleed into the logo.

Add these CSS rules to your child theme’s style.css:

You may need to tweak some of these values, depending on any other changes you’ve made. Once you’ve finished, the chosen language’s flag will be underlined as you swap languages — all while staying on the same page. Success!

Related Snippets you may also like

30 thoughts on “Add qTranslate flags with a navbar widget

  • WhiteHat

    That “Underline the current language’s flag” feature indeed is cool! I just needed to do that on a clinet’s website. Thank you very much for saving my day 🙂

  • Moira


    Thank you for a great theme and for the clear instructions! I managed to put my flags nicely on the navbar box inside the widget, but then the social icons dissapear! Is there something I can do about that?

    Best regards,

    • ElectricFeet Post author

      Hi Moira, That shouldn’t happen. Could you post on the Customizr forum and we’ll follow up?

  • ElectricFeet Post author

    Hi Frank. The snippet is written specifically for use with the Customizr theme. In principle it should work for other themes, but you will need to know the theme’s filter “hooks” in order to use it. Specifically the “__after_navbar” filter will be theme-specific.

    You should ask the theme’s developers for the tag of a filter “hook” in their header code, and use the tag to substitute the “__after_navbar” in the example above.

  • Frank

    Hi there,
    this seems to be a really nice solution for me to add the qTranslate Flags above the header or other place. But i have tried it now and it will not work on my site 🙁
    The wigdet is shown under appearence – widgets an i can moce the qTranslate widgets in there, but on my page nothing is shown 🙁

    Is it possible, that my theme cannot manage this? (Autotrader theme by themefuse)


  • gokhan celikag


    Thanks for your prompt reply. All the texts in the website can be in double languages now. However I couldn’t figure out how to change the logo for each specific language. As I have texts embedded into my logo I need to translate these texts as well. I prepared my logos for both languages but could not arrange to integrate them with the site. Is there an easy way to achieve this?

    Thanks in advance,

  • Darina

    Hello. Thank you for the post. But is there any way to add flags QTRANSLATE without specifying it in widgets area.Also I have faced the problem to install widget. It seems I have done everything that were discribed in your post but I didn’t get flags at all.

    Thank you in advance!

  • ElectricFeet Post author

    Hey gokhan, you need to use the qTranslate shortcodes. For example: [:en]English text[:de]German text[:fr]French text

  • gokhan celikag

    Hi Nicolas,

    First of all thanks a lot for creating & sharing a very nice and useful theme.

    I have just applied the qTranslate solution mentioned in this section for double languages of my site. It works pretty good for page contents and titles. However it does not give me the option to translate the secondary texts as the site tittle, tagline and featured pages texts. Could you please help me about translating these texts as well?

    Many thanks in advance.

  • ElectricFeet Post author

    Hi there. Could you post your queries on ? It’s not possible to give good technical support through comments.

    If you give a link to your site as well, it will help people see why your CSS is not working (you may be overriding it with other CSS for example).

    • Iris


      Dave solved the problem for me with giving me this code to be placed in style.css (childtheme).
      .navbar .navbar-inner {
      width: 80%;
      .widget_qtranslate li {
      display: inline-block;
      padding: 0px 2px;
      position: relative;
      top: -20px;
      left: 70%;
      This worked. Topic can be closed for me now!

      • natale

        exactly where did you paste that code? As i tried pasting with the other code, replacing the other one and it does not move from left side. Thnks in advande

        • Nicolas

          Hi Natale, would you mind posting your request in the Support Forum ?
          We are currently trying to collect the support requests in the forum.
          You can reference this snippet in your request.

          Thanks 🙂

  • Iris


    I followed your (clear!) steps and modified functions.php and style.css in my child theme. Unfortunately my flags stay on the left… already tried some changes in the code, but no success so far.
    Some hints how to proceed and get them at the right of my menu?



  • bernard slf


    First, congratulations for your theme Cutomizr and last but nbot least, a clear documentation even if one are not good in english !

    I am using WPML with 7 languages.
    WPML permit to install flags into main menu, or sidebar or footer

    I should like to install selct languages (flags) into the social-block, near by the icons rss …
    How could i do it ?

    So many thanks if somebody can help me.

  • Thomas Lenz

    Hi Electric Feet, thanks for your feedback. Actually, my WP has been updated to 3.8.1, and after reactivating qTranslate today, I stille receive the following message: “The qTranslate Editor has disabled itself because it hasn’t been tested with your WordPress version yet. This is done to prevent WordPress from malfunctioning. You can reenable it by clicking here (may cause data loss! Use at own risk!). To remove this message permanently, please update qTranslate to the corresponding version.” I will follow your advice and post the problem on the respective WP-Forum.

  • ElectricFeet Post author

    Hi Thomas. This is a message that qTranslate generates, not WordPress. Basically, qTranslate is so tightly integrated with the WordPress interface that its author wants to make sure that it doesn’t break when WordPress is upgraded, so it disables part of itself.

    If you have WP 3.8.1 and qTranslate 2.5.39, it should work fine. You say you have WP 3.8, so I suggest you update your WP installation.

    I think you probably haven’t lost anything. All that’s happened is that you cannot see everything like it was before. Once you get qTranslate working again, it should be OK.

    If you have further questions, I suggest you post on the qTranslate WP forum. For example, your issue is discussed at length here: , where they also mention workarounds.

  • Thomas Lenz

    Hi there,

    I have installed qTranslate Version 2.5.39, and I use WP Version 3.8. qTranslate does not work properly, and I get constant warnings that qTranslate has been deactivated by WP since it has not been testet with my version of WordPress. I there anything I can do? Today I tried to reactivate qTranslate, translated an article and as a consequence, my original article was gone. (yes, I should habe saved it…)

  • Michael

    Hi friends, how do I style the content of I put into the new widget box, for example, I want a twitter follow button to float on the right hand side of the screen

  • David Riano

    I would like to have languages names in a dropdown menu on the top right instead of flags.
    Following the instructions above for functions.php I get it in the upper left. But when I input the code above (or modifications of it) in style.css the dropdown menu does not change its position at all, but if they were flags or even languages names, they do change position as instructed above.
    How do I call the languages drowndown menu to change its position? Sorry I am a newbi hitting many walls.
    Thank you so much for this awesome theme!

  • Thierry Liu

    I returned to the original codes “after_navbar” and it works great under firefox, but this language bar doesn’t show under Chrome.
    To have a look :

  • Jurgen Bergman

    is there a way to put the qtranslate flags in the social icon bar (header)? that’s what i would really like to achieve

    Tanks in advance

    • ElectricFeet Post author

      Something like this should work for you:

      It will need styling. Take the CSS in the original post above as a basis, but modify it. In particular, the following CSS properties will not be needed:

      I haven’t checked the rest. It’s left as an exercise for you.

Comments are closed.