Multilingual WordPress – Language Switcher plugin

It’s been a while, but here I am at last, continuing with the next instalment in this series of articles!

In the previous article we looked at an overview of what’s involved in setting up a multilingual blog.

In this article we shall look at installing the Language Switcher plugin. As mentioned last time, there are alternatives to this plugin, but this is a plugin I know well, is kept up to date and works.

Installing Language Switcher

Simply download the plugin from here and install the Language Switcher in exactly the same way as any other WordPress plugin. The plugin file itself (as at version 1.18) is installed directly in your plugin directory. The plugin also comes with a folder containing images of flags, and this too should be installed into your plugin folder.

Once uploaded, activate the plugin via Dashboard>Plugins.

Setting up the Language Switcher Options page

You should now set up the plugin’s Options page, available in Dashboard>Settings>Language Switcher.

Click image to view larger version.

Throughout this series of articles I am assuming that we are setting up an English/French site. As can be seen in the above sceenshot, various options have been entered as follows:

Default language ISO code:

This is the default language for your site. In this case, because the default language of our site is English, I’ve entered the en ISO code.

Blog Languages:

This is where we enter the language codes for our two languages, English and French, and also specify the way dates will be displayed in both languages, and also a default text to be displayed when a Post/Page Loop doesn’t find any articles.

You will notice that there is a specific format for the language codes, each code comprising two elements: a two character lowercase language code, eg en for English, and a two character uppercase Country code (or Locale code, to be precise), eg FR for France. This latter code can be important in some languages, for example Portuguese, where there are some differences between the language of Portugal and Brazil. If you’re working with languages other than English and French, a list of these two codes can be found at WordPress in Your Language on the Codex.

Force Language Switcher URL suffixes to use ? or &

Next, we have a checkbox for overriding “Pretty Permalinks”. Personally, on several installations on different servers, I’ve never found the need to check this box and my permalinks have worked fine. However, if you do get persistant “Page Not Found” errors, try checking this box to override your Permalink settings.

Force Language Switcher to put a language URL suffix on every link

The next option is a checkbox for forcing a language URL suffix to be added to all permalink URLs. By default, the plugin does not automatically do this. This means that, by default (ie unchecked), some URLs for pages in the default language will be shown “normally”, ie www.mydomain.com/postname without the Language Switcher URL suffix.

My advice is to check this box and force the addition of the Language Switcher URL suffix on every page. Why? If you don’t do this, it is possible in some circumstances for a particular page to have two URLs:

• www.mydomain.com/postname
• www.mydomain.com/postname/language/en

Clearly, this could affect your search engine page rank, hence my advice to check this box.

URL slug for Language Switcher:

Finally, we have an option for how “Pretty” permalinks will be displayed. As with setting up your normal WordPress permalinks, a little thought is needed before you commit to an option here, so that you don’t find that you need to change the permalinks further down the road – with all the potential issues that can cause for your search engine ranking and your users’ bookmarks. In other words, give it some thought, set it up and then leave it alone!

By default, Language Switcher adds this suffix to your URLs: language/ followed by the language code, eg language/en for and English page, or language/fr for a French page. Personally, I always change this to setting to /lang as this makes for a slightly shorter URL.

Unfortunately there is no way for putting this suffix elsewhere in the permalink URL, and it always appears as a suffix at the end of the URL. (In my opinion, putting the Language Switcher suffix between the domain name and postname would be more logical, ie www.mydomain.com/lang/en/postname. Unfortunately, the WordPress permalink rewrite rules don’t permit this.)

How the plugin works

Language Switcher provides numerous filters for filtering the output of WordPress and determining which language to display the content in. I’m not going to describe this in detail as you don’t need to know all the technical aspects of the plugin code in order to use the plugin. However, the key elements of this are as follows:

• Detects the user’s browser language and automatically switches to that language (if specifed in the plugin’s Options page and content exists in that language) or, alternatively, displays content in the specified default language.
• Filters all standard WordPress content including Category names, Tag names, Post/Page titles etc.
• Provides a way for users to manually switch language via a template tag function which can be added to your theme files, eg the header.php.

How to create multilingual content

In order for the plugin to switch language, you must create your content in the two languages when writing Posts/Pages. This is done by adding simple tags to enclose the different language content. The tags are entered in this format:

• [lang_en]…blah blah…[/lang_en] for enclosing English content
• [lang_fr]…blah blah…[/lang_fr] for enclosing French content

The important points to note are:

1. Always use an opening and closing lang tag
2. The tags use the relevant language ISO code mentioned earlier, and which must be already set up in the plugin’s Options page.

Creating a multilingual Post

This screenshot shows how the language tags are used to create the multilingual content when writing a Post:

Click image to view larger version.

Note that I do not use a paragraph break between the closing [/lang_en] and opening [lang_fr] tags. This is important to avoid WordPress adding an unwanted empty paragraph before the French text. You will also notice that the language tags have been used to create two language versions of the Post Title. The plugin uses thes etags to determine which content to serve depending on the language selected by the visitor to your site.

Categories, Tags, Links etc

Exactly the same concept applies when creating Categories, Tags, Links, etc. Simply use the language tags to enclose the category, tag or link name. Note that the plugin takes care of the slug – though this can be edited in the normal way.

Allowing Users to select the language

The Language Switcher provides a neat way of presenting a list of available languages somewhere on your site, using the following function inserted into an appropriate place in your theme (perhaps header.php or sidebar.php):

The function takes three arguments:

• Flags: true or false (true means to use flags to indicate languages)
• Text: true or false (true means to use text language names)
• HTML Tag: (Language Switcher 1.10 and later versions only) HTML tag to enclose each flag/language name in — enclose in single-quotes.

Therefore the example here:

doesn’t display flags (false), does display language names as text (true), and wraps each language name in a <li> tag.

As mentioned above, the best place to display this list is in header.php or sidebar.php.

Next instalment…

The plugin will now deal with all multi-lingual content created via the WP Dashboard, for example: Posts, Pages, Categories, Tags etc. However, what we’ve looked at so far does not deal with text which is hardcoded into your existing theme template files. Therefore, in the next article (and I promise you won’t have to wait so long next time) we will look at “internationalising” theme template files.

PS: I don’t provide support for the Language Switcher plugin – please refer to the plugin author’s site for support details. Thanks!