Tutorial: Turning WordPress into a CMS using WPML

A couple of weeks ago I was part of a team here at iStudio that helped launch the redesign of the TeamCOPD Web site (by the Canadian Lung Association). Part of my involvement in the project was setting up the Web site in WordPress and customizing it to act as a mini CMS with the ability to be fully multilingual. The following is a brief overview of how I achieved this.

As I’m sure you are well aware of, WordPress is fairly simple to setup as a CMS ‘out of the box’, but where it needs a lot of customization is for setting up ‘smart’ navigation and being able to serve up pages or posts in multiple languages.

The TeamCOPD site needed to be created with support for both the English and French languages; and to accomplish this I used a WordPress Plugin called WPML. WPML, in short, takes your default WordPress installation and turns it into a ‘real’ CMS – with support for multiple languages.

Installation and configuration of WPML

It should be noted that the version of WordPress I used was 2.8.5 and the version of WPML was 1.3.5

Like any other plugin, the installation process is very simple – just add the plugin by searching for “WPML” from within your WordPress installation dashboard and choose the top result – WPML, by OnTheGo Systems.

Once the plugin has been activated, you can proceed to the configuration by clicking the Overview link within the WPML sidebar navigation panel.

Multilingual

You will want to enable both the CMS navigation and Sticky links by clicking the ‘enable’ button that is associated with each. For the TeamCOPD site, I setup English as the default language and then added in French as my other language.

There are many other options that can be configured on this page, but suffice to say most of the configuration can take place when customizing the WordPress theme directly, which is the step I took while developing TeamCOPD.

CMS navigation

You will want to enable both the CMS navigation and Sticky links by clicking the ‘enable’ button that is associated with each. From here you can customize each. I’ll not being going into any detail, but suffice to say there are some option within the CMS navigation that you’ll want to take note of:

• Caching: The default installation of WordPress makes enough database queries as it is – even before adding in a multitude of plugins. WPML is no different, but you can cut down on a few by enabling this caching feature. You can read more about this feature on the WPML blog.
• Sticky links: These are great for ensuring your links won’t break if you change the slug on a post or page. More detail is given within this blog post.

Setting up the navigation

For the TeamCOPD site, there were four types of navigation that needed to be in place, including:

• Language toggle (English/French)
• Primary navigation
• Sidebar navigation (on any primary page that had children)
• Breadcrumb

WPML comes with the functionality to handle of these without too much configuration on the developer’s part.

Before I get into the details of how I implemented WPML for creating the navigation types defined above, it is a good idea to make use of a fairly new feature of WPML – disabling all the ‘extra’ CSS and JS that it includes by default for rendering said navigation.

Within your WordPress theme’s functions.php file, insert the following:

define('ICL_DONT_LOAD_NAVIGATION_CSS', true);
define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true);
define('ICL_DONT_LOAD_LANGUAGES_JS', true);

In the past, you either had to override the CSS with your own custom styles or delete them – but as soon as you upgrade the plugin, they would re-appear. Pretty annoying, so I’m really happy about this new feature.

Language toggle

The greatest amount of customization that this project required, in terms of navigation, was with displaying the English/French language switch hyperlink. WPML comes with a function that will return a list of languages that exist as an array:

icl_get_languages();

The array that is returned contains a few items of interest – a true/false state if the current language is the active one on the site, as well as the URL  and title of the page/post.

With this in mind, I created a function within functions.php that drilled down into the array and returned the language information for the inactive one.

function wpml_language_switch() {
	$lang = icl_get_languages('skip_missing=N');
	$ret = ''; 

	if(count($lang) > 0) {
		foreach($lang as $value) {
			$ret .= ($value['active'] == 0) ? ' <a href="' . $value['url'] . '">' . $value['native_name'] . '</a>' : '';
		}
	} 

	return $ret;
}

NOTE: I passed a string parameter of skip_missing=N to ensure that all languages are returned – even if there is no active translation on the current page or post I am on.

Primary navigation

Achieving a workable primary navigation also requires a touch of customization. Unfortunately, there are next to no customization options available as the method that creates that navigation just renders a list of links (pages) that have been created within WordPress, like so:

do_action('icl_navigation_menu');

In the case of the TeamCOPD Web site, there were two types of primary navigation that had to be created. I was hoping to be able to filter by a custom field (i.e. ‘toolbar’ and ‘primary’) but this was not an option that was feasible with WPML. However, there was a solution and a decent workaround at that.

WPML comes with a method called icl_link_to_element that allows you to create an individual hard link to an existing page within the site. The method accepts a number (5) parameters that allow you to sufficiently customize the resulting link.

For the navigation structure that I needed, all I had to do was create a series of calls to this method and pass in the ID of the page that I wanted to appear:

<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>

Sidebar navigation

Only one section of the TeamCOPD site had secondary (sub) navigation. Using WPML’s existing functionality for this, I was able to easily and quickly render sub-navigation that only appeared on pages that required it.

do_action('icl_navigation_sidebar');

This function has an interesting way of rendering the navigation. It first echo’s 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?

Breadcrumb

In terms of the breadcrumb navigation on a page, it couldn’t get any simpler. Just add the required function call to your theme and you’re away and running!

do_action('icl_navigation_breadcrumb');

If you are on the home page, the breadcrumb is smart enough not to display, so when I say there is no customization needed, I mean exactly that!

There is one small drawback – and I stress the word ‘small’. Currently, no functionality is built in to allow you to change the type of bullet that is used to separate each hyperlink in the breadcrumb. Normally this is not an issue, but it wouldn’t hurt to have the ability to define the character (or graphic) to use as a separator.

Recommended Reading

On the WPML web site there is a great resource called the WPML coding API which gives you details about all the functionality that is available with the plugin:
http://wpml.org/support/wpml-coding-api/

The topic of this article has also been posted on the WPML web site, within their ‘blog’ section:
http://wpml.org/2009/10/building-a-flexible-multilingual-content-site-with-wordpress/

And lastly, the great Web site iStudio designed and developed for TeamCOPD:
http://www.teamcopd.ca/