Getting a Simile Timeline to Work in WordPress

The first step is to get it working on static pages. Kiyohito Yamamoto; provides a great starter kit. You’ll save yourself some trouble if you create a separate .js file for your own timeline scripts.

Yamamoto’s script is pretty great, but if you try using Timeline 2.3.0, you’ll discover that the Timeline.DefaultEventSource.Event() constructor has changed. The fix is pretty easy, though. I just use named parameters instead:

var event = new Timeline.DefaultEventSource.Event({
   text: title,
   description: description,
   instant: true,
   start: start,
   end: null,
   latestStart: null,
   latestEnd: null,
   isDuration: false,
   image: image,
   link: link,
   icon: null,
   color: undefined,
   textColor: undefined
});

Once that’s working, you need to get it working in WordPress. That means finding a way to embed the script that we just created, and the Simile Timeline libraries in the <head> element. Thanks to Peter Binkley, I learned that you can install the HiFi plugin, which lets you inject code into the <head> element on a post-by-post basis. Perfect.

So with Hifi installed, I added the <body> of my static HTML page to the post, and added these lines to the new “Head injection” field:

<script src="wp-content/timeline_2.3.0/timeline_ajax/simile-ajax-api.js?bundle=true" type="text/javascript"></script>
<script src="wp-content/timeline_2.3.0/timeline_js/timeline-api.js?bundle=true" type="text/javascript"></script>
<script src="wp-content/oss-timeline.js" type="text/javascript"></script>

Then I hit “Preview”, and everything was broken. I found that if you’re working in Chrome, the “Preview” function won’t work. If you open the “Developer Tools” under the Wrench, and visit the Console, you’ll find this error: “Refused to execute a JavaScript script. Source code of script found within request.” This is because the “Preview” function uses a POST to render the page, which triggers Chrome’s protections against cross-site scripting attacks. So either save the page as a private post while you’re working on it, or debug it using FireFox.

That’s it! You can see this at work on the Open Source in Government timeline.