WP Timeline

Responsive Vertical and horizontal timeline plugin

• Latest update: 20/04/2020
• By: ExThemes
• Email: exthemes.net@gmail.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

If you want to create stories , timeline, history, roadmap … WP Timeline is a must-have plugin. Designed to create timeline easy and hassle-free, WP Timeline is the simplest way for your business to display timeline/stories/history… With the WP Timeline plugin, you can manage everything from create to showing timeline, you can create timeline with any date and display any post types, tags, category, taxonomy and display timeline anywhere via shortcodes.

Features list

• Work with any themes
• Create timeline with any date (BC/AD date support)
• Date picker from year 1000
• Order timeline by timeline date or custom order field
• 45+ Best Beautiful Layouts
• 40+ Animations support
• Support Font Awesome 4.7 & 5.9
• Dark and Light support
• Show full content in lightbox support
• Date picker + Custom date field to enter anything
• Fully responsive and mobile ready.
• Create Unlimited Timeline
• Show Timeline anywhere using shortcode.
• Unlimited Timeline Color. You can set color for all or each timeline
• Custom font, color for heading, content and metadata
• Support category, tag, custom post type, custom taxonomy
• Vertical and horizontal support
• Timeline side by side support
• Ajax filter timeline
• Timeline with single column support
• Beautiful Single timeline
• Ajax load more post
• Infinite scroll support
• Page navigation by page links
• History bar support
• Timeline with icon awesome or image support
• Show media: video, audio, gallery on timeline
• Quick Edit and option to order timeline by custom field support
• Unlimited customize with font, color
• Custom feature label
• External/ Custom link instead of single page
• A lot of shortcode parameter
• Visual Composer support
• Elementor support
• SiteOrigin support
• Shortcode builder support
• RTL support
• Image light box support
• Supper easy configuration
• And much more … Let check our demo page

The Full Package includes these following files and folders:

• Documentation folder - Contain this document
• Installation Files folder - Contain installable file plugin
  
  • wp-timeline.zip folder - WordPress Plugin Installation file

Install via Wordpress admin

1. Login to WordPress Admin
2. In the left menu panel go to Plugins > Add New > Upload to install plugin
3. Click Upload
4. Browse your download package to select installation files
5. Click Install Now button
6. Once it's uploaded, click the Activate link

Install via FTP Account

1. Use your FTP software to browse to wp-content/plugins folder to install plugin
2. Extract the installation files to their corresponding folders, for example wp-timeline.zip to wp-timeline and upload to server
3. Once it's uploaded, go to your WordPress Admin, browse to Plugins > Installed Plugins
4. Click the Activate link

Update

1. Deactive "WP Timeline" plugin by going to Plugins > Deactive "WP Timeline" plugin
2. Delete older version by clicking on Delete link. Confirm to delete.
3. Update and re-install new version.

1. Go To Wordpress Admin > Timeline > Add New Timeline

2. Set a title, description, featured image and required field of the timeline

3. Click Publish to save timeline

4. Display

1. Add youtube or soundcloud link to content of timeline, you could also use embed of any video or audio website

2. To show video or audio in timeline, you just select Show media > yes

If you dont use Visual Composer, you just add this parameter to timeline shortcode: show_media="1"

1. Go To Wordpress Admin > Timeline > Add numerical order ( just type number )

2. Set a timeline order by custom custom order

If you dont use Visual Composer, you just add this parameter to timeline shortcode: order="ASC" orderby="meta_value_num" meta_key="wpex_order"

1. Go to Timeline > Shortcode builder

2. Config shortcode option as you wan to show > Click Publish button

3. Copy shortcode and paste it into your post, page, or text widget content

You could use Shortcode builder feature to generate shortcode instead using default shortcode

WP Timeline shortcode also has supported: Visual Composer, Elementor and SiteOrigin page builder so you could use those page builder to config shortcode

Timeline listing

Timeline listing is a shortcode for displaying timeline on listing with load more ajax.

• style - Select between style
  • classic - Classic (style="classic")
  • modern - Classic (style="modern")
  • wide_img - Wide image (style="wide_img") Only available in version 3.0 ++
  • bg - Background (style="bg") Only available in version 3.0 ++
  • box-color - Box color (style="box-color") Only available in version 3.1 ++
  • simple - Simple (style="simple") Only available in version 3.0 ++
  • simple-bod - Simple bod (style="simple-bod") Only available in version 3.1 ++
  • simple-cent - Simple cent (style="simple-cent") Only available in version 3.1 ++
  • clean - Clean (style="clean") Only available in version 3.0 ++
• alignment - Select between (alignment="center") or Left (alignment="left")
  • Center - Center (alignment="center")
  • Left - Classic (alignment="left")
  • sidebyside - Side by side (style="sidebyside") Only available in version 3.1 ++
• posttype - Select post types, Ex: posttype="post" to show blog posts in timeline ( Defaults: wp-timeline)
• ids - List of IDs to query, separated by a comma
• count - Total number of items to show. Default 9
• posts_per_page - Number of items per page. Default 3
• cat - List of category ids (or slug), separated by a comma
• tag - List of tag ids (or slug), separated by a comma
• order - Order ascending (order="ASC") or descending (order="DESC")
• taxonomy - Enter slug of custom taxonomy
• start_label - Enter start title of timeline
• end_label - Enter end title of timeline
• orderby - Choose order condition
  • 'date' - Order by publish date.
  • 'timeline_date' - Order by timeline date (only work with Timeline datepicker, not work with custom date field). Only available in version 2.4
  • 'ID' - Order by post id. Note the captialization.
  • 'author' - Order by author.
  • 'title' - Order by title.
  • 'name' - Order by post name (post slug).
  • 'name' - Order by post name (post slug).
  • 'modified' - Order by last modified date.
  • 'parent' - Order by post/page parent id.
  • 'rand' - Random order.
  • 'menu_order' - Order by Page Order. Used most often for Pages (Order field in the Edit Page Attributes box) and for Attachments (the integer fields in the Insert / Upload Media Gallery dialog), but could be used for any post type with distinct 'menu_order' values (they all default to 0).
  • 'meta_value' - Note that a 'meta_key=keyname' must also be present in the query. Note also that the sorting will be alphabetical which is fine for strings (i.e. words), but can be unexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as you might naturally expect). Use 'meta_value_num' instead for numeric values.
  • 'meta_value_num' - Order by numeric meta value (available with Version 2.8). Also note that a 'meta_key=keyname' must also be present in the query. This value allows for numerical sorting as noted above in 'meta_value'.
  • 'post__in' - Preserve post ID order given in the ids array
  • 'none' - No order
• meta_key - Enter custom field key, Show posts associated with a certain custom field
• show_media - Choose "Yes" (show_media="1") or "No" (show_media="0") to show or hide Media instead of thumbnail
• full_content - Show full content in
  • '0' - Show Full content in single timeline page
  • '1' - Show Full content instead of excerpt ( replace with excerpt)
  • 'lightbox' - Show Full content in lightbox
• show_history - Choose "Yes" (show_history="1") or "No" (show_history="0") to show or hide history bar
• filter_cat - Choose "Yes" (filter_cat="1") or "No" (filter_cat="0") to show or hide filter category bar
• lightbox - Choose "Yes" (lightbox="1") or "No" (lightbox="0") to enable or disable image lightbox feature
• infinite - Choose "Yes" (infinite="1") or "No" (infinite="0") to enable or disable infinite Scroll feature Only available in version 3.0 ++
• animations - Choose animations for each timeline
  • None
  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • flipInX
  • flipInY
  • lightSpeedIn
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • bounceInRight
  • rollIn
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideIn
  • slideInDown
  • slideInLeft
  • slideInRight
  • bounceInRight
• class - Add a class name and refer to it in custom CSS
• hide_title - Choose "Yes" (hide_title="1") or "No" (hide_title="") to show or hide Title
• hide_img - Choose "Yes" (hide_img="1") or "No" (hide_img="") to show or hide Featured Image
• feature_label - Choose "Yes" (feature_label="1") or "No" (feature_label="0") to show or hide feature label

  Create feature label:
  

  Show feature label:
  

• enable_back - Choose "Yes" (enable_back="yes") or "No" (enable_back="") Enable Back to timeline page button when access each timeline from timeline page

Modern alignment center style

Classic alignment center style

Clean alignment center style

Simple alignment center style

Wide image alignment center style

Background image alignment center style

Modern single column

classic single column

Clean alignment left style

Timeline Slider

Timeline Slider is a shortcode for displaying timeline on horizontal Slider.

• style - Select between Left side (style="left-side") or Full Width (style="full-width")
• layout - Select between Horizontal (layout="horizontal") or Horizontal Steps (layout="hozsteps")
• posttype - Select post types Ex: posttype="post" to show blog posts in timeline ( Defaults: wp-timeline)
• ids - List of IDs to query, separated by a comma
• count - Total number of items to show. Default 9
• cat - List of category ids (or slug), separated by a comma
• tag - List of tag ids (or slug), separated by a comma
• order - Order ascending (order="ASC") or descending (order="DESC")
• taxonomy - Enter slug of custom taxonomy
• orderby - Choose order condition
  • 'date' - Order by date.
  • 'ID' - Order by post id. Note the captialization.
  • 'author' - Order by author.
  • 'title' - Order by title.
  • 'name' - Order by post name (post slug).
  • 'name' - Order by post name (post slug).
  • 'modified' - Order by last modified date.
  • 'parent' - Order by post/page parent id.
  • 'rand' - Random order.
  • 'menu_order' - Order by Page Order. Used most often for Pages (Order field in the Edit Page Attributes box) and for Attachments (the integer fields in the Insert / Upload Media Gallery dialog), but could be used for any post type with distinct 'menu_order' values (they all default to 0).
  • 'meta_value' - Note that a 'meta_key=keyname' must also be present in the query. Note also that the sorting will be alphabetical which is fine for strings (i.e. words), but can be unexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as you might naturally expect). Use 'meta_value_num' instead for numeric values.
  • 'meta_value_num' - Order by numeric meta value (available with Version 2.8). Also note that a 'meta_key=keyname' must also be present in the query. This value allows for numerical sorting as noted above in 'meta_value'.
  • 'post__in' - Preserve post ID order given in the ids array
  • 'none' - No order
• meta_key - Enter custom field key, Show posts associated with a certain custom field
• arrow_position - Select position of arrow (top or center)
• show_media - 1/0 Choose "Yes" (show_media="1") or "No" (show_media="0") to show or hide Media instead of thumbnail
• full_content - Show full content in
  • '0' - Show Full content in single timeline page
  • '1' - Show Full content instead of excerpt ( replace with excerpt)
  • 'lightbox' - Show Full content in lightbox
• hide_thumb - 1/0 Choose "Yes" (hide_thumb="1") or "No" (hide_thumb="0") to show or hide thumbnail
• show_all - 1/0 (show_all="1") Show all items on timeline bar
• toolbar_position - top (toolbar_position="top")/bottom (toolbar_position="bottom"), Choose Timeline bar position
• autoplay - 1/0 Choose "Yes" (autoplay="1") to auto next timeline
• start_on - Slide to start on, enter number, default start_on="0"
• class - Add a class name and refer to it in custom CSS
• enable_back - Choose "Yes" (enable_back="yes") or "No" (enable_back="") Enable Back to timeline page button when access each timeline from timeline page

Horizontal Full width

Dark style

Horizontal left

Horizontal Steps layout

Dark style

Timeline Horizontal multi items

Timeline Horizontal multi items is a shortcode for displaying multi items timeline on slider.

• style - Select between style 1 (style="1") or style 2 (style="2") or style 3 (style="3") or style 4 (style="4") or style 5 (style="5") or style 6 (style="6")
• posttype - Select post types Ex: posttype="post" to show blog posts in timeline ( Defaults: wp-timeline)
• ids - List of IDs to query, separated by a comma
• count - Total number of items to show. Default 6
• slidesshow - Number item visible. Default 4
• cat - List of category ids (or slug), separated by a comma
• tag - List of tag ids (or slug), separated by a comma
• order - Order ascending (order="ASC") or descending (order="DESC")
• taxonomy - Enter slug of custom taxonomy
• orderby - Choose order condition
  • 'date' - Order by date.
  • 'ID' - Order by post id. Note the captialization.
  • 'author' - Order by author.
  • 'title' - Order by title.
  • 'name' - Order by post name (post slug).
  • 'name' - Order by post name (post slug).
  • 'modified' - Order by last modified date.
  • 'parent' - Order by post/page parent id.
  • 'rand' - Random order.
  • 'menu_order' - Order by Page Order. Used most often for Pages (Order field in the Edit Page Attributes box) and for Attachments (the integer fields in the Insert / Upload Media Gallery dialog), but could be used for any post type with distinct 'menu_order' values (they all default to 0).
  • 'meta_value' - Note that a 'meta_key=keyname' must also be present in the query. Note also that the sorting will be alphabetical which is fine for strings (i.e. words), but can be unexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as you might naturally expect). Use 'meta_value_num' instead for numeric values.
  • 'meta_value_num' - Order by numeric meta value (available with Version 2.8). Also note that a 'meta_key=keyname' must also be present in the query. This value allows for numerical sorting as noted above in 'meta_value'.
  • 'post__in' - Preserve post ID order given in the ids array
  • 'none' - No order
• meta_key - Enter custom field key, Show posts associated with a certain custom field
• number_excerpt - Enter number of exverpt to show, example number_excerpt="10"
• start_on - Slide to start on, enter number, default start_on="0"
• show_media - 1/0 Choose "Yes" (show_media="1") or "No" (show_media="0") to show or hide Media instead of thumbnail
• full_content - Show full content in
  • '0' - Show Full content in single timeline page
  • '1' - Show Full content instead of excerpt ( replace with excerpt)
  • 'lightbox' - Show Full content in lightbox
• hide_thumb - 1/0 Choose "Yes" (hide_thumb="1") or "No" (hide_thumb="0") to show or hide thumbnail
• autoplay - 1/0 Choose "Yes" (autoplay="1") to auto next timeline
• autoplayspeed - Autoplay Speed in milliseconds. Default:3000
• class - Add a class name and refer to it in custom CSS
• enable_back - Choose "Yes" (enable_back="yes") or "No" (enable_back="") Enable Back to timeline page button when access each timeline from timeline page

Style 1

Style 2

Style 3

Style 4

Timeline Infographics

Timeline Infographics is a shortcode for displaying timeline on Infographics style with load more ajax.

• style - Select between style 1 (style="1") or style 2 (style="2") or style 3 (style="3")
• posttype - Select post types, Ex: posttype="post" to show blog posts in timeline ( Defaults: wp-timeline)
• ids - List of IDs to query, separated by a comma
• count - Total number of items to show. Default 9
• posts_per_page - Number of items per page. Default 3
• cat - List of category ids (or slug), separated by a comma
• tag - List of tag ids (or slug), separated by a comma
• order - Order ascending (order="ASC") or descending (order="DESC")
• taxonomy - Enter slug of custom taxonomy
• start_label - Enter start title of timeline
• end_label - Enter end title of timeline
• orderby - Choose order condition
  • 'date' - Order by publish date.
  • 'timeline_date' - Order by timeline date (only work with Timeline datepicker, not work with custom date field). Only available from version 2.4
  • 'ID' - Order by post id. Note the captialization.
  • 'author' - Order by author.
  • 'title' - Order by title.
  • 'name' - Order by post name (post slug).
  • 'name' - Order by post name (post slug).
  • 'modified' - Order by last modified date.
  • 'parent' - Order by post/page parent id.
  • 'rand' - Random order.
  • 'menu_order' - Order by Page Order. Used most often for Pages (Order field in the Edit Page Attributes box) and for Attachments (the integer fields in the Insert / Upload Media Gallery dialog), but could be used for any post type with distinct 'menu_order' values (they all default to 0).
  • 'meta_value' - Note that a 'meta_key=keyname' must also be present in the query. Note also that the sorting will be alphabetical which is fine for strings (i.e. words), but can be unexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as you might naturally expect). Use 'meta_value_num' instead for numeric values.
  • 'meta_value_num' - Order by numeric meta value (available with Version 2.8). Also note that a 'meta_key=keyname' must also be present in the query. This value allows for numerical sorting as noted above in 'meta_value'.
  • 'post__in' - Preserve post ID order given in the ids array
  • 'none' - No order
• meta_key - Enter custom field key, Show posts associated with a certain custom field
• show_media - Choose "Yes" (show_media="1") or "No" (show_media="0") to show or hide Media
• full_content - Show full content in
  • '0' - Show Full content in single timeline page
  • '1' - Show Full content instead of excerpt ( replace with excerpt)
  • 'lightbox' - Show Full content in lightbox
• show_history - Choose "Yes" (show_history="1") or "No" (show_history="0") to show or hide history bar
• filter_cat - Choose "Yes" (filter_cat="1") or "No" (filter_cat="0") to show or hide filter category bar
• infinite - Choose "Yes" (infinite="1") or "No" (infinite="0") to enable or disable infinite Scroll feature Only available in version 3.0 ++
• animations - Choose animations for each timeline
  • None
  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • flipInX
  • flipInY
  • lightSpeedIn
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • bounceInRight
  • rollIn
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • slideIn
  • slideInDown
  • slideInLeft
  • slideInRight
  • bounceInRight
• class - Add a class name and refer to it in custom CSS
• hide_title - Choose "Yes" (hide_title="1") or "No" (hide_title="") to show or hide Title
• hide_img - Choose "Yes" (hide_img="1") or "No" (hide_img="") to show or hide Featured Image
• feature_label - Choose "Yes" (feature_label="1") or "No" (feature_label="0") to show or hide feature label
• enable_back - Choose "Yes" (enable_back="yes") or "No" (enable_back="") Enable Back to timeline page button when access each timeline from timeline page

Simple: go to any place which accepts shortcode, for example Post or Page and copy shortcode from document or shortcode builder and paste to place/content of Post or Page.

You also can use Vissual composer/WPBakery Page Builder to config

To go to Timeline Settings page, click on Timeline > Settings menu item.

General settings

Manager font and main color

Advanced settings

Manager advanced option

Custom Code

Enter your custom css and js here

Js + Css file

Manager css css and js file

To translate Frontend text, you can go to Timeline > Settings> Advanced > Frontend static text

To translate all texts, You can use Loco Translate plugin to translate:

I've used the following images, icons or other files as listed.

• Free Photos - by Pixabay
• Font Awesome - MIT License
• Custom Meta Boxes - GPL V2 License

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

ExThemes