It’s extremely simple to display the timeline wherever you need to. We’ve included a shortcode for you to use, so you can place the timeline in any template, widget, post or page. The shortcode you’ll want to use is:

[timeline-express]

To make things even easier, we’ve created a small icon in the WordPress WYSIWYG editor. To access the button, you’ll want to make sure you are on the ‘Visual’ tab.

Example:

Free Users: Clicking the icon will drop the shortcode into the WordPress WYSIWYG editor. If you have any add-ons installed alongside the free version, you may get a small popup allowing you to tweak some shortcode parameters.

Optional Shortcode Parameters:

(Work with both the free and pro versions)

• Limit – Limit the number of visible icons on the timeline. Example to Limit the Timeline to 5 announcements:

  [timeline-express limit="5"]

• Order – Set the order that the announcements should display in. This shortcode parameter overrides the ‘Display Order’ option on the settings page. Possible Values: “ASC” (ascending) or “DESC” (descending). Order the announcements in descending order:

  [timeline-express order="DESC"]

• Display – Set which announcements should be displayed. This shortcode parameter overrides the ‘Time Frame’ option on the settings page. Possible Values: “All“, “Future“, “Past“. Display only past announcements:

  [timeline-express display="Past"]

Pro Users: Clicking on the rocket ship icon will display our shortcode generator. Inside the shortcode generator, you can adjust some of the parameters including what categories you want to limit the timeline too, what timelines you want to display and more.

1) Timelines

Adjust what timeline(s) you want to display. Selecting multiple timelines will display all of the announcements associated with the selected timelines. If you only want to display announcements associated with 1 timeline, only select 1 timeline.

Example

[timeline-express timeline="5"]

Multiple Timelines Example

[timeline-express timeline="5,9"]

Range Example

[timeline-express timeline="1-20"]

Combined Example

[timeline-express timeline="5,9,15-20"]

‘All’ Example

[timeline-express timeline="all"]

2) Timeline Categories

Select which categories you want to display. Selecting multiple categories will display all announcements associated with the selected categories. Additionally, you can limit the timeline to one set of categories. You can use this setting in conjunction with the setting above, to limit the timeline to a certain timeline and specific category for very granular control.

Example

[timeline-express categories="3"]

3) Display Filters

This setting toggle dictates if the filtering options will be available to your users on the front end of your site. Keep in mind, the filtering options will include whatever options you have checked off in ‘Timelines’ and ‘Timeline Categories’. If you want to create a timeline with all of your announcements, and allow your users to filter between all options – you’ll want to check off all created ‘Timelines’ and ‘Timeline Categories’ and check ‘Yes‘ on the ‘Display Filters’ setting.

Alternatively, you can limit the filters to only certain timelines/timeline categories by being selective with what you check off. The choice is yours, but combining the above three settings allows you to create powerful timelines on the fly – without having to remember complex or convoluted shortcode parameters.

Example

[timeline-express categories="3,5,8" timeline="7,6,9"]

Range Example

[timeline-express categories="5-20"]

Combined Example

[timeline-express categories="1,3,5-20"]

‘All’ Example

[timeline-express categories="all"]

4) Limit the Timeline (AJAX Limits Add-On)

If you have any add-ons installed you may see additional sections below. The one in the image above is our ‘AJAX Limits’ add-on, allowing you to limit your timeline to a certain number of items. Additionally, a ‘Load More’ button is created, allowing your visitors to load more announcements via AJAX without a page refresh.

Horizontal Timelines

To learn how you can convert any timeline into a horizontal timeline take a look at our Horizontal Timeline documentation.

View Horizontal Timeline Example

Display Specific Announcements by ID

You may also want to display specific announcements that you have created on the timeline. This would allow you to build a fully custom timeline by post id. You can do so by using the ids shortcode parameter. This would allow you to cherry pick certain announcements and display them on your timeline, regardless of the announcement date, the assigned categories or the timeline it is assigned to.

Timeline Express Announcements by ID Example:

[timeline-express ids="8, 10, 15, 22, 24"]

The ids paremeter will also work with the Timeline Express – Post Types Add-On, allowing you to build a fully custom timeline of other post types, such as posts or pages.

WordPress Posts by ID Example:

[timeline-express post-type="post" ids="1, 3, 5, 7, 9"]