Add qTranslate flags with a navbar widget

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:

// Adds a widget area to house qtranslate flags. See also accompanying css.
if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Extra Widget After Navbar',
		'id' => 'extra-widget',
		'description' => 'Extra widget after the navbar',
		'before_widget' => '<div class="widget %2$s" id="%1$s">',
		'after_widget' => '</div>',
		'before_title' => '<h2>',
		'after_title' => '</h2>'
	));
}

More about the widgets API in WordPress : http://codex.wordpress.org/Widgets_API

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:

// Place the widget area after the navbar
add_filter ('__after_navbar', 'add_my_widget');
function add_my_widget() {
	if (function_exists('dynamic_sidebar')) {
	dynamic_sidebar('Extra Widget After Navbar');
	}
}

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:

/* Add flags to header, see also accompanying php */
ul.qtrans_language_chooser {
    width:20%;
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: absolute;
    top: 106px;  
    right: 0;
} 

ul.qtrans_language_chooser a {
    float: right;
    margin: 0 4px;
    padding: 0 2px 4px 2px;
    background-position: center;
} 

ul.qtrans_language_chooser > .active > a {
    border-bottom: 1px solid #5a5a5a;
} 


@media (max-width: 979px) {
    /* Shift flags up for responsive navbar*/
    ul.qtrans_language_chooser {
        top: 16px;
    } 
    /* and move them closer together*/
    ul.qtrans_language_chooser a {
        margin: 0 2px;
        padding: 0 1px 4px 1px;
    } 
}
@media (max-width: 480px) {
    /* Force wrapping of flags on small screens for vertical display*/
    ul.qtrans_language_chooser {
        width: 22px;
    } 
}

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!