Episode #4 – Multilingual Nav Menus

Posted on November 28, 2010 by xiligroup dev

In previous episode, we learn how to add translations for categories and in the result, the categories list in sidebar will have the same language as the current language of the shown post. By clicking one of the categories, the website remains in the same language.

Now, step to built the menu and his language navigation.

The demo “Child theme” contains special css style to transform name of language directly in country flag. For better understanding, the part of that style is temporary disabled below in snapshot.

A short view in Nav Menus of Settings of Appearance:

Settings of navigation menus

Settings of navigation menus

Here above a very simple example with home menu line in topleft menu affected to primary navigation location (arrows) – don’t forget to save menu and location (blue buttons).

Back to settings page of xili-language and his “Special” metabox:

Special menu languages

Special menu languages

In this screenshot, the rectangle with red borders is where you choose navigation location and where you checks. (The part- oval at bottom – is reserved for hand adding of menu lines not here presented.)

Now, the languages series will be AUTOMATICALLY added to the end of menu at left.

Below when no special css lines in style.css :

Language menu item w/o formatting

Language menu item w/o formatting

and with the style.css as included in Child theme after the mandatory lines at beginning…

With formatting as here - see style.css for example

With formatting as here - see style.css for example

Each term of menu item (and translations) must be in .mo files and can be added with xili-dictionary plugin.

Note: this above example includes automatic adding (and selecting) a series or sub-series of pages. In dev.xiligroup.com, a special navigation location was created on top-right for flags and language home switching !

Next step : Widget and other tips and tricks…

Posted in How to | Tagged , , | 20 Comments

Episode #3 – Completing multilingual translations of theme with DB items

Posted on November 24, 2010 by xiligroup dev

At the end of the previous step, we can see than when displaying as single a post checked as french (or other language available in theme languages sub-folder), the theme terms are displayed in the same language. But not the name or description of categories or widget title.

Categories are totally depending on how the website is organized. So it necessary to import in languages files (.po and .mo) these new terms or sentences of description.

As webmaster loving keyboard or skilled with poEdit, you can do it by hand with .po files… xili-dictionary was conceived to afford pretty tools to do that on line – on the fly.

In preliminary : because the twentyten ‘root’ language is english (msgid of .pot or .po file), don’t forget to name (or rename) categories in english.

After installing, the plugin xili-dictionary, you can observe that the dictionary list is empty. To fill it with translated terms of theme (by example with fr_FR language twins), import the fr_FR.po available in the twentyten-xili folder (see previous post).

Xili-dictionary - import .po

Xili-dictionary - import .po

All the terms of theme and french translation are now in the list. And now to add the categories words, click the “import terms of categories” button and confirm.
As example, we will translate in french the category named “News”.
The list of terms in xili-dictionary is searchable. So, as shown below in screenshot, fill search with “News” to sub-select. Click Edit in column action. As visible, the term is not yet translated.

xili-dictionary - editing translation

xili-dictionary - editing translation

Click ‘add a translation’ to create a new term.

xili-dictionary - add a translated term

xili-dictionary - add a translated term

Fill the translation, don’t forget to select the target language, click add…

Repeat this with description for news… (second line)…

And now to test, we will create an updated fr_FR.mo file for the website.

xili-dictionary : exporting .mo

xili-dictionary : exporting .mo

Back to endusers side, we see that the categories list is now translated when a single in french is displayed !

Categories when single in french

Categories when single in french

At the first start of a website, this work is a little tedious. But when a modification occurs or a new category is added. It is easy.

Next step : the menus and the language list !

Posted in How to | Tagged , , , , , | 14 Comments

Episode #2 – Creation of a multilingual website with xili-language

Posted on November 20, 2010 by xiligroup dev

Review of previous steps

In the previous post, some important steps were defined. This post follows also the series about child theme.

The step by step is a little bit different – a child theme is now available:

  1. WordPress 3.0 installation
  2. Check that theme “twentyten” is in theme folder and add theme “twentyten-xili” :

    For xili-language 2.1.x, You must use updated twentyten-xili-v1.1 of twentyten-xili.
    twentyten-xili theme 1.0 for xili-language 1.8.9.1

    downloadable here (45kB) [Updated v 0.9.9 + japanese]. Twentyten-xili must be set as current theme like here in this website

  3. Add the file .po and .mo of target languages (here fr_FR, de_DE and es_ES)

    Can be found in sub-folder languages of theme’s folder named twentyten of each kit as below.
    http://es.wordpress.org/
    http://fr.wordpress.org/
    http://de.wordpress.org/
    COPY the .mo and .po files for each languages in sub-folfer ‘langs’ of CHILD theme twentyten-xili (the original will not be modified).

    The theme folder will be similar to this:

    themes folder with parent and child

    themes folder with parent and child

  4. Enabling plugins Xili-language (choice of languages) and Xili-dictionary
  5. Creating a category – such as “Actualités” then “News” and its description (“Recent news about website) BECAUSE the pivot language is English.
  6. Writing of one or two articles in French and / or English – we will learn to link if their content is the translation – adaptation of the other.
  7. Adding widgets Xili-specific language – settings…
  8. Customizing the new menu system of the header (wp_nav_menu)
  9. Contents of Navigation menu
  10. Tags and plugin Xili-tidy-tags.

Steps 1 to 6 are easy, but we will spend time at step 4 and 6. The sixth because there are some useful tips for authors in multilingual context.
The screenshot are done during this current article – the first in english and his translation in french.

Adding new post

Adding new post

Because, I currently write the both version, I will open a new tab in the browser by clicking Add New at french line in Linked posts box at left (I use right button of the mouse and select ‘Open link in new tab’) .

In the new tab, we see that all box at left are set. French title is added and body text…

edit post: french side

edit post: french side

After full editing and saving, when post displayed as single the terms around this are translated according language of the displayed post.

meta sub-title in english

meta sub-title in english


les infos traduites

les infos traduites

At next step, we will see how to complete the translation for terms as in categories or menus or description…

Posted in How to | Tagged , , , , | 33 Comments

Child theme : the file functions.php

Posted on November 20, 2010 by Michel

In child theme the file functions.php is an important file. Contrary to other files, it don’t “cancel” the functions available in functions.php of parent theme. Be aware of that !
With this below example (used in dev.xiligroup.com), some important things will be presented :

<?php
/* functions for child of twentyten */
function twentyxilidev_setup () {
	register_nav_menus( array(
		'top-primary' => __( 'Top-Primary Navigation', 'twentyten' )
	) );
	load_theme_textdomain( 'twentyten', STYLESHEETPATH . '/langs' );
 
	$xili_functionsfolder = get_stylesheet_directory() . '/functions-xili' ; 
	if (file_exists($xili_functionsfolder . '/multilingual-functions.php') && class_exists('xili_language')) {
		require_once ($xili_functionsfolder . '/multilingual-functions.php');
 
	}
 
}
 
/* actions */
add_action( 'after_setup_theme', 'twentyxilidev_setup', 11 ); // after the parent
add_action('wp_head', 'special_head');
 
if(!is_admin()) {
	add_action('wp_print_scripts', 'xilifloom_theme_header');
	add_action( 'wp_print_scripts','scripts_add',20 );
}
 
define('XILI_CATS_ALL','0');
 
function special_head() {
	global $post; // for sliding
	// to change search form of widget
	if ( is_front_page() || is_category() || is_search() )
	 	add_filter('get_search_form', my_langs_in_search_form,10,1); // in multilingual-functions.php
}
 
// ....

The first function ‘twentyxilidev_setup’ call by the action after_setup_theme is important. Inside, a nav menu area is added. By re-loading text domain, the files .mo inside subfolder of child are used.
This add_action must called after the others: so order is set to 11 or more.
In extract of ‘special_head’, a filter incorporate a new radio-button series under the search input.
In this file, it is also possible to cancel widget spaces or menus space if necessary.

Here the functions.php of the twentyten-xili theme delivered in next post soon :

<?php
 
/**
 *
 *
 */
function twentyten_xilidev_setup () {
	load_theme_textdomain( 'twentyten', STYLESHEETPATH . '/langs' ); // now use .mo of child
 
	$xili_functionsfolder = get_stylesheet_directory() . '/functions-xili' ; 
	if (file_exists($xili_functionsfolder . '/multilingual-functions.php') && class_exists('xili_language')) {
		require_once ($xili_functionsfolder . '/multilingual-functions.php');
	}
}
 
/* actions */
add_action( 'after_setup_theme', 'twentyten_xilidev_setup', 11 );
add_action( 'wp_head', 'special_head' );
 
define('XILI_CATS_ALL','0');
 
/**
 *
 *
 */
function special_head() {
	// to change search form of widget
	if ( is_front_page() || is_category() || is_search() )
	 	add_filter('get_search_form', my_langs_in_search_form,10,1); // in multilingual-functions.php
}
 
/**
 *
 *
 */
function single_lang_dir($post_id) {
	$langdir = ((function_exists('get_cur_post_lang_dir')) ? get_cur_post_lang_dir($post_id) : array());
	if ( isset($langdir['direction']) ) return $langdir['direction'];
} 
 
 
?>

Next episode soon…

Posted in How to | Tagged , , , , | 1 Comment

Widget Links : how to sub-select bookmarks according language context ?

Posted on November 20, 2010 by xiligroup dev

On this website, in footer bottom left, the links list is changing according current displayed language : how to set the widget and xili-language ?

Without php coding, it is possible to do that since version 1.8.5 of xili-language. This version manages a language taxonomy for links (link_language). Link is an object as post so it is possible to create a taxonomy accordingly the language taxonomy (language) of posts. The cost is more than 100 php lines added inside the plugin to manage the UI, hooks and filters !

Links and language in links manager admin page

Links and language in links manager admin page

As for the articles, the link edit screen contains a box where you can check the language.
There is a pseudo-language ( Ever ) that exists and, assigned to a link, this link is displayed everytime.
xili-language has in Settings screen also has (if the theme is widget compatible) a box where you can choose categories of links that will have sub-selection by language.

For those who do not use widgets, template tag for theme is also customizable to integrate the sub-selection by language. Short example for php users:

<?php wp_list_bookmarks( array( 'lang'=>the_curlang()  ) ) ; ?>
Posted in How to | Tagged , , , | Leave a comment