Polylang language menu

This is a bilingual site: Finnish and English. There are multiple language plugins for WordPress and this site uses Polylang. Polylang is very nice and useful, but lacks the menu type so common in Finland: Finnish | Swedish | English. Writing a standalone plugin for such a menu turned out to be complicated, so this article will guide you to create it by hand.

The language menu requires changes to the theme. The best starting point is to create a child theme and there are multiple guides available to do that. When you have a child theme, add this to the style.css file:

/* Languages horizontally */ 
#language ul { margin: 0; padding: 0; } 
li.lang-item { list-style-type: none; display: inline; } 
li.lang-item:before { content: " | "; } 
li.lang-item:first-child:before { content: none; }

The functions.php file in the theme needs a definition for a new widget area:

register_sidebar( array(
        'name'          => 'Language',
        'id'            => 'language',
        'description'   => 'Polylang switcher area.',
        'before_widget' => '<div id="language">',
        'after_widget'  => '</div>'
) );

You need to add the widget area defined above to the header.php in the spot of your choice:

<aside id="language-nav" role="navigation">
    <?php dynamic_sidebar( 'language' ); ?>
</aside><!-- .language-nav-widgets -->

Finally add Language Switcher widget to Language widget are in WordPress Dashboard.

You can align the widget area to the right by adding for example this code to the style.css:

aside#language-nav {
  text-align: right;
  margin-left: auto;
}