Plugin Files
Check File Integrity

Installing Plugin
WordPress Uploader

Timeline Wrapper
VisualComposer
Timeline wrapper is the main shortcode for wrapping all of the timeline elements, in this shortcode you can define the layout of the element and the direction of the timeline alignment.

Shortcode
[timeline class="some class" id="someid" align="left|right|center|top|bottom" layout="vertical|horizontal" ] [timemajor css="valid css class separated by empty space" id="valid css id" direction="left|right|top|bottom|center" ] Some text to represent major events [/timemajor] [timeevents datetime="YYYY-MM-DDTHH:MM" date="the date text" time="the time text" icon="fontawesome icon name" text="the event title" direction="left|right" // only applicable if the parent didn't specify align (centered) ] Some content representing the event content [/timeevents] [timeend css="valid css class separated by empty space" id="valid css id" direction="left|right|top|bottom|center" ] Some text to represent major events [/timeend] [/timeline]
Attributes | Value | Description |
---|---|---|
layout | vertical|horizontal | define the major layour for the timeline elements, vertical layout will stack all timeline elements vertically and horizontal layout will stack the timeline elements horizontally. |
align | left|right|center|top|bottom | The timeline line alignment, left, right and center only works with vertical layout while top and bottom only works with horizontal layout |
class | valid css class separated by empty space | You can inject additional css class by specifing the valid css class separated by empty space |
id | valid css id | You can define custom css id by specifying valid css / html id string |
Timeline End Element
VisualComposer
This shortcode will create a timeline end element, if using visual composer, it will create a wrapper that can be filled with any visual composer elements.

Shortcode
[timeend css="valid css class separated by empty space" id="valid css id" direction="left|right|top|bottom|center" ] Some text to represent major events [/timeend]
Attributes | Value | Description |
---|---|---|
direction | left|right|center|top|bottom | The timeline line alignment, left, right and center only works with vertical layout while top and bottom only works with horizontal layout |
class | valid css class separated by empty space | You can inject additional css class by specifing the valid css class separated by empty space |
id | valid css id | You can define custom css id by specifying valid css / html id string |
Timeline Events Element
VisualComposer
This shortcode allows you to create the timeline events element, you can also specify which icons to use, the direction used to format the element position, specify the date, time, day and years of the timeline event and specify the css class and id to mark the element for custom css

Shortcode
[timeevents datetime="YYYY-MM-DDTHH:MM" date="the date text" time="the time text" icon="fontawesome icon name" text="the event title" direction="left|right|center" ] Some content representing the event content [/timeevents]
Attributes | Value | Description |
---|---|---|
datetime | YYYY-MM-DDTHH:MM | This element will create datetime element and it must be in the format of {year}-{month}-{dayThour:minute} |
date | string | This element will create date element and you can specify any generic string |
time | string | This element will create time element and you can specify any generic string |
icon | fontawesome icon name | The icon element to mark the time events, you must specify valid fontawesome icon class |
text | string | This element will create the heading of the time events element |
direction | left|right|center|top|bottom | The timeline line alignment, left, right and center only works with vertical layout while top and bottom only works with horizontal layout |
class | valid css class separated by empty space | You can inject additional css class by specifing the valid css class separated by empty space |
id | valid css id | You can define custom css id by specifying valid css / html id string |
Timeline Major Element
VisualComposer
This shortcode will build the timeline major marker, you can specify the content of the marker, the css class and id for the marker

Shortcode
[timemajor css="valid css class string separated by empty space" id="valid css id string" ] Some text to represent major events [/timemajor]
Attributes | Value | Description |
---|---|---|
class | valid css class separated by empty space | You can inject additional css class by specifing the valid css class separated by empty space |
id | valid css id | You can define custom css id by specifying valid css / html id string |
Custom Skins
Custom Templates
You can override the default timeline skins cleanly by overriding the
timeline-skins assets in your theme.
Steps to override the timeline-skins assets :
1. Copy the victheme_timeline/assets/timeline-skins
folder to your folder of
choice. example /your-theme/templates
2. In your theme functions.php
, Register the target folder (eg.
/your-theme/templates)
to VicTheme Core plugin asset manager :
// Setup the VTCore asset factory VTCore_Wordpress_Init::getFactory('assets') ->get('library') ->detect({some_path_to_target_folder_roots} . '/your-theme/templates', get_template_directory_uri() . '/templates');
3. Invoke the asset manager to load the timeline skins, this is best to be performed inside
wp_enqueue_scripts
action hook.
// Load the timeline skins VTCore_Wordpress_Utility::loadAsset('timeline-skins');
4. Edit the cloned css file to suit your needs.
CSS Grid
Bootstrap Grids
Plugin by default will use the default VisualComposer CSS Rules for the grid system to ensure maximum compatibility with different kind of themes.
The VisualComposer Grid css covers these rules :
- vc_col-{xs|sm|md|lg}-{size}
- vc_col-{xs|sm|md|lg}-offset-{size}
- vc_col-{xs|sm|md|lg}-push-{size}
- vc_col-{xs|sm|md|lg}-pull-{size}
- vc_col-{xs|sm|md|lg}-offset-{size}
- vc_hidden-{xs|sm|md|lg}
- vc_visible-{xs|sm|md|lg}
- vc_push-{left|right}
- vc_txt_align_{left|center|right}
If your theme is capable to use bootstrap or you want to force to use bootstrap grid rules instead, please invoke these function in your theme functions.php
// Force to load victheme_core bootstrap access, // only use this if your theme doesn't have bootstrap asset loaded // and you want to force plugin to load bootstrap asset. add_theme_support('load_core_bootstrap'); // Notify plugin that your theme is bootstrap compatible and has load bootstrap asset // Only use this if your theme is bootstrap compatible and it has loaded bootstrap css assets. add_theme_support('bootstrap');
Credits
Credits
Thank you for the plugins authors that made this theme possible
Javascript
- Custom ScrollBar - Malihu