Add qTranslate flags with a navbar widget 21


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 : http://codex.wordpress.org/Widgets_API

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!


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 :-)


21 thoughts on “Add qTranslate flags with a navbar widget

  • Reply
    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

    • Reply
      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.

  • Reply
    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 : kreega.com.
    Thanks.

  • Reply
    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!

  • Reply
    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

  • Reply
    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…)

  • Reply
    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: http://wordpress.org/support/topic/when-will-the-qtranslate-update-for-wp-38-be-available-1?replies=43 , where they also mention workarounds.

  • Reply
    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.

  • Reply
    bernard slf

    Hello

    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.

  • Reply
    Iris

    hi,

    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?

    rgds

    Iris

    • Reply
      Iris

      Hi,

      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!
      thx

  • Reply
    ElectricFeet Post author

    Hi there. Could you post your queries on http://wordpress.org/themes/customizr ? 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).

  • Reply
    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.
    Regards,
    Gokhan

  • Reply
    ElectricFeet Post author

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

  • Reply
    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!

  • Reply
    gokhan celikag

    ElectricFeet,

    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,
    Gokhan

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="">