Displaying a timeline on a Commons site is a powerful way to track historical events pertaining to your topic. There are three plugins on the Commons which provide this functionality.

Knight Lab TimelineJS

The Knight Lab TimelineJS  plugin is a powerful tool for creating visual timelines that can be embedded directly into your site’s pages and posts.  Each timeline entry can include (besides date and textual information), embedded images from Flickr, tweets from Twitter, video embeds from YouTube, DailyMotion, or Vimeo, articles from Wikipedia, sound from SoundCloud and map embeds from Google Maps.  You can easily control the display of your work using a WordPress shortcode.

This plugin requires an external Google spreadsheet that is published on the Web and publicly accessible.

The process, described here in depth, is to

• create a Google Docs spreadsheet using this template
• publish it to the Web and make it publicly accessible
• create a page or post on your WordPress site
• add a shortcode to display your timeline, using the web address of your Google Docs spreadsheet, plus any desired parameters.

The shortcode should look something like this:

[timeline
src="https://docs.google.com/spreadsheets/d/1oVnTNKW2a6dqf05BeLKCgjYJy-9q-Fv_EJbLJ4XJxXw/edit#gid=0"
width="100%" height="650" font="Default" lang="en" version="timeline3" ]

Make sure the shortcode is the first, and only line in your page or post.

Your Google Docs spreadsheet has seven columns.  Only two are required, the start date and the headline.  Follow the pattern used in the template, and you should be good to go.

Check out examples of user created timelines at to get some ideas of what you can do.

Here is a video to help guide you through the four step process. (It does not cover how to create the WordPress shortcode.)

 

Post Timeline

Post Timeline pulls its data from your posts or from any custom post type that you may have on your site.

What is a Custom post type? It’s a post type that has been added to your site using custom code or a plugin. It adds fields that are not available to a standard post.

By default, it uses a custom post type called “Post-timeline,” but you can easily change it to just pull content from your posts. Either way, you can further control what appears in your timeline by using categories or tags.

Timelines can be either vertical or horizontal. On the plugin’s dashboard page, you create a short code for your timeline and configure how it is displayed. If you use the Post-timeline custom post type, you have more control on time line event dates, media, and icons. Using just a plain post, the event date will display the post’s published date and the featured image (if added) will be displayed.

Below are two simple short codes. Click here for more short code attributes.

[post-timeline post-type="post" category="3"]
[post-timeline post-type="event"]

The plugin has many options, but please note the Commons does not have the premium version of the plugin. A number of video tutorials can be accessed here:

 

 

Cool Timeline

Cool Timeline is perhaps less complicated than the other two options, but provides fewer options. It displays a timeline based on custom post type called “story.” The timeline is a series of stories. It does not interact with your posts and does not have seem to allow more than one timeline on your site. The plugin can display timelines either vertically or horizontally.

The “coolness” of this plugin is probably derived from its premium version which has many more features and options. On the Commons, we have only the free one installed.

Its usefulness is its simplicity. In your dashboard, click on Timeline Addons>>Create New Story. You create a story using the familiar post title, post content and a featured image. In addition, there are three custom fields – the story’s date, an optional icon to represent the story and whether the story’s image (its featured image) should be full or small size. Each story is then an event on your timeline.

The plugin has a block called “Cool Timeline Shortcode” that creates a code that looks something like this:

[cool-timeline layout="default" skin="default" date-format="F j" show-posts="10" items="4" animation="none" icons="NO" order="DESC" story-content="short"]