poetaster

<h4>EN:</h4>
A simple wordpress plugin to parse shortcodes and produce a nice html/css only timeline.
This plugin provides 4 shortcodes:
<ul>
<li>[ctimeline] – a wrapper for the entire timeline</li>
<li>[ctentry] – a date label with an entry and option content</li>
<li>[ctspace] – a simple spacer</li>
<li>[ctdate] – not implemented yet.</li>
</ul>
Take a look at the screenshots to see what rendering looks like. CSS3 
transitions and html supply minimal animations. Most markup can be used within 
the shortcodes to achieve formatting and, for instance, embed images. The 
following example demonstrates,
<ul>
<li>‘fake’ super/sub sections, not using the ‘date’ param of ctentry </li>
<li>embed a picture</li>
<li>format a label</li>
</ul>
[ctimeline]
[ctentry date=”” label=”2015″] Wasn’t much going on in 2015.[/ctentry]
[ctentry date=”11 May 2015 ” label=”The title of this entry reflects the needs of verbose headline copy editors.”]
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
[/ctentry]
[ctspace][/ctspace]
[ctspace][/ctspace]
[ctentry date=”” label=”2016″] A bit more going on in 2016.[/ctentry]
[ctentry date=”12 May 2016″ label=”12th cool”] 
Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. 
[/ctentry]
[ctentry date=”13 May 2016″ label=”13th cool”] 
In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Curabitur tortor. Pellentesque nibh. Aenean quam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
[/ctentry]
[/ctimeline]

csstimeline

Miguel Peixe

zachwise

JoeGermuska

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, <a href="http://timeline.knightlab.com/" rel="nofollow ugc">Google Spreadsheet and JSON data sources</a> “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
<ul>
<li>Afrikaans</li>
<li>Arabic</li>
<li>Armenian</li>
<li>Basque</li>
<li>Belarusian</li>
<li>Bulgarian</li>
<li>Catalan</li>
<li>Chinese</li>
<li>Croatian / Hrvatski</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>English</li>
<li>English (24-hour time)</li>
<li>Esperanto</li>
<li>Estonian</li>
<li>Faroese</li>
<li>Farsi</li>
<li>Finnish</li>
<li>French</li>
<li>Frisian</li>
<li>Galician</li>
<li>Georgian</li>
<li>German / Deutsch</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Hindi</li>
<li>Hungarian</li>
<li>Icelandic</li>
<li>Indonesian</li>
<li>Irish</li>
<li>Italian</li>
<li>Japanese</li>
<li>Korean</li>
<li>Latvian</li>
<li>Lithuanian</li>
<li>Luxembourgish</li>
<li>Malay</li>
<li>Myanmar</li>
<li>Nepali</li>
<li>Norwegian</li>
<li>Polish</li>
<li>Portuguese</li>
<li>Portuguese (Brazilian)</li>
<li>Romanian</li>
<li>Romansh</li>
<li>Russian</li>
<li>Serbian – Cyrillic</li>
<li>Serbian – Latin</li>
<li>Sinhalese</li>
<li>Slovak</li>
<li>Slovenian</li>
<li>Spanish</li>
<li>Swedish</li>
<li>Tagalog</li>
<li>Tamil</li>
<li>Taiwanese</li>
<li>Telugu</li>
<li>Thai</li>
<li>Turkish</li>
<li>Ukrainian</li>
<li>Urdu</li>
</ul>
<h3>Shortcode options</h3>
<pre><code>[timeline width="800" height="600" maptype="watercolor" src="Your source url here"]
</code></pre>
<ul>
<li>src: Data source url, typically to a Google Spreadsheet as <a href="https://timeline.knightlab.com/docs/using-spreadsheets.html" rel="nofollow ugc">documented on the TimelineJS website</a>. Alternatively, you may use <a href="http://timeline.knightlab.com/docs/json-format.html" rel="nofollow ugc">JSON</a> to configure your timeline. [required]</li>
<li>width: Custom width (default is 100%)</li>
<li>height: Custom height (default is 650)</li>
<li>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.</li>
</ul>

Knight Lab Timeline

what is Taiwanese?

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.

Great UI, Easy Updates, and Nice Configuration/Customization Options

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

After June 8, 2021, if you configure your  …

csstimeline vs Knight Lab Timeline