Setting up a multilingual WordPress site

I often have clients who need a multilingual website. This isn’t plug & play when it comes to WordPress (though rumor has it WP 3.0 will support multiple sites in one install, which probably will make multilingual WP sites a breeze), but there are sollutions. WordPress’s Page system is pretty flexible, and can with just a few moderations be used for multiple languages.

How-To:

First off I add the Redirect To First Child Template to the Theme. What this does, is look for the first Child of a Page, and redirect to it. (To controll which Child is the first, I use the plugin My Page Order.) I then create a Page for each of the languages I want, employing the Redirect-Template on them. I then add what is to be the main menu items for each language, and add them as Children of their respective language Page. If the site has any subnavigation, I simply add these as Children to the Child-of-language-Pages. Follow me?

This gives me a rough navigation along the lines of:

  • ENGLISH
    • Main Page
    • Products
    • About Us
    • Contact
  • GERMAN
    • Startseite
    • Produkte
    • Wir über uns
    • Kontakt
  • FRENCH
    • Page principale
    • Produits
    • A propos de nous
    • Contact

(Apologies for poor translation, if any, had to use Google Translator.)

Then I add the code for the navigation to the Theme. We can’t simply use wp_list_pages() for this, as it will simply output a list like the one above. Instead we use this script where we want our navigation to appear:

<?php
// CHECK IF WE ARE ON A PAGE
 if(is_page()) {
 $currenttitle = $post->post_title.'</a>';
 $subpages = wp_list_pages('title_li=&echo=0&sort_column=menu_order&depth=1&child_of='.$post->ID);

 $id = $post->post_parent;
 $sidebar_title = get_page($id);
 if($sidebar_title) {
 $prevpageparent = $sidebar_title->post_parent;
 }
 rewind_posts();

 if($subpages) {
 $pages=wp_list_pages("title_li=&echo=1&sort_column=menu_order&depth=1&echo=0&child_of=".$post->post_parent);
 $pagelisting = str_replace($currenttitle, $currenttitle.'<div id="submenu"><ul>'.$subpages.'</ul></div>', $pages);
 echo $pagelisting;
 }

 elseif($post->post_parent && $prevpageparent>'0') {
 $parent = $post->post_parent;

 $id = $post->post_parent;
 $myquery = new WP_Query("page_id=$id");
 $currenttitle = $myquery->post->post_title.'</a>';

 $subpages = wp_list_pages('title_li=&echo=0&sort_column=menu_order&depth=1&echo=0&child_of='.$post->post_parent);

 $pages = wp_list_pages("title_li=&echo=1&sort_column=menu_order&depth=1&echo=0&child_of=".$prevpageparent);
 $pagelisting = str_replace($currenttitle, $currenttitle.'<div id="submenu"><ul>'.$subpages.'</ul></div>', $pages);
 echo $pagelisting;
 }

 else { wp_list_pages("title_li=&echo=1&sort_column=menu_order&depth=1&child_of=".$post->post_parent);
 }
 rewind_posts();
} else {
// WE ARE NOT ON A PAGE, BUT A POST, CATEGORY VIEW, ETC
// SO WE HAVE TO DEFINE THE DEFAULT LANGUAGE MANUALLY AT THE END OF THE STRING
 wp_list_pages("title_li=&echo=1&sort_column=menu_order&depth=1&child_of=1");
} ?>

Line 40 is important; if we’re not on a Page the script can’t traverse back to it’s source (the Page that defines the language), so we have to manually put in the ID for the language Page we want to use as default, f.i. ENGLISH, at the end of child_of=.

Also note that this script is custom made to show vertical navigation, with any subnavigation positioned directly below its Parent both when the Parent is active and when the Child is active, like this:

  • Main Page
  • Products
    • Software
    • Hardware
    • Upgrades
  • About us
  • Contact

It can be shortened and/or modified for other needs and types of navigation.

A few notes:

  • It’s easiest to add the links for each language into the Theme manually. If you want to use flag icons, or simply text links, you can simply add: <a href="<?php echo get_bloginfo('home').'/english/'; ?>">English</a> and so forth.
  • If you want the ENGLISH > Main Page to be the default Front Page, simply go to Settings > Reading in WP-admin and set Static Page: ENGLISH to display as Front Page.
  • And most important: This won’t take you from the English Product Page to the French Produits Page by clicking the flag. When you change language, you will be redirected to the Front Page of the selected language!

Leave a Reply

Your email address will not be published. Required fields are marked *