Wordpress as a CMS for Flash sites

The idea to use Wordpress as a back end for Flash websites is not original and it has been done many times before, yet it’s very hard to find a place where people explain exactly how they did it. For one of my latest projects, the campaign site of the upcoming winter edition of Heemstede Jazz, I decided to go for it. I managed to put the right pieces of the puzzle together and want to share it with you here.

When first googling the subject, I found a lot of false advice.

Bad: XML-RPC
There are people suggesting to use the XML-RPC connector to get at your data. For me this turned out to be a dead end. The XML-RPC is designed for creating alternate ways to maintain your Wordpress articles, not for read only access of your articles.

Bad: Atom-RSS
Then there’s people using the Atom-RSS feed to get to the data. The Atom feed is XML and you can read the fields and it works fine. But if you want to do anything custom, it will have to pulling your hair in no-time. Plus, it outputs so much more than you actually need, it’s a waste of your time and bandwidth.

Bad: Direct MySQL connection
The third way I got excited about was to completely ignore the Wordpress install and just connect to the database directly. This is without a doubt very powerful, but because Wordpress is updated and changed so often, it’s hard to find something online that works with the current version. No ponies’ Flash press looked promising, even using AMF to speed up things, but it’s no longer compatible with the latest Wordpress. Moving on!

Great: Custom XML Theme
Finally Jankees van Woezik got me in the right direction with a fourth suggestion, which proved to be exactly what I needed for my project. Instead of trying third party plugins and XML connectors to get to your data, just create your own theme from scratch and you’ll be able to access pretty much anything inside Wordpress. It’s not as hard as I though it would be, even with my PHP skills being neglected for several years.

In the end you’ll have a website running on Wordpress, containing all the data you want to display in plain HTML. Google will love the ease of indexing your content, but any human visitor will only see the fullscreen Flash you put on top of it all, utilizing SWFObject. Check out the source at Heemstede Jazz to see what I mean. Just before the SWFObject placement, there’s a little Javascript magic goin on by Peter Nederlof. It takes all the HTML content, converts it to correct XML and then passes it to your application as a flash var. Thanks Peter, for letting me use your cleaner library! As an alternative to passing the HTML content as a flash var, you can also load your content as XML from your site’s index.php directly, if you don’t mind loading the content twice.

Once in Flash, you can parse the passed XML and use it any way you like. By default, Wordpress let’s you output separate fields for any articles title, body text, category, tags and excerpt. If you need more control, Wordpress has the ability to add custom fields to every post, but if you don’t know what you’re doing with them, you can get lost very quickly. Again Jankees pointed me to the great plugin called Custom Field Template. With it, you can assign a certain group of custom fields (text fields, dates, image uploads) to an article, based on it’s category. Click here to see an image of it in action.

Once you have the custom field templates in place, you can start creating your theme. If you’re not a PHP developer, you’ll definately love the Wordpress bundle for TextMate. It has all the important loop methods and will help you get to the right WP-methods for finding your data.

As an added bonus to passing completely maintainable content to your Flash site, your site even has correct fallback content when viewing it with an iPhone. Thanks Jankees and Peter for helping me with all of this!

Here’s the Wordpress xml theme I made for the Heemstede Jazz website if you need a head start.