Add a Polylang dropdown with a navbar widget

A couple of months ago, I showed how to use the Polylang language plugin with Customizr.

Polylang is easy to set up and use. It even has an option for you to include flags or language names (or both), directly to the menu, with no coding.

However, it doesn’t give you an option to put a dropdown in the menu/header area. This snippet shows you how to do this, using a navbar widget

Setting up a new navbar widget

By default, the Polylang Language Switcher—which gives you a “dropdown” option—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.

If you need the Language Switcher to be at the top so that users can see it easily and switch immediately to their language, what can you 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 you can place the Language Switcher dropdown.

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

// Adds a widget area to house a Polylang dropdown. 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 Polylang Language Switcher.

Adding the Polylang Language Switcher to the widget

Go to Appearance > Widgets and do the following:

1. Drag the Polylang Language Switcher over to your new widget area (which you called “Extra Widget After Navbar”)
2. Select “Displays as dropdown”
3. Click “Save”.

Styling the dropdown

You can now style the dropdown. The CSS below will move the dropdown inside the navbar on the right of the page. Add these CSS rules to your child theme’s style.css:

/* Add dropdown to navbar, see also accompanying php */
#lang_choice {
    position: absolute;
    right: 20px;
    top: 90px;
    width: 80px;
    z-index: 250;
}
@media (max-width: 979px) {
    /* Shift dropdown down for responsive navbar*/
    #lang_choice {
    /* Change this, depending on your site */
        top: 130px;
    }
}
@media (max-width: 480px) {
    /* Shift dropdown for smaller screens*/
    #lang_choice {
    /* Change this, depending on your site */
        top: 130px;
    }
}

You may need to tweak some of these values, depending on any other changes you’ve made / the length of your tagline / size of your logo etc.