Documentation Index

Installation

To install Timeline Express Pro, you'll first need to uninstall the free version of Timeline Express. If you want to preserve the announcements you created with the free version, you'll want to make sure that the option to 'Delete Announcements on Uninstall' is unchecked.

Once your sure your settings are correct, you can go ahead and head over to 'Plugins > Installed Plugins' from the sidebar menu. Scroll down to Timeline Express and deactivate it. Once deactivated go ahead and uninstall the plugin.

Now that the free version is uninstalled you should be all clear to install Timeline Express Pro. In the left sidebar menu, select 'Plugins > Add New'. At the top click on 'Upload Plugin'. Click on 'Choose File' and locate the Timeline Express Pro .zip file that was sent to you in the purchase receipt along with your license key. Once selected, click 'Install Now'.

When Timeline Express Pro is installed, you'll want to enter the license key that was sent to you in the purchase receipt. This will enable important updates and allow you to submit priorty tickets when you need support. Once your license key is entered, you're all set to begin creating announcements!

Creating Additional Timelines

With Timeline Express Pro you can easily create multiple timelines and assign announcements to any or all of your Timelines. This allows for some flexibility if you want to display a specific timeline on one page, and another on a separate page.

By default, any announcement you create will be assigned to the default timeline. So if you plan on only using one timeline, you don't need to create additional timelines. If you do want to create additional timelines, go ahead and select 'Timeline Express > Timelines'.

On this screen you can create as many timelines as you'd like. This screen is also important because you'll be able to grab the timeline ID necessary for displaying a specific timeline on the front end. We'll get to this later in the documentation.

After you've created all of your timelines, you can easily assign announcements to them right from the announcement edit screen. Just below the announcement image you'll find the 'Associated Timeline' setting, where you can assign this announcement to a any of the timelines you've created.

Localizing the Dates

You can localize the dates on both the front end, and in the dashboard datepickers of your site. For our international users, you may want to display the dates as D/M/Y instead of the standard M/D/Y. With version 1.1.7 we've enabled our users to easily drop a single line of code into your functions.php file to alter the dates. The date selector uses one function, and the front end dates use another.

Date Selector

To localize the date selector to be D/M/Y, you'll want to add the following php snippet to the bottom of your active theme (or child themes) functions.php file: 
add_filter( 'cmb2_localized_data', 'prefix_cmb_set_date_format' );
function prefix_cmb_set_date_format( $l10n ) {
  // Set your date format replacing 'dd-mm-yy' (UK format)
  $l10n['defaults']['date_picker']['dateFormat'] = 'dd-mm-yy';
  return $l10n;
}

Front End Dates

To localize the dates on the front end of your site, both in the timeline and in the single announcement template you'll want to add the following php snippet to your functions.php file. You can set the format based on the php date(). 
/**
*	Format the date to display only the year.
*/
function custom_te_date_format( $date_format ) {
  $date_format = "Y"; // will print the date as 2016
  return $date_format;
}
add_filter( 'timeline_express_custom_date_format' , 'custom_te_date_format' , 10 );

Creating Timeline Categories

-

Displaying Filtering Options

To display the filtering options above your Timeline, simply add filter="1" to your [timeline-express] short code. This will enable the dropdown to select specific timelines and the category checkboxes to easily filter your announcements.

If you wanted to display your timeline with all filtering options visible your shortcode would be [timeline-express filter="1"]

Display Specific Timeline by ID

You can also display specific timelines on the front end using the timeline ID. If you wanted to display a timeline with ID 29, you would simple add to your shortcode [timeline-express timeline="28"].

If you wanted to take things one step further you could display timeline 28, and display the filtering checkboxes to sort the timeline by categories. Just add filter="1" to the shortcode after the timeline="28" parameter like [timeline-express timeline="28" filter="1"].

Display Specific Timeline Sorted by Category

You can pre-filter the timeline by categories by adding the category ID to the category parameter in the shortcode, similar to the timeline parameter above.

To pre-filter the timeline by categories 18 and 20 you would do [timeline-express category="18, 20"]. This would display the default timeline with all announcements sorted by category 18 and 20.

You can combine parameters mentioned above to display Timeline 28 pre-filtered by category 18 and 20 by doing [timeline-express timeline="28" category="18, 20"]

Adding Query Arguments to the URL

Coming soon in the next patch

Back to Top