6

Intro

In this guest post, Wolf-Dieter Grabner, tells about building a multilingual corporate site using WordPress, Thesis theme and WPML.

Wolf-Dieter gives both the why and the how, which are equally interesting. It shows how WordPress is used as a time saving tool for both the web developer and the client.

The Client

SBA Roll Shop Solutions is one of the leading manufacturers of roll grinders. While most of us haven’t seen these high precision devices in real life, a lot of everyday products like paper or metal foils depend on extremely even rolls.

In January 2010 SBA approached me through one of my clients, asking me for a new homepage, as the old one was still based on frames and static HTML pages.

We had a short time available, because there was an upcoming conference in South America that the company was going to attend so designing the website first and writing the content afterwards was not a good option. I supplied the members of the company’s marketing with a basic setup of WordPress and Thesis and they could easily start writing the content right away.

WordPress and Thesis

What I really like about WordPress is the ease of use in comparison to other content management system for this type of site (for example Typo3 or Drupal). If you can use a text editor or word processor, you’re ready to use WordPress. Thanks to plugins like WordPress Multi Language (WPML), even very complex sites work surprisingly well.

Clients often have problems imagining a prototype or draft version if is looking too rough and unfinished. After using quite a lot of open-source and custom-made templates, I have been switching to Chris Pearson’s Thesis Framework for all recent projects: I find it to be the best solution to design prototypes. It is very easy to customize, once you are accustomed to the use of the custom CSS file and the template’s hooks system. By keeping the template and the adaptions for the individual site separate, updating the template does not imply any changes to the site.

Going International

Right from the start, SBA wanted the site to be available in multiple languages. About one month after the English version, also the Chinese version went online; German will follow.

Setting up WPML took about five minutes. Apart from choosing the languages, almost nothing was changed from the defaults.

Using WPML with Thesis

Thesis’ default drop-down menu is quite nice as you can rearrange the items in the theme’s preferences and also rename pages. Nevertheless, it does not work with WPML right out of the box: it’s showing all languages of an individual page at the same time instead of just the current language.

As an alternative, one can use WPML’s drop down menu but it does not support more than two levels, which was not meeting the client’s requirements. Navigo 1.2 offers XHTML strict output, works with WPML and offers custom classes and IDs for formatting the drop down menu. It proved to be a nice companion to Superfish, a jQuery enhanced drop down menu.

Using Thesis custom_functions.php, the navigation can easily be added to the template:

Adding your own Navigation to Thesis

function custom_thesis_nav_menu() {
    echo ('<div id="top-nav"><div id="top-nav-fix">');
    if(function_exists('navigo')) {
      navigo('sort_column=menu_order&level1=sf-menu&level2=l2&level3=l3');
    }
    echo ('</div></div>');
}

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_html', 'custom_thesis_nav_menu');

The example shows a simple function that’s creating the needed nesting and also calling navigo with some parameters to get the desired markup.

After removing the default Thesis navigation, the new function is added to the appropriate hook. Two div-tags were used to fix the position of the drop down menu even when scrolling the page. After adding the Superfish CSS markup to the template’s custom.css file, everything works nicely. When not pinning the menu to the top of the page, you can of course use thesis_hook_before_header for it. The following source snippet allows you to use the default drop down menu of WPML with Thesis:

function thesis_navigation_wpml() {
    do_action('icl_navigation_menu');
}

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'thesis_navigation_wpml');

Breadcrumb Navigation

Because of the large number of pages, we have also added WPML’s breadcrumb navigation to the site. Again, by using custom_template.php, it’s a matter of minutes:

function custom_thesis_WPMLbreadcrumbs() {
    echo ('<div id="breadcrumbs">');
    do_action('icl_navigation_breadcrumb');
    echo ('</div>');
}

add_action('thesis_hook_before_content', 'custom_thesis_WPMLbreadcrumbs');

Add some custom styles to custom.css and you’re done.

Experience and next Steps

WPML works just the way it should – even details like the XML sitemaps plugin. Being able to teach via Skype a Chinese sales person how to use the tool for translating the site is certainly a good thing.

About the author

As a photographer with an engineering background and a business degree, Wolf-Dieter Grabner regularly works for clients like Coke, Universal Music, the Vienna Musikverein or Austrian petrol company OMV.

He’s lecturing visual communications at Linz University for Art and Industrial Design and still, he enjoys working on web projects a lot. One thing all his jobs have in common? Changing perspectives and bringing new views.

6 Responses to “Building a Company Site with Thesis and WPML”

  1. I liked your article very much, I was looking for a multilingual sites wordpress and thesis article and I just found it 😀 It will be usefull for my project, when it is finished I’ll send you the link.

  2. A perfect article for the problem i am facing
    – i thought a multi-language site for a blog was a no no due to the overheads / resources required to translate.
    As a fellow Thesis user this really encourages me to see WPML integrated and working.
    Great post, thanks – now just gotta see if will work for my site…

  3. Hi Amir,
    I tried the Navigo plugin to fix the Navbar problem I was facing about my Korean menu not showing up. After inserting the code in Custom Function, the list of menu appears right on the top left of my screen (before the header and everything else). Is there something I did wrong?

    Where do I insert this code? Is it at Custom_Function.php as well?

    function thesis_navigation_wpml() {
    do_action(‘icl_navigation_menu’);
    }

    remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);

    Appreciate your kind advise.
    add_action(‘thesis_hook_before_header’, ‘thesis_navigation_wpml’);

  4. Great setup for a multilingual page, very useful if you make webs for a corporative client, as it’s the case of the article.

    I have to say that I also own and use the Thesis theme, and I think it is useful for prototyping and quick development, but it is sometimes limited when you try to do deeper customization.

    Great post!