Add a Polylang dropdown with a navbar widget


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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:

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, nor should you put a copy of it into your child theme.

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

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.


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



8 thoughts on “Add a Polylang dropdown with a navbar widget

  • Gary

    Hi

    Firstly, thanks for creating and maintaining this theme. I know only very basic HTML and CSS and no PHP but have been able to muddle along mostly fine with this great theme.

    I’ve added an extra widget area for the polylang switcher as in this post and it works great (the site is at http://ied.suwon.ac.kr/). I’d like to also add some extra widgets (a text widget with an inline menu to a few links and maybe also a search box) but when I do, they display vertically. Can you please let me know how how I can make only widgets in this new widget area display horizonally?

    Many thanks.

  • Isabelle Larrodé

    Thanks for this great snippet

    I use this snippet to place the selector above my navbar. It worked well untill the last update of Polylang.

    To make it work again, change in the css file : #lang_choice–> #lang_choice_polylang-2
    new code is

  • Chris Taylor

    Works really well in chrome but too much discrepancy in explorer and firefox (both the same) to iron out with css.

Comments are closed.