Integrate Plone and WordPress in 10 steps

Plone is the best Content Management System (CMS) around, and WordPress is the best blogging platform in the marketplace. What’s about integrating them ?

Now. If your time budget is in the weeks range, there’s a state-of-the art technique you can apply, described here – a must-read.

But. If you’re in a hurry and just looking at a quick, simple integration, then this howto is right for you.

So here we go.

Problem statement: we wish to integrate Worpress 3.0.1 into an existing Plone 4.0 beta website (say www.example.com) proxied by Apache with virtual hosts. The blog should integrate under the same primary domain (say example.com) so that it can be reached from the navigation tab bar of the main site, and have a consistent style.

Step 1: create a dummy folder in Plone called “blog” and publish it;

Step 2: log out from Plone, then click on the now empty blog folder and save the website homepage from your favorite browser as plone_before.htm;

Step 3: install WordPress 3.0.1 and activate multi-site mode with sub-domain sites;

Step 4: create a WordPress blog with a subdomain such as: wp.example.com;

Step 5: log out from WordPress, then open the empty blog and save the blog homepage from your favorite browser as blog_before.htm;

Step 6: create a child theme of WordPress 3 default theme twentyten called say exampletheme;

Step 7: create a short style.css file  to override the default styles to match the Plone appearance; something like:

/*
Theme Name: Twenty Ten Child - EXAMPLE blog theme
Theme URI: http://example.com/
Author: the WordPress team + me
Author URI: http://www.example.com/
Template: twentyten
Version: 0.1
*/

@import url("../twentyten/style.css");
#wrapper { margin-top: 10px; width: 100%; }
input[type="text"], textarea { padding: 0px; background: #FDFCFA; border: 2px inset; }
#main { width:75%; }
#footer { width:96%; }
#portal-footer { height:14px; }
h1 { font-size:1.5em; }
h3 { font-size:1em; }
.widget-title { font-size:1em; margin-top: 10px; }

Step 8: copy from twentyten into $(WPHOME)/wp-content/themes/exampletheme the files: footer.php, header.php; now compare the plone_before.htm and blog_before.htm files and identify the parts that fit in footer.php and header.php – edit these files and monitor the effects by simply refreshing the blog home (wp.example.com);

Step 9: copy your own logo.png into $(WPHOME)/wp-content/themes/exampletheme, then tweak in header.php the Plone-generated:

<a id="portal-logo" title="Home" accesskey="1" href="http://www.example.com">
<img src="http://www.example.com/logo.png" alt="" title="" height="111" width="600" /></a>

into something like:

<a id="portal-logo" title="Home" accesskey="1" href="http://www.example.com/">
<img src="wp-content/themes/exampletheme/logo.png" alt="" title="" height="111" width="600"></a>

Step 10: trick Apache into redirecting the requests for www.example.com/blog to wp.example.com with this rewrite rule:

RewriteRule ^/blog http://wp.example.com [L,R]

Done !