Xili-language: navigation menu

This post will present how to set navigation menu in multilingual context with xili-language.

The background of that approach is the navigation menu as built by WordPress Core. Don't concern taxonomies (categories) list in sidebar (widget). Coding wp or php are not needed.

What is a navigation menu ?

As readable in Wordpress Codex:

Navigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customized navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.

On frontend

Currently as in twentyten or twenty eleven , the menu is in the header:


Appearance Menus Screen

In the snapshot below, the Appearance Menus Screen is selected (1). The Theme Locations show the Primary Menu Location (2) of Twenty Eleven with top-menu content assigned (4). The top-menu content (3) contains two menu items (5).


as explained in WP Codex

Notice: A common mistake is to forget to save the themes location (on left) and theme content (on right)

Several ways to transform mono to multilingual navigation

There is more than one way to made a multilingual website according content strategy and navigation behavior !

First questions

What is the content of the menu ?

In each language, is the menu a clone, a mirror of the menu in other language ?

Is the menu based on page titles, or categories or both ?


First case: xili-language populates automatically a menu based on page titles and language list.

By giving to xili-language a list of pages, the plugin will sub-select the content of the menu by choosing pages in current target languages and append to it the language list.

Second case: twentyeleven-xili theme is used

twentyeleven-xili theme, provided as example contains a nice feature. The main menu location is 'virtually' cloned for each target language. So it is easy to create a specific menu for each language with very different contents.

Insertion of language list

Originally, before the navigation menu features (WP 3) , to create the language list in webpage, widget and template tag were available.

Now, with navigation menu, xili-language plugin is able to automatically append language menu items. And the link under the target will be adapted to the type of webpage displayed. By example, if posts of a category is shown, the link be will to show the sub-selection of posts in this category and the target language. And if the mode is active, when a singular is displayed, the target for each language will be the link to the translated page if exists !

How to activate ?

First case

The settings are mainly in Expert Settings tab of xili-language settings screen.


This theme has only one menu location "primary" (1). The language menu (named Nav Menu #1) is appended (2) to navigation menu when updating (3).

First case: pages sub-selection

Now pages subselection will be added:


In this case, plugin will choose automatically between pages 2 and 3 according his current language to fill the menu with their title. Args is based on the args of wp_list_pages template tag. So it is possible to set with exclude=5,9,78 by example.

Pages Sub-selection and Insertion point in Navigation Menus settings (since version xili-language v2.9.10)


Instead previous method, with insertion point, it is now possible to insert a sub-selection of pages everywhere inside navigation menu (not only at end before languages sub-selection).

In this screenshot, the selection will be pages with ID 2,16 according current language. And one of these two pages will be chosen as menu item and inserted after Home menu item.

With patience, it is now possible to build a very powerful menu.

NOTE : To avoid unwanted double items in navigation menu, choose one of the 2 methods but not both ! The future version will use only menus set in Appearance Menus Builder.

Sub-menus selection and insertion point (= v2.9.20+)

See this article : here in 2013 child theme example

Second case

This case concerns only twentyeleven-xili child theme provided as example for theme designer !

The settings are first in xili-option sub-menu of Appearance


and now in Navigation Menus, multiple locations are available :


A location is for english, the another for french. The menu content named "header-menu" is assigned to english and the named "menu-haut" is assigned to french. By completing adequately each menu content, the navigation can be fully adapted to each language.

Third case

What about other themes (free or commercial) ?

Situations are huge various. xili-language is pluggable. A solution is very often possible. Ask to the theme author, dev.xiligroup authors or do it your self. Contrary to popular belief, GPL doesn't say that everything must be zero-cost, just that when you receive the software or theme that it not restrict your freedoms in how you use it. dev.xiligroup.com sells xili-language premium services by delivering pieces of code to complete the functions.php file of theme or add ons (as plugin) to upload and activate. A preliminary diagnosis is necessary to see if theme source works (and is updated) with good wordpress functions and template tags.

Style(s) and flags: css

Unlike other multilingual plugins, the architecture of xili-language is based on a separation between datas and presentation (style) like in WP where huge variety of themes are possible. So, the plugin don't provide style and flags. Only, id and class are available to built a very adapted style.css file. In the examples made for twentyten or twenty eleven themes, you can find approach. For the admin side, since version 2.5, xili-language detects a personalized style file. ( in sub-folder xili-style of the current theme .)

Richer approach for complex themes

Working and used as CMS (content management system), WordPress offers a huge variety of possibilities to create navigation menu (one or multiple) on top or footer. By using core functions, xili-language plugin is ready to solve most of the situations. But it needs a little time to program and use API or Hooks ! ;-)


Navigation menu and child of twentyten theme example: Episode #4 (2010-11)

Navigation menu and child of twenty eleven theme example: How to (2011-10)

For theme developers: a top right language menu (2011-10)