Important information : date of posts and versions

Featured

This multilingual site is born around 2 years ago (with theme TwentyEleven) to demonstrate as Twentyten-xili, how to use example child twentytwelve-xili. Since lot of improvements in WP Core and versions of xili-language plugin…

Example child theme twentytwelve-xili is downloadable now in version 2.0 and uses recent technic (classes and more…). He is also compatible 3.5+. Technical infos are here on website showing twentythirteen-xili.

Here posts and how to are are left in place as learning. The posts about gallery (jetpack) and floom slideshow remain valid.

So remember to read the date of the article and the versions !! Visit also wiki

M.

Gallery with new features of xili-language v. 2.7

In this gallery the images are titled and described in english (with the same shared files in other languages)

For more infos about “backend” see wiki docs.

What’s new in xili-language next version 2.6 ?

What’s new in xili-language next version 2.6 ?

  1. Improvements to change language of a post,
  2. Enhancements of author interface, list, editing,
  3. Flexible ways to choose place of css containing style files of translations dashboard,
  4. and more…

Style

Webmaster is free to choose place where to save the style file. He is also free to choose flags according language and country of visitors. For example, some flags are availables.

Dashboard xili-language 2.6

Dashboard xili-language 2.6

xili-language 2.4.1 shipped: what’s new

On January 28th, 2012, xili-language version 2.4.1 is shipped:

* Settings pages are now organized in 4 tabs.

4 tabs to organize settings

* improvements of readme started as visible here.
* automatic rtl.css adding if present in theme like twentyten or twentyeleven – So supports better arabic, persian, hebraic and other *right to left* languages.
* new way and options to manage dates translation using class wp_locale – before activation: read carefully this keynote !

* a new version of twentyeleven-xili is available here.

A new release for theme twentyeleven-xili : one menu per language option

For complex and rich multilingual website, it can be good to have a navigation menu per language and organize a navigation with pages and special menu items adapted to each language.

Theme Locations

Theme Locations

Before today, the only way was to modify the code of theme (header) and add registration for this new menus (functions.php). (as in middle of this topic of forum)
Prerequisite : xili-language must be updated to version 2.3
Here, with the example of 2011 xili child theme (twentyeleven-xili 0.9.7), it is more easy with options in theme (xili Options).

Theme multilingual Options

Theme multilingual Options

In the menu locations (see snapshot on top and below) if a menu content is not attached to a menu location, the default menu for root language (currently en_us) is displayed.

Theme menu contents

Theme menu contents

This new version of theme is also an example for theme’s developers – how it works ?

Two filters (and functions) were added in functions.php of the child theme :

The first registers the added navigation menus according the available list of languages:

/**
 * filter to create one menu per language for dashboard
 * detect the default one created by theme ($menu_locations[0])
 * @since 0.9.7
 */
 
add_action ( 'init', 'xili_create_menu_locations',100 );
 
function xili_create_menu_locations () {
	$xili_theme_options = xili_twentyeleven_get_theme_options() ; 
	if ( $xili_theme_options['nav_menus'] == 'nav_menus' ) {  // ok for automatic insertion of one menu per lang...
		$menu_locations =  array_keys( get_nav_menu_locations()); 
		if ( class_exists('xili_language') ) {
			global $xili_language ;
			$default = 'en_us'; // currently the default language of theme in core WP
			$language_xili_settings = get_option('xili_language_settings');
			$language_slugs_list =  array_keys ( $language_xili_settings['langs_ids_array'] ) ;
			foreach ( $language_slugs_list as $slug ) {
				$one_menu_location = $menu_locations[0].'_'.$slug ;
				if ( $slug != $default && !isset($menu_locations[$one_menu_location]) ) {
					register_nav_menu ( $one_menu_location,  sprintf( __('Menu for %s','twentyeleven'), $slug ) );
				}
			}
		} 
	}
}

The second changes during the webpage and menu creation the location, so display the good menu content:

/**
 * filter to avoid modifying theme's header and changes 'virtually' location for each language
 * @since 0.9.7
 */
 
add_filter ( 'wp_nav_menu_args', 'xili_wp_nav_menu_args' ); // called at line #145 in nav-menu-template.php
 
function xili_wp_nav_menu_args ( $args ) {
	if ( class_exists('xili_language') ) {
		global $xili_language ;
		$default = 'en_us'; // currently the default language of theme as in core WP
		$slug = the_curlang();
		if ( $default != $slug ) {
			$theme_location = $args['theme_location'];
			if ( has_nav_menu ( $theme_location.'_'.$slug ) ) { // only if a menu is set by webmaster in menus dashboard
				$args['theme_location'] = $theme_location .'_'.$slug ;
			}	
		}
	}	
	return $args;
}

To conclude

By providing the new version of child :

  1. users of twentyeleven can easily create a navigation menu for each language without modifying code. twentyten-xili version 2.0 also contains this feature.
  2. webmasters and theme’s developers can find code examples how to improve theme’s multilingual features.

Enjoy !

for questions, use comment below or dev.xiligroup forum

Theme’s header: Example – step by step – of languages nav menu…

navigation menus

navigation menus

In this article, with example of a multilingual website powered with xili-language trilogy, we present how to create a special language menu by using navigation menu features and some php code lines in header.php file of the theme.

On the top right, a language menu (1) is added to the default nav menu (2) in a div here named xili_language

Header file

<body <?php body_class(); ?>>
 <div class="wrapper">
  <div class="page">
   <div id="xili_language">
     <?php   
      echo '<div><ul>';
	wp_nav_menu( array( 'container_class' => 'xl', 'theme_location' => 'languages_nav' ) );
	echo '</ul></div>';
	?>
   </div>

functions file

// This theme uses wp_nav_menu() in two (3 with if) locations.
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation', 'ipseite' ),
		'primaire' => __( 'French Primary Navigation', 'ipseite' ),
		'languages_nav' => __( 'Languages Navigation', 'ipseite' ),
	) );

Style.css file

For this menu with container class ‘xl‘, some styles were created. Note especially that flags are managed as background and text drop in negative space ;-) .

#xili_language { width: auto; color: #666; height:35px;  padding:0px 0px 20px 0;
}
#xili_language .xl {
	font-size: 13px;
	line-height: 18px;
	margin:0;
	width: 100%;
	padding:0;
	height:35px;
	display: block;
}
#xili_language .xl ul {
	list-style: none;
	float:right;
}
#xili_language .xl li {
	float: left; display:inline;
	padding:1px 2px;	
}
#xili_language a {color: #666; 
	text-transform: uppercase;
	font-size: 10px;
	display: block; text-decoration: none;
	letter-spacing: 1px;
}
ul#menu-languages li.lang-fr_fr, ul#menu-languages li.lang-en_us, ul#menu-languages li.lang-de_de, ul#menu-languages li.lang-es_es {text-indent:-9999px; width:18px; }
ul#menu-languages li.lang-fr_fr a {background: transparent url('images/flags/fr_fr.png') no-repeat center 5px;}
ul#menu-languages li.lang-en_us a {background: transparent url('images/flags/en_us.png') no-repeat center 5px;}

/* li#menu-xlang-separator a {display:none;} */

Dashboard: Appearance Menus

If the menu “location” is well declared in functions.php (see above), it is easy to “link” the menu to theme location. On right, a menu (leaved here empty) is saved under name languages.

appearance menus

appearance menus

Dashboard: xili-language settings

xili-language special settings

xili-language special settings

On the top, xili-language has detected that 3 locations are registered (see functions.php above). By checking, webmaster defines where languages menu is automatically inserted.

On the bottom, pages ‘contact us’ ‘nous contacter’ and are choosen according target language and automatically inserted before flags,.
(after checking, don’t forget to save settings)

COPYRIGHTS:

Ipseite website is owned by the Ipseite company involved in DAM (digital and media asset management).

ipseites characters

ipseites characters

The characters, figures and drawing created by Gerald Morales from WebOcube and co-founder of xiligroup team. Data-design: xiligroup.

How to insert with style a bbPress 2.0 in twentyeleven : example to explore child theme, style and sub-folder

[this post is obsolete because for earlier bbPress 2.0.x]

In this article (not yet translated), how to personalize a child theme to show bbPress in twentyeleven theme with minimum modification but good folder organization.

Next post (soon !) : a child theme with both multilingual features and bbPress with twentyeleven-xili-bbp.