Creating a fully functional CMS with WordPress, WPML and Flutter

by Mike Badgley on August 7, 2009

Working on a redesign for a client, which is being built with WordPress. The client had a theme already created, so what had to be done was considerable content-population as well as building and structuring the site.

This site is multilingual – English and French and is fairly large with approximately 60 pages in each language. In addition, many of the pages feature a right-hand sidebar that contains various content pieces, ranging from basic contact information to the list of recent blog posts.

Obviously, some third-party plugins will be required to get this up and running. I intend to use the following plugins to achieve a fully multilingual CMS that will allow for custom sidebar content.

Multilingual support

I’ve chosen WPML for this task as not only is it a well-documented plugin, but the support, from what I’ve heard, is exceptional.

WPML is a WordPress plugin that can turn any WordPress or WordPressMU site into a full featured multilingual content management system.

WPML allows building rich websites using WordPress. Authors can stick to managing contents while WPML manages the site’s structure.

After downloading, installing and activating the plugin, I proceeding to follow the first step in the user guide, which is to setup the languages that will be used within the site. However, there were no languages available for me to add. After some research on the topic I was able to find out that this was a compatibility issue with latest version of WordPress (2.8.3) and that there was a beta version available (of WPML) that would fix this. Well, time to give the WPML support team a test to see if they were as good as advertised.

Well, call me impatient, but I got sick of waiting for a reply back from the support team, so nearly four hours later I looked around and was able to find an answer in their support forums which fixed my issue.

Monday, August 10th, 2009 – 2:20PM
Just a quick follow-up – I did get a response over the weekend from their support team and they actually sent me a link to download the beta version of the plugin before it was released to the public, so I’m pretty happy with that kind of support!

After getting the language issue resolved, the only remaining  steps in the installation process was to add the navigation calls to my WordPress theme.

Top (primary) navigation

Easy enough, just a matter of pasting the code below into the header.php file of my theme:

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

From there it was just a matter of hiding the top-level pages that I did not want to appear in the navigation. Also, there are default styles applied to this and all other navigation pieces (sidebar and breadcrumb) that come with WPML, so these will need to be disabled or overwritten.

Removing a page from the top-level navigation is very simple – just edit the page and in the CMS Navigation box, there is an option to Exclude from the top navigation.

After creating the rest of my top-level pages I had a fully functional model. Now for the next test – ensuring that the pages I create with the Flutter plugin (see below) will work seamlessly with WPML.

Custom sidebar content via Flutter

For the custom sidebar content that exists on many of the pages, I’ve chosen a fairly new CMS-type plugin called Flutter for this task. I’ve played around with this before – although not for any client-related work – and it seemed to be pretty good. Like WPML, it has a professional looking Web site and the documentation is lacking, the tool itself is pretty easy to use and understand.

Flutter is a feature rich WordPress CMS plugin that focuses on easy templating for the developer and simplifies content management for the admin by creating custom write panels that can be fully customized (radio buttons, file uploads, image uploads, checkboxes, etc).

The installation is simple, with the exception of having to manually create and give read and write access to a few folders it uses for caching and other tasks unknown to me.

Will Flutter work with WPML?

I created a few test pages from templates I had created within the Flutter plugin and WPML had no problem at all in picking them up. That’s a relief for sure, considering the fact that this site launches on Thursday morning!

And now, back to our previously scheduled programming…

Adding in the language toggle

Again, like the rest of the WPML rendered navigation, this comes pre-styled, which is sort of annoying. Also, the default format of the language switch is a dropdown menu, which is something I’m not keen on either for this WordPress theme.

Of course, WPML is very customizable, so there is in fact an alternative way to displaying the language toggle.

For this setup I only want to display the language label that the user can switch to, i.e. on an English page there would be a “French” label and vice-versa if on a French page.

Here’s how I went about it:

<?php
	$languages = icl_get_languages('skip_missing=N');
	$langToggle = ''; 

	foreach($languages as $lang)
	{
		if($lang['active'] == 0)
		{
			$langToggle .= '' . $lang['native_name'] . '';
		}
	} 

	echo $langToggle;
?>

Conclusion

So there you have it, a fully functioning multilingual site that acts and works like a “real” CMS. It shows you what is possible with WordPress when you have experienced developers, like Flutter and WPML, creating great plugins for an already great product in WordPress!

7 comments

Nice post. Its usefull form me as a newbie in WP.

by Izdelava spletnih strani on May 14, 2010 at 6:10 pm. #

First of all, I think WPML and Flutter are one of the best plugins I’ve come across in a long time. They really fill a gap and lift WP from a blogging tool to a CMS.

I did a test on a fresh WP install, enabled WPML, defined two languages and created a “books” panel with Flutter, defining some typical custom fields like author,year,publisher,etc.

Maybe I did something wrong but when I want to add a translation, when switching to the translation language, the flutter defined custom fields aren’t shown anymore. Only in the default language they get displayed. Can anyone confirm if WPML and Flutter work together?

by jorix on November 10, 2009 at 4:42 pm. #

Hi Mike,

Your article was interesting. However, you didn’t mention if you managed to translate custom fields generated by Flutter (which in my opinion is the whole idea of Flutter)? Or did you just create write panels with default title/wysiwyg -editor?

I’m trying to achieve Flutter/WPML integration myself, but with no luck so far.

by Jussi on November 4, 2009 at 3:03 pm. #

[...] the original here: Creating a fully functional CMS with WordPress, WPML and Flutter | Life @ iStudio Comments0 Leave a Reply Click here to cancel [...]

by Creating a fully functional CMS with WordPress, WPML and Flutter | Life @ iStudio on October 26, 2009 at 1:19 pm. #

Interesting and informative. But will you write about this one more?

by Cornelius on August 12, 2009 at 1:57 am. #

I’ll be doing a more in-depth tutorial in the next week or so which will be available on the blog for WPML.

by Mike on August 12, 2009 at 7:59 am. #

Hi Mike,

I can’t quite identity you in our forum and didn’t find you contact information here.

Can you get back to me?

by Amir on August 11, 2009 at 10:10 am. #