5

The iStudio Canada team built teamcopd.ca for the Canadian Lung Association. He used WordPress as a content management system and WPML for both its multilingual and navigational capabilities.

Mike wrote the following post, which makes for great reading for anyone building full sites with WordPress and WPML.


When working on the development of TeamCOPD, I knew there would be a need for a plugin that allowed for a multilingual setup, since the Web site was going to be offered in English and French. There are a lot of different multilingulal plugin solutions out there, but the one I found to work the best (by far!) was WPML.

The following is a brief summary of my experience with the WPML plugin.

Primary Navigation

navigation

The primary navigation of this site is image based, so instead of using do_action(’icl_navigation_menu’), and being forced to either disable or overwrite the CSS they produce, I instead went the faster route by using the icl_link_to_element() function, like so:

<ul id="primary">
  <li class="bg link1"><?php icl_link_to_element(22); ?></li>
  <li class="bg link2"><?php icl_link_to_element(24); ?></li>
  <li class="bg link3"><?php icl_link_to_element(37); ?></li>
  <li class="bg link4"><?php icl_link_to_element(27); ?></li>
</ul>

The down side of going this route is if the page ID changes (which it shouldn’t) the link will be dead. However, the up side is that it took no time at all to implement and I didn’t have to worry about overriding the default styling that WPML applies to its “menuing” functions.

NOTE:

The WPML plugin is shipped with a style sheet that automatically styles the various navigation types that it renders. The only way to completely avoid this is to delete the styles sheets that come with WMPL. However, the do re-appear when you update the product.

In my opinion, there should be a feature built-in to WPML that allows the user to enable/disable the style sheets.

Amir: As of WPML 1.3.3, it’s possible to disable loading any of WPML’s CSS and JS files. Use one of the constants described in the coding API page.

Breadcrumb Navigation

breadcrumbs

To implement the breadcrumb trail that is shown on all pages (with the exception of the home page), I used the following function:

<?php do_action('icl_navigation_breadcrumb'); ?>

Easy to implement and did what I needed “out of the box”. However, I believe some customization should be available – namely having the ability to choose what the separator between each link should be. Granted, this is pretty minor stuff, but still, having the option would be nice.

Sidebar Navigation

sidebar-navigation

Only one section of the site has sub/secondary navigation, and again I was able to use one of WPML’s built-in functions to create this:

<?php do_action('icl_navigation_sidebar'); ?>

This function has an interesting way of rendering the navigation. It first echos the parent page as a header (<h4>) and then renders the links (children) that belong to it. Again, like the other functions I’ve discussed, there is not a whole lot of customization that is available. In this case, I didn’t need any – but what if I wanted the page name (currently as an <h4> element) to be a link instead?

Amir: Good point. Just like for the top navigation, we’re going to add hooks to this function so that designers can create custom HTML for elements.

Language Switching

language-switcher

Finally, the language switching was where I had to do the most customization. The default method for displaying the available languages was not going to work – instead I used a nifty little function (icl_get_languages(’skip_missing=N’)) that return an array of all the available languages and a parameter for each (active) which has a value of ‘0’ or ‘1’. The active language will have a value of ‘1’, while all the other languages will have a value of ‘0’.

For this site, all I had to do was run the resulting array through the loop and when I found the active attribute having a value of ‘0’, I would return the language name, like so:

<?php
function wpml_language_switch() {
  $lang = icl_get_languages('skip_missing=N');
  $ret = '';
  if(count($lang) > 0) {
    foreach($lang as $value) {
      $ret .= ($value['active'] == 0) ? '<li><a href="' . $value['url'] . '">' .
               $value['native_name']  . '</a></li>' : '';
    }
  }
  return $ret;
}
?>

Final Notes and Remarks

In conclusion, WPML is a plugin that I intend to on any WordPress-related build that I am a part of. Even for sites that are in one language only, the navigational features that the plugin offers make it a “must have”. Sure, there are things that could be worked on and improved, but all in all it’s a great product that will only get better!


Want to have your site featured on wpml.org too? Add it to the showcase section of our forum. We pick great sites and write about them.

5 Responses to “Building a flexible multilingual content site with WordPress”

  1. Thanks for this article. I have a new personal page up that is in it’s infancy. And, obviously, I would like users, for the most part, to be able to go anywhere on the site from any given page. I have been playing with various plugins but I’m not satisfied, mostly from my lack of expertise and the plethora of choices. I will check out WPML.

    Thanks again for this informative article.

    Ed

  2. I have succesfully got wpml going on my 2.9 testsite, but do not quite understand your language toggle.

    I have added your function to my funtions.php but al I get is the name of my language. What I nmean is it works partly but it´s not a hyperlink.

    Could you let me know a bit more precise how & what you have put where.

    Thanks a lot in advance!

    • It’s best to open a thread about this in our forum.

      Provide a link to your site and the code you inserted for the language switcher.

      Also, did you try adding the language switcher as a widget? This is the easiest way to get started.

  3. Hi, thanks for the great tutorial! Your explanation of your language toggle link is still a little unclear to me. Do you mind explaining that in more detail. I have been trying to implement that in my website but can’t seem to figure it out. Thanks.

    (I also found this post on lifeathighroad.com where I commented this as well)

  4. is there a way to control the order of the language switcher?
    I want to put English at the front of the list, and Chinese at the end, but if I change order=ASC etc, it doesn’t give me the flexibility I need.
    is there a way to Hard code the flags/country names maybe?

    Thanks,

    Andy