Knight Lab Timeline

Use the incredible HTML5 Timeline developed by Knight Lab on your website. As easy as writing a shortcode.

Author:Knight Lab (profile at wordpress.org)
WordPress version required:2.0.2
WordPress version tested:6.2.4
Plugin version:3.9.3.4
Added to WordPress repository:15-01-2014
Last updated:15-03-2024
Rating, %:76
Rated by:13
Plugin URI:http://timeline.knightlab.com/
Total downloads:75 712
Active installs:1 000+
plugin download
Click to start download

A simple shortcode plugin to add the TimelineJS made by Knight Lab.

NOTE While this plugin works up to the listed “tested” version of WordPress, it does not work as it originally did. Knight Lab does not have dedicated PHP development resources, and has not been able to fully adapt this plugin to the new Gutenberg blocks editor in WordPress. The original plugin provided an interface for customizing a timeline in WordPress, but that doesn’t work in the new editor. In short, if you’ve been using the Timeline plugin for WordPress, your existing timelines should continue to work. We would love help from the WordPress community in updating or replacing this plugin with something which is better suited to the new editor paradigm.

Supports custom width and height, Google Spreadsheet and JSON data sources “Learn how to create your data source”) and many more.

Checkout how to create your amazing Timeline at http://timeline.knightlab.com/

To embed your timeline use the button located at the post content editor (TinyMCE).

You can also embed the Timeline on your post using this shortcode :
[timeline src=”Your source url here”]

TIP – If you want to embed outside of a post, use the following code:

Supported languages

  • Afrikaans
  • Arabic
  • Armenian
  • Basque
  • Belarusian
  • Bulgarian
  • Catalan
  • Chinese
  • Croatian / Hrvatski
  • Czech
  • Danish
  • Dutch
  • English
  • English (24-hour time)
  • Esperanto
  • Estonian
  • Faroese
  • Farsi
  • Finnish
  • French
  • Frisian
  • Galician
  • Georgian
  • German / Deutsch
  • Greek
  • Hebrew
  • Hindi
  • Hungarian
  • Icelandic
  • Indonesian
  • Irish
  • Italian
  • Japanese
  • Korean
  • Latvian
  • Lithuanian
  • Luxembourgish
  • Malay
  • Myanmar
  • Nepali
  • Norwegian
  • Polish
  • Portuguese
  • Portuguese (Brazilian)
  • Romanian
  • Romansh
  • Russian
  • Serbian – Cyrillic
  • Serbian – Latin
  • Sinhalese
  • Slovak
  • Slovenian
  • Spanish
  • Swedish
  • Tagalog
  • Tamil
  • Taiwanese
  • Telugu
  • Thai
  • Turkish
  • Ukrainian
  • Urdu

Shortcode options

[timeline width="800" height="600" maptype="watercolor" src="Your source url here"]
  • src: Data source url, typically to a Google Spreadsheet as documented on the TimelineJS website. Alternatively, you may use JSON to configure your timeline. [required]
  • width: Custom width (default is 100%)
  • height: Custom height (default is 650)
  • version: Optional. If set to ‘timeline3’, then the current version of TimelineJS will be used. If omitted, TimelineJS 2.35.6 will be used. This version of TimelineJS is no longer supported, but is preserved for backwards compatibility.

Screenshots
ChangeLog