So, this is a quick how to post about how you can make a dynamic timeline on WordPress. For a previous WordPress web design project for the Rathmines and Rathgar Musical Society I had to find a nice and tidy way to create a dynamic timeline on WordPress to archive 100 years of PDF brochures from past musicals. There were over 200 brochures so that data entry part of the job was always going to be grim (not all web dev can be sexy I guess) but I wanted the solution to be neat.
After lots of trial and error and experimenting with different set ups I finally arrived on the one which yields a timeline like the below. This timeline is powered using Timeline JS. And, Timeline JS is, as they say themselves
“TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.”.
How To Make A Dynamic Timeline on WordPress
The set up of the timeline is very simple. You need to create a public Google spreadsheet with the prerequisite fields listed in a way that Timeline JS can understand. Once your spreadsheet is complete to create the dynamic timeline it’s simply a case of adding an iFrame to your WordPress post or page and then badda bing, you’re timeline is complete.
As the JS Timeline is powered by a public Google spreadsheet you could collaborate with others, or let others maintain or add more entries to the spreadsheet making it a somewhat dynamic timeline. You could also do some data manipulation in the spreadsheet – it’s pretty powerful once you get into it.
How to make a dynamic timeline on WordPress – Timeline JS
For the version of the JS Timeline that I created for the R & R there was an extra step than the process outlined above. As I had to archive PDF files I first uploaded them to issuu.com and then pointed the JS Timeline towards where the PDF was uploaded. The JS Timeline then took a screenshot of each of the issuu.com pdf uploads and used those screenshots to populate the timeline yielding, for me, the solution I wanted.
If you’re looking to create a dynamic timeline on WordPress I hope this post, and the open source JS Timeline, will help you out! Join the mailing list below or track me down on line for future tips, tricks and assorted good stuff..