Plugin Files

Check File Integrity

Installing Plugin

This plugin should be installed as a normal WordPress would using WordPress Plugin Uploader.

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.

Credits

Credits

Thank you for the plugins authors that made this theme possible

  • Javascript

    • Custom ScrollBar - Malihu