Knight Lab Timeline


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

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

  • 아프리카 어
  • 아랍어
  • 아르메니아 어
  • 바스크어
  • 벨라루시아 어
  • 불가리아어
  • Catalan
  • 중국어
  • Croatian / Hrvatski
  • 체코어
  • 덴마크어
  • 네덜란드어
  • 영어
  • English (24-hour time)
  • Esperanto
  • 에스토니아 어
  • Faroese
  • 페르시아 어
  • 핀란드어
  • 프랑스어
  • Frisian
  • 갈리시아 어
  • 그루지아 어
  • German / Deutsch
  • 그리스어
  • 히브리 어
  • 힌두어
  • 헝가리어
  • 아이슬란드 어
  • 인도네시아어
  • 아일랜드어
  • 이태리어
  • 일본어
  • 한국어
  • 라트비아 어
  • 리투아니아어
  • 룩셈부르크어
  • Malay
  • Myanmar
  • Nepali
  • 노르웨이어
  • 폴란드어
  • 포루투갈어
  • Portuguese (Brazilian)
  • 루마니아어
  • Romansh
  • 러시아어
  • Serbian – Cyrillic
  • Serbian – Latin
  • Sinhalese
  • 슬로바키아 어
  • 슬로베니아 어
  • 스페인어
  • 스웨덴어
  • 필리핀 따갈로어
  • 타밀 어
  • Taiwanese
  • 텔루구 어
  • 태국어
  • 터키어
  • 우크라이나어
  • 우르두어

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.



  1. Upload the plugin to the /wp-content/plugins/ directory
  2. 워드프레스의 ‘플러그인’ 메뉴에서 플러그인을 활성화하세요.
  3. Learn how to create the Timeline source at
  4. Use the shortcode on your post/page: [timeline src="Your source url here"]

Extra tip – If you want do embed outside of a post, use the following code on your template:

Alternatively, you can use the TinyMCE button to create your own shortcode as well.


2023년 4월 3일
Tried to embed the created Storymap, but gives me an error. A direct link works fine, but I want to embed it in a page. Unfortunately.
2019년 5월 7일
My go-to timeline for a horizontal timeline setup (rather than a vertical scroll-to-navigate timeline which this doesn't really accommodate). It would be nice to see some more updates to this plugin. One larger request would be to make it not require Google Spreadsheet and instead allow it to be managed via the WordPress admin.
2019년 2월 12일
I really like the design and the possibilities but if you ever need support, phewf, go elsewhere. It's taken me nearly 48 hours to get answers on how to get my timeline working up and running again after I made a very minor change to the content, which shouldn't effect anything about the functionality of the plugin. The support staff seem really indifferent, (I was literally told to read the instructions :s) reluctant to read emails properly, respond to emails in a timely manner. This is all super-too-bad because it's a good tool, however, I would not recommend it if you are trying to use it in a professional capacity.
2017년 2월 3일 6 replies
I love this tool, but unfortunately the plug-in just doesn't seem to work. Even using the default Google Docs spreadsheet results in errors. We reverted to using the iframe embed method which works just fine. Not sure if the error is a result of changes to Google Docs, or possibly another update. It's just a shame - hopefully a future update may resolve the problems. In the meantime, I'd suggest anyone having problems uses the iframe embed method (you can generate the iframe via the Timeline website:
모든 13 평가 읽기

기여자 & 개발자

“Knight Lab Timeline”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.


자국어로 “Knight Lab Timeline”(을)를 번역하세요.

개발에 관심이 있으십니까?

코드 탐색하기는, SVN 저장소를 확인하시거나, 개발 기록RSS로 구독하세요.


If you find this changelog out of date, you can assume that the plugin update is merely to pull in a new version of TimelineJS (especially if the plugin version number is 3.x.y.0)

The most up to date change log for TimelineJS itself can be found at

  • Revert to pre-code formatter plugin since it seems to have introduced more regressions than realized.

  • Fix regression introduced by codeformatter which forced percentage-based width/height values to integers instead.

  • Update error messaging to give clearer instructions when encountering Google CSV permissions bug.

  • Update to TimelineJS 3.8.10. Fixes Instagram MediaType in response to API changes.

  • Update to TimelineJS 3.8.2

  • Update to TimelineJS 3.6.2, verify plugin works with WP5

  • Update to TimelineJS 3.6.0, which anonymizes IP addresses when tracking Timeline events in accordance with the GDPR.

  • Catch up to latest release of TimelineJS, test on latest version of WordPress.

  • CSS styling fixes, including one affecting WordPress plugin users who use the .vcard CSS class.

  • Improvements in translations for Finnish, Hungarian, Swedish
  • support more image URL formats for timenav thumbnails

  • Update to TimelineJS 3.3.14 — fixes Imgur bug
  • Experimental: register a TimelineJS oembed provider. You can now embed a timeline just by getting the URL for “get link to preview” from and putting it in a post on a line by itself. We’re not entirely clear why width/height parameters are not being honored.

  • Minor TimelineJS3 version update
  • Fixes to plugin deployment/working out kinks in update

  • Minor TimelineJS3 version update
  • Fixes to plugin deployment/working out kinks in update

  • Major update: this plugin now supports the TimelineJS3 rewrite. To preserve backwards compatibility, you must include this in your shortcode to use the new version of Timeline: version="timeline3". This will be done automatically if you use the “Add Timeline” button in the editing interface.

  • Revert animation changes introduced in 2.35.5

  • Fix URL linking regression introduced in 2.35.3
  • Animation optimizations from #681

  • Fix Stamen map tile URL bug

  • Many updates to localization: new and changed languages.


  • Fix mobile display bug.


  • Fix date initialization process to address Firefox bug in UK/Ireland (


  • Remove HTTPS URL rewriting for older IE.
  • don’t do analytics on https
  • Check to make sure that every slide has a start date, so that people get a clear warning if the spreadsheet header has been changed.
  • fix jquery version check, again. (should accept jquery 2, although TimelineJS has not been tested with jquery 2) cf. #551
  • Update ko.js translation file
  • Update fa.js translation file

  • Update to TimelineJS 2.33.1: fix bug handling media URLs; minor updates to zh-cn localization file.

  • Update to TimelineJS 2.33.0: better handle changes to Google Maps and Spreadsheet URLs; add ‘W’ token for date format; accept *.bmp as image URL; fix jQuery version check; fix untagify; more permissive on iframe markup; treat Google Streetview API images as images, not maps; set maxheight on soundcloud embeds; crush png files.

  • Update to TimelineJS 2.32.0: Stop YouTube players when slide changes; Better method for determining embed path root; Check for iframe and blockquote media before other url tests; Add languages: ‘hr’ (Croatian), ‘uk’ (Ukrainian); minor fixes to language files for ‘fi’ (Finnish) ‘sl’ (Slovenian). Plugin-specific: add ‘OpenStreetMap’ option to map-type menu in shortcode builder.

  • Update to TimelineJS 2.31.0: Add languages: ‘ro’ (Romanian), ‘th’ (Thai); minor fixes to language files for ‘es’ (Spanish) ‘fa’ (Farsi), ‘hu’ (Hungarian), ‘no’ (Norwegian); add OpenStreetMap as a map option (‘osm’); Support ‘.svg’ as an image media type; support custom thumbnails when no media is specified; clearer warning about “compatibility mode” to IE users.

  • Update to TimelineJS 2.30.0: Fix language code for ‘zh-cn’ (Chinese); add ‘fa’ (Farsi); Move ‘remove’ function from Array.prototype to a util method to avoid adverse affects on other JS code.

  • Incremented version for semi-separate versioning with TimelineJS

  • Initial time using deployment script


  • Modified to match current TimelineJS version number


  • First stable release