This review goes through all of WPML’s options (current to version 0.98), tears them apart and gives constructive criticism about how they can be improved.

It’s an excellent lesson in design and usability. Anyone who’s doing any sort of design work will get something from reading it. The review talks about WPML, but it can be applied to anything that you can design and build.

The review itself goes into great depth and detail. It’s difficult to read all at once. I decided to keep it as a single post, although it can easily make up a nice mini-series. This way, you can choose your own pace and keep it bookmarked for later review.

In some places I added my comments to the review. My comments always appear in italic and begin with ‘Comment‘.

WPML usability review (written for WPML version 0.98)

WPML (WordPress Multi Language) is a plugin that add much soughtafter translation features to WordPress. With the plugin installed and set up, you’ll be able to provide users with several language versions of all your pages and posts.

WPML Language setup

The plugin does this almost perfectly. Unlike previous attempts at building multi language capabililties into WordPress, WPML is:

• stable
• compatible with most webservers and most other plugins
• simple to setup

WPML is not perfect, however. There are a few tweaks still to be made and some usability issues to overcome. In this article I’ll go through a number of them, and give suggestions to improvements. First of all, here’s a brief description of the workflow of adding multilanguage capabilities to your WordPress website.

Setup

The first thing you’ll notice in your WordPress backend, upon activation of the WPML plugin, is a new main menu called, aptly, WPML.

WPML Menu

Many plugins add options pages to WordPress, but most of them add their pages as children of the Settings menu. Normally, adding your own main section is considered bad karma by the WordPress interface design guidelines, as it divides configuration across several sections simply confusing end users. I would argue, however, that in the case of WPML, the features added are so massive that it deserves its own section.

Adding languages is a simple matter of selecting from lists, and you can now proceed to translate your posts and pages. This takes place, logically, in both the page and post overview sections, as well as on “add new page” or “add new post” sections.

Edit posts screen with multiple languages

Notice the extra menu that lists your added languages.

Add new post

Notice the “Language options” box right at the bottom.

When you’ve set up WPML and added a few posts in each language, your backend work is effectively done. The rest of your work is in your WordPress templates, adding new template tags to show language selectors, tweaked menus, and whatever else you’d want. This brings me to where WPML needs a little bit of work to fullfill its potential.

1. Remove the need for theme tags

The main purpose of translating your website is to give your readers content in their own language, or at least, their choice of language. So without a language selector, your multilanguage features are, at best, auto-detected. As such, you’ll definitely want to add the language selector, should you use WPML.

So why isn’t the language switcher added automatically upon plugin activation?

Language switcher options

When other plugins “start working” as soon as they’re activated, there’s a good chance you won’t even notice that something is missing in WPML until you start digging. While there’s good sense in allowing developers full control of the plugin innards, there’s no reason WPML shouldn’t be able to do both.

Suggestions for improving the language selection setup

1. WPML should automatically add all its features to your Wordpres theme, using plugin hooks. That means language selectors and special WPML page menus should be active as soon as the plugin is activated.
2. There should be a “Template Options” section in WPML, which would allow you to tweak these features, or turn them on or off, individually.
3. If a theme developer so chose, he or she should be free to add the various template functions themselves in the current fashion, simply overriding any plugin hooks.

The default behavior, with these tweaks added, would be a “activate and you’re done” version of WPML, which is likely to be sufficient for the bulk of its userbase.

2. Page and Post options

Add new page

While WPML offers up translation features, it also comes bundled with a few Content Management System (CMS) features. As shown above, an extra box called “CMS Navigation” appears beneath your translation box.

There’s nothing wrong with adding those features. If you’ve installed WPML in the first place, chances are you’re using WordPress as a CMS — I doubt many people translate their blogs to several languages. The problem is that there are two boxes. The more boxes, the more confusion.

Behind the scenes, the reality is that “CMS Navigation” is a separate plugin, that is bundled with WPML. No matter, the features are good and there’s good sense in having them be part of WPML. So why aren’t they really part of WPML?

Comment: “CMS Navigation” started as an independent plugin, but it’s now fully integrated into WPML. We found out that in order to properly support the navigational elements, in a multilingual environment, these functions must interact. The suggestion about making it a single box is still very valid.

Suggestions for improvements:

1. Add the features from “CMS Navigation” into WPML, and combine the two boxes.

3. Tweak The Wording

While multi language features constitute a quite advanced feature, WPML has already demonstrated that it can be simplified enough to be accessible in WordPress. But there’s a ways to go to make all the features easily understood.

For instance, what does “Mini home” mean? What does a “language specific home page” mean?

CMS navigation options

Both “Mini home” and “Section” features are related to navigation grouping.

Options for language switcher

“Link to home of language for missing translations” simply means that if you’re reading a post in one language, switches to another language to read it in that, and it’s not yet translated, you’ll be taken to the home page instead of shown a 404 page.

CMS navigation setup

“Sidebar pages menu” is simply the text you can write before and after the widget heading, if you’re using the Site Navigation widget that comes bundled with WPML.

As is evident in these screenshots, a number of WPML options can comfortably be tweaked to your liking. Very nice. Unfortunately, understanding what each feature does, can be quite tricky, mostly due to the wording.

Suggestions:

1. Rename “Exclude from the top navigation” to “Hide this page from page menus”. Not all page menus are at the top, and not all of them are distinctly “navigation”.

2. Consider rethinking the “Mini home” feature. As a feature for very large websites, the idea is that you can create entire microsites with very complex structures.

For instance, you could make a a company party invitation that doesn’t show up in the main navigation of the corporate website. This subpage, could then include a number of subpages that should not show up in any menus, perhaps because you editorially would want to add the links yourself. You could, for instance, have a “Map” subpage, which you link to inside your body text; “peruse our map to find out where the party is”.

While this is a useful feature when you need it, it is also a very complex feature. Should this even be bundled with WPML?

If so, consider renaming “Mini home (don’t list child pages for this page)” to simply “Hide child pages for this page”. People may not immediately understand why they would want to
do this, but when they need the feature, it’ll be right there waiting for them.

Comment: To generalize, I think that we all should avoid inventing names for our features. If there’s already a standard name for something then we should use it. For instance, the little text that goes at the top of every browser window is called a ‘Title’ – we don’t need to explain what that is. However, when we invent names, like ‘mini home page’, we just confuse our users. Instead of inventing names, we should just say what it does. Thanks for raising an excellent point!

3. The “Section” feature is equally useful and confusing. What it does is, it allows you to group a chunk of pages visually, without a hierarchy. This is useful if you have a plethora of pages and no subpages and want to visually separate groups of these pages in to neat chunks.

For instance, let’s imagine you have these six pages:

• Work samples
• Case stories
• Pricing
• Contact Information
• Company Vision
• Employees

Using the section feature, you could group them with text headings:

Our Work

• Work Samples
• Case Stories
• Pricing

Company

• Contact Information
• Company Vision
• Employees

See? Useful! So how do you go about making this simple to do in WordPress, with only a plugin? Yes, it’s difficult. Currently, using the “Section” box, you do this:

1. Enter a heading in the “Section” textbox, under which the first page you’re editing should be grouped.Edit another page, now choose a section in the textbox which has now become a dropdown menu, or, add a new heading. Suggestion: For starters, simply describe what’s going on.
2. Rename “Section” to “Group this page under the following headline:”, and consider adding an italicised description below the textbox that says “This will group your page menu into neat chunks”.

Comment: I find this difficult to use too, and I’m pretty familiar with how WPML works. In fact, I would be surprised if there are more than 10 people have managed to use this feature without giving up. I think that any rewording we do will not be enough to make it usable enough. Instead, we’re going to add a new page management facility to WPML which would allow controlling all page management from single screen. This would include the standard WordPress page order (which isn’t the most friendly thing in the world), page parents, our sections, and our “mini-homes”. This entire thing will be done using a drag and drop interface and will look at all the pages together rather than one by one. Look out for this feature in WPML 1.1.

4. Rename “Skip language” to “Show ‘Not Found’ error page”, and rename “Link to home of language for missing translations” to “Redirect to the home page”.

5. Remove “Sidebar pages menu” from the WPML Navigation page altogether, and add it instead as a widget option. This is a widget option, and if the other widgets can have options, so can this.

Comment: the sidebar menu can be inserted as a widget, but these options also control other things. We’ll add a link to this management screen from the widget setup.

5. Trim The WPML Default Behaviour, Look And Feel

Using a vanilla WPML installation and the page menu template tag necessary to utilize the CMS features, you get the whole package. You get a bundled WPML page menu look, pull-down menus and everything.

While this is nice, it’s certainly not for everyone. And if we imagine that a future version of WPML automatically adds the page menu template tag, it’s certainly an elaborate set of defaults.

Top navigation

If you want the CMS features, the drop down menu is not optional.

Drop-down menus are inherently un-userfriendly. There are a number of reasons for this, mainly that it hides content and that mousing over dropdown menus requires finesse.

Additionally, because the drop-down feature is enabled by default, that means WPML’s template tag outputs every page and every subpage at once.

Suggestions:

1. The bundled CSS and drop-down menu should be optional, and disabled by default.

2. The default behavior should be to output subpages only when the main page has been
visited first.

3. Optionally, you should be able to output all subpages. This is also useful for some designs:

Top menu with all child pages shown

4. Whether you want to use an unstyled menu that shows all pages, subpages of the active page only, or the fully styled dropdown menu, this should be an option in the WPML Navigation options page:

Additional navigation options

6. More Options

If we imagine a future WPML where template functions are automatically activated along with the main plugin, there’s no reason it shouldn’t look exactly like a vanilla WPML-free WordPress installation does – except with a number of new and advanced features available.

Should the user then wish to enable some of the hard-core WPML features, dropdown menus, navigation grouping, category navigation and so on, these should all be comfortably available in the WPML Navigation options page.

Even more navigation options

Summary

WPML is the best multi-language plugin for WordPress yet. On top of that it adds a plethora of useful features that makes WordPress into a full-fledged CMS.

To reach full maturity, there are only a few hedges to cross. Some involve tweaking titles and
descriptions, others are structural.

The changes that would make the most difference to WPML, would be if — upon activation of the plugin — all relevant WPML features would be enabled in the frontend via plugin hooks with no need to change any templates at all. If, in addition to this, these features could be enabled, disabled and tweaked via an options page, WPML would become instantly accessible to the vast majority of the WordPress crowd.

About the author

Joen is a a webdesigner located in Copenhagen, Denmark. He’s educated in print design and has more than 8 years of industry experience in web-, interface- and usability-design. Among other clients, Joen has worked as a usability advisor for LEGO on the Mindstorms software.

Today, Joen‘s one-man enterprise provides pretty, web-standards compliant and highly user friendly websites. In addition to this, he provides clients with usability reviews of their current websites, detailing usability issues and suggesting improvements. Because the advice is based on an archive of experience, it’s both cheaper and more accessible than actual usability testing.

Joen blogs about webdesign, usability and movies on his personal website, http://noscope.com/. Work samples are available in the “work” section.

Styling WPML navigation

To apply your styling to the navigational elements, you need to override the CSS statements found in cms-navigation.css (a CSS file that comes with WPML).

Grab this file from wp-content/plugins/sitepress/modules/cms-navigation/css/ and add it to your theme’s directory. Then, load it in your theme. Make sure it’s done after the standard WordPress headers are loaded, so that your version of the CSS is loaded last and determines the styling.

Now, start editing it, to match your theme.

The CSS file is pretty well documented. For example, this part determines the 2nd level links formatting:

/* style the second level links */
#menu-wrap ul ul a, #menu-wrap ul ul a:visited {
color:#000; height:auto; line-height:15px; padding:5px 10px; width:150px;
}

To change the font color from black, just change the value in the color attribute.

I find it particularly helpful to use the great Firebug Firefox extension to edit CSS in themes. Once you’ve installed it, you can open Firebug, point to any element in the screen and see its CSS. Firebug will tell you which CSS statements control the visual display of each element.

Firebug crash course

• Install Firebug as a Firefox add-on.
• Click on the little Firebug icon to open its console.
• Click on ‘Inspect‘ and then on the element in the screen you want to check.

Here is a screenshot of Firebug showing the WPML.org’s main page debugged with Firebug. It shows the top navigation’s styling.

WPML debugged with Firebug (click to zoom)

Firebug also lets you edit the CSS inline. This means that you can test various changes without modifying the CSS file itself and see your changes immediately.

Inserting WPML navigation to your theme

For technical instructions on what to add to the theme, have a look at the getting started guide. You’re probably still wondering where exactly it would be best to add the different navigational elements.

For WPML.org, this is what we implemented:

• Top navigation: Added <?php do_action(‘icl_navigation_menu’); ?> just before the end of header.php (before the closing tag for <div id=”header“>. This inserts the top tab DIV with all its contents.
• Breadcrumbs trail: Added <?php do_action(‘icl_navigation_breadcrumb’); ?> to index.php, archive.php, page.php, single.php and search.php.
• Sidebar navigation: We didn’t add that to the theme at all. We’re using it as a widget, added from the admin panel.

Need more info?

We’re adding WPML navigation to a few popular open themes from WordPress.org. Once this is done, we’ll write a how-to post, explaining what we did for each.

It turns out this procedure can be much simpler than anticipated, given you’re doing things in their correct order. Here is what I did…

Some Background

I moved my site from WordPressMU to WordPress leaving the domain name intact.

This move was necessary. I was using WPMU for reasons that have long expired and the restrictions that it kept imposing were impossible for me. In addition, some plugins that I must use don’t work on WPMU.

Both sites run on the same server. Also, the domain name didn’t change. These two facts don’t matter much. I’ll explain the more general case where the move can be across servers and the site’s address can change.

Export from the current WordPress site

I went to the admin panel, clicked on Tools and used the Export feature.

This tool doesn’t need much in order to work. You can restrict the data to be exported according to the author (which I didn’t use). Then, you save the exported file locally.

The file you get is an XML file. Save it somewhere handy as you’re going to have to open it in a minute.

Create backup for all the uploaded files and download it locally

The export process will include all the texts in your website (posts, pages, comments, categories, etc.).

To include uploaded files, such as images, movies and audio, I suggest that you download them all as one big TAR file. My original site was a WPMU site so the files were located in:

wp-content/blogs.dir/BLOG_ID/files

Open a shell window (SSH), go to that directory and grab it all by typing:

zip -r wp_files.zip *

Now, you’ll have one pretty large file called wp_files.zip. Use an FTP program to download it locally.

While you’re at it, do the same for your theme(s). Go to your themes directory and create an archive of your theme(s).

zip -r themes.zip theme1 theme2...

Create the new WordPress site

Next, comes the standard WordPress install for the new site (where we’re going to transfer to).

Web server admin panels normally come with handy utilities that allow you to create this all in one click. I created the MySQL database manually, edited wp-config.php and adjusted the Apache configuration file to point to the new site.

If you’re also moving boxes, this would also be the time to update the Domain Name Server (DNS) entry for that site. Don’t wait until the DNS entry propegates all the way down to your PC. Instead, open the hosts file in your PC (in Windows c:\Windows\System32\drivers\etc\hosts) and add an entry for your new site with the new IP address. Remember to delete this entry in a couple of days.

Add the uploaded files and theme

Once the new WordPress site has been installed you can add back all the uploaded data and your theme.

Store that wp_files.zip file in:

/wp-contents/uploads

Unzip it there by opening a shell window and typing:

unzip wp_files.zip

There you go! All your uploaded files have been moved at once and will appear in your new blog.

Do the same for the themes. Copy to /wp-contents/themes and unzip there.

Patch up the exported file

This is the most critical part of this whole migration, so pay attention and handle with care.

Open that Export file you saved before. You can use any text editor, but don’t use a program that’s going to change the format (e.g. Word). Notepad would be just fine for this purpose (Start->Accessories->Notepad).

There are two things that need to be replaced:

1. Uploaded files (if they need to be moved)
2. Domain name (if that has changed)

I moved all the existing uploaded files from /files/ to /wp-contents/. This was a required step as I migrated from WPMU to WordPress. You don’t need to change anything if you’re moving from and to the same WordPress type.

If you’re changing the domain name, do a global replace and change from the old one to the new one. There should be lots of places where this appears – change them all.

Save the file to a different name, so that you have both the original and your edits. You’ll want to have the original in case your edits cause it to be broken. XML files cannot be loaded if their formatting is damaged.

Import the data

It’s time to use that data back to your blog, making all your contents available again.

Click on Tools->Import->WordPress.

Select the file we patched before and click on ‘Upload file and import’.

WordPress will offer you to download files. Don’t select this option. We’ve already transfered all the uploaded files from your new blog to this one. We’ve done it in one go instead of doing this individually.

At this point, WordPress will also offer you to assign posts to users. It’s a good time to recreate the old authors now.

Configure your new site

Go to your new site and follow the WordPress install wizard (just one step). Then, before jumping in to anything, go through the Settings section and adjust everything that needs changing. I had to change:

1. Settings: Changed the blog’s tagline
2. Reading: Changed the default home and blog page.
3. Permlinks: Changed from the default permlinks structure to year and month.
4. Discussion: Enabled threaded comments

Of course, your adjustments would probable be different. The point is that you should really go through all the pages under Settings and make sure that they’re right for you.

Add plugins

I could have also zipped the plugins directory and included that in the move, but I didn’t. As long as I’m already refreshing things, I thought it might be a good idea to redownload all my plugins from the WP plugins repository (you know, get the fresh versions of everything).

The improved (fixed) search facility available as of WP2.7.1 makes it much easier. Click on Plugins->Add, search for each plugin, download and activate. Took less than a minute for all my plugins.

Enable your theme

Once everything is back in place, it’s time to enable your theme (which might rely on plugins to work correctly).

Go to Appearance->Themes and select your.

You’re all done!

The first item of business is to think of what content is going to be on your site and how you want it organized. One of the easiest and most basic tools for website navigation is a site map. Grab a blank piece of paper and draw a site map of how your new site will be organized. If your site map looks like a tree with many branches, your site needs a ‘hierarchical’ navigation structure. If your site map ends up with groups of content your navigation will be ‘global’.

Hierarchical navigation allows your readers to drill down into the website to find the information they need. Navigation aids should allow them to go from page to page further into more detailed information. A bread-crumb trail would be nice so they can go back some levels and take another branch.

With global navigation your site visitors will be looking for a destination of content. It is like leaving town. There are towns in several directions but the visitor is only interested in travelling to one and will navigate in that direction.

After you get an idea how your content lays out, visit some websites that are in the same business or category as your new site. Take a close look on how their navigation scheme works. Take some notes on ideas you like and the things that confuse or annoy you. These notes will help you set up better navigation for your own site.

There are several ways to add navigation to your website. We have already discussed two:

1. Site map. I have found myself using the site map of several websites recently to find the content I was really interested in.
2. Bread-crumb trail. This form of nav only works if your visitor starts at the home page then drills down for content. It can be helpful if your site has type of organization.
3. Side bar menu. The most common in website design, especially on the left as we read left to right. Care must be taken to not get the sidebar too wide.
4. Top menu. Works if you do not have too many menu items. With pull-down options makes site navigation pretty quick. The top menu is also a good place for the Home, Contact and Site Map links even if you have a more involved side bar menu.
5. Imbedded links. Do not forget this old blogging standby. Imbedded links help you spread large amounts of related content over several pages or too give your visitors quick access to additional information.

I have a couple of final notes. If you are setting up a do-it-yourself WordPress website (i.e. not a designer or programmer) take a close look at how the themes you are interested in handle navigation. I once had too discard several themes I really liked because the top bar menu would not hold the names of all the links I wanted. Also, we offer a nifty CMS Navigation plugin that will allow you have easily have bread-crumb, pull down and side bar menus with related content.

• Step 1: You need a home page. From your Dashboard you want to Add New under Pages. This page will hold the content for your home page. Remember, the title for the page will become the main heading for your home page, so a title like “Home” will not cut it. The page needs to be published before you can select it as the home page for your site.
• Step 2: You will set your new Home page as the Home page for your website. From your Dashboard find the Reading page under Settings. On the page you will see this (click for larger view):

• Just change the Front Page displays to A static page. Then use the pull-down menu next to Front page to select the page you set up in Step 1 to be your home page. If you want your website to include a blog, you need to have a Post page also. You may first need to repeat Step 1 with a new page cleverly named Blog or News. If you do not select a Posts page, your site will not have a blog.
• Step 3: Change your permalinks. Under Settings go to Permalinks. For a CMS application a simple custom setting of your_url + /%postname%/ should work fine and be best for SEO (search engine optimization).
• Step 4: Check your home page. Your main site url should now show the page you set up as your home page. You now have a website based on WordPress rather than a blog.

As you can see it is pretty simple to make WordPress act like a CMS. The challenges are making it look the way we want (themes), perform the functions we need (plugins) and attract viewers to the site (SEO). I hope to be providing some good information in these areas in future posts.

1. Cost. When you get down to the bottom line it is always about the money. That is why it is called the bottom line. If you have the knowledge you can get a $100/year hosting service, spend $10 for a domain name, install WordPress, find some free themes, add some free plugins for the features you need and you are in business. Conversely, if you want a professional looking website and do not have the skills, you can hire a designer to just do the design work and not have the high nuts and bolts cost of having a built from scratch website.
2. Ease of Use. Once the WordPress based website is set up, the admin section is very easy to use to add or change content. Anyone who is familiar with word processing can write and publish a new page or post. A website owner can manage many of the functions of his site without having to call/e-mail the designer for every little change.
3. Great, creative Themes. If you take a look at websites that use some of the other open source CMS platforms, you start to see a sameness to their look. WordPress theme writers have made thousands of themes available for free or a premium and I am constantly amazed at the creativity. Your website definitely does not have to look like a blog.
4. Plugins, plugins, plugins! WordPress plugins can make your website do just about whatever you want. I often see something cool on another site, google that feature+wordpress=plugin and find the right tool to add that feature to one of my sites. Just upload to my hosting service and activate in wp-admin. I have done everything from change languages to live stock market quotes with plugins. Statistics, advertising, social media, custom menus, photos, videos, the list is almost endless.
5. Online help and support. With the growing use of WordPress there has developed a tremendous Internet database of knowledge on all aspects of using WordPress. I personally have no background in programming and was able to learn and set up several WordPress blogs and websites. For the more knowledgible than I, there are blogs and forums where the solution to any troubling issue can be found.
6. Bonus feature: WordPress comes with a blog attached. If you want a CMS for a website you probably want to include a blog. If you want your website to include a blog for your latest news and ideas it is easy to set up. If no blog is desired, that is quite easily done also.

As I stated in the opening, we want to become a resource here for those who are considering or already using WordPress as a CMS. We will be discussing some difference between website and blog design and would like to highlight some sites, developers and designers who are using WordPress as their CMS. ICanLocalize currently has several plugins available to enhance CMS usability. If you are using WordPress in CMS applications we would like to hear from you about your experience.