Integrating External Content with WordPress

I've been developing andrewj.com for about 15 years, and although I'm not that prolific I've built up quite a lot of content.

I recently converted my blog from an old bespoke (= "custom", for my American friends) solution to one based on WordPress. However, this created a problem, in that the WordPress model is to hold all content in the database, and that wasn't the right model for me.

Firstly, I have a number of articles which are very long for a blog post, and I had no interest in restructuring them. I also didn't want to break external links to the existing articles.

Next, I decided that I wanted the freedom to continue to write in that style. Some of my writing takes several weeks, and it works for me to draft it as separate HTML pages. I also sometimes want to include active content or multiple images, and I don't want to create a large and unwieldy WordPress database full of such stuff.

Finally, my online photo galleries are managed and generated using Jalbum, and I wanted to find a way of neatly integrating single images into my blog, complete with the watermarks and metadata extraction which Jalbum manages so well, without duplicating that functionality in WordPress.

This is probably typical of many older web sites, but WordPress doesn't really embrace the integration of external content. This article describes how I solved this problem, and a WordPress plugin I have developed to make my solution reusable.

My requirements for "integrating external content" derived from what I'd done with my bespoke blog, and can be summarised as:

1. WordPress should publish the abstract / commentary / announcements. I would write these separately to the main article. WordPress should also handle feed generation and so on.
2. Default links from WordPress (for example, from the post title) should go to the full external article, not the blog post. There should be separate links to the Permalink and so on. This should all be automated driven by the addition of one item of metadata to the post, a link to the external page.
3. WordPress should also handle the collection and approval of comments and trackbacks. These should be visible appended to the external page, with a link back to the WordPress post for further commenting. This should be capable of integration with any web page, by the addition of a maximum of one line of HTML code.
4. For image posts, WordPress should automatically link to the the image and bring in its metadata from the relevant Jalbum slide page. I'm not interested in merging the whole of my album into WordPress. The image should be accessed as a link, not copied into the WordPress file structure.
5. WordPress should also manage comments on my album. It should be possible to comment on any image in my album without having a blog post for every image.
6. Image posts should include a thumbnail of the image in my feeds, which will show up in feed-readers (such as Internet Explorer's feed reader, or Google's feed support).

Essentially the solution is as follows:

1. "Tag" any blog post with one of three custom fields, each of which contains the URL of external content: link (for pages outside your web site), full (for pages on your web site), or image (for a Jalbum slide).
2. Add code to your WordPress theme which adds or modifies appropriate links in the post if it finds one of these custom fields.
3. For posts with an image tag, use S C Chen and Jose Solorzano's excellent simplehtmldom library to parse the Jalbum slide page, extract the main <img> tag and optionally the image metadata, and include those in the blog post.
4. Develop a couple of simple php pages which attach to WordPress and display any comments on the relevant post. Include these in an iframe on the relevant external pages.
   • For external articles, the <iframe> code includes the blog post slug, so it links back directly to the original blog post.
   • For Jalbum slide pages the mechanism is slightly more generic, extracts the URL of the parent slide page, and points back to a generic WordPress page for managing image comments.
5. Add code to the WordPress page template so that it can display an image (in the same way as for a blog post with an image tag), and then marks any comments with the root filename of the image to which they apply.

I've wrapped my solution up into a WordPress plugin. To use this you'll have to be willing to edit your theme files, a couple of general-purpose include files and, if you're linking into Jalbum, the slide template for your Jalbum skin.

The plugin is designed and tested to work with WordPress 3.0, but it should work with 2.9 which also supports the required metadata functions.