Post Timeline Setting

Post Timeline Settings include 5 sections with functionality features, the sections are Basic, Styles, Navigation, Animation, and Custom CSS.

1) Basic Settings

The basic settings of Post Timeline include Default Post Icon, Post Icon (Enable/Disable), Sorting Order, Post Size, Post Date format, and Post description length.

Basic Settings

2) Style Settings

Styles Settings include features Google Fonts, Container Background, Post Background, Heading Font Color, Description Font Color and Container Background Switch.

Style Settings

Navigation Settings has features like Navigation Style Selection, Navigation Color, Load More, Per Page Posts, Navigation Status, and Read More Status.

Navigation Settings

4) Animation Settings

The animations setting provides an option to decide which animation to be applied to the timeline, also you can disable animation using this tab.

Animation Setting

5) Custom CSS

Custom CSS has Text-area where you can write CSS to modify width or height of some element in the timeline.

Timeline Shortcode Attributes

Post Timeline has provided many shortcodes attributes by which Users can change the look and feel of their timelines, the list of the attributes is described with its feature description.

[post-timeline template=”5″] The Template attribute is mandatory in the shortcode, this attribute decides which template to be used in the timeline. The possible options are
‘0’, ‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘0-h’, ‘1-h’, ‘2-h’, ‘3-h’, ‘4-h’, ‘5-h’, ‘6-h’, ‘7-h’, and ‘8-h’.
[post-timeline class=”one-side-left”] The Templates ‘1’, ‘2’, ‘5’, ‘6’, and ‘8’ offer single-side timeline templates, they can be used by add the attribute class=”one-side-left” in the shortcode as
[post-timeline template=”2″ class=”one-side-left”].
[post-timeline ptl-type=”tag”] The Post Timeline can be based on Tag or Dates, which can be set from Timeline Settings or through the shortcode attribute ptl-type. For custom Order of Post in Tags, please add attribute value as ptl-type=”custom_order”.
[post-timeline ptl-bg-color=”#FFFF00″] To change the background of your timeline, you can use the attribute ptl-bg-color with a color code as it’s value.
[post-timeline ptl-nav-type=”style-1″] Post Timeline provides 5 navigation styles, that can be used by the attribute ptl-nav-type with option value as “style-1”, “style-2”, “style-3”, “style-4”, and “style-5”.
[post-timeline ptl-anim-type=”fadeInUp”] Post Timeline provides 3 types of animation that are “fadeIn”, “fadeInUp”, and “fadeInLeft”. Users can add more of them by simplifying modifying the template file and applying the name but these three are the tested Animations with all templates.
[post-timeline ptl-nav-color=”#FF6503″] Navigation color can be changed by the attribute ptl-nav-color with the value of the HEX color code.
[post-timeline ptl-date-format=”F j, Y”] To change the date format of the timeline posts, the attribute ptl-date-format can be used with proper date format which is acceptable by the PHP date format function, few examples are
“m/d/Y”, “j-m-y”, “D M j G:i:s”, “Y-m-d” etc.
[post-timeline ptl-sort=”1″] ptl-sort attribute is used to change the sorted listing of the timeline posts. Possible Options are 0 and 1, where 1 is ascending and 0 is descending.
[post-timeline ptl-post-load=”0″] ptl-post-load attribute is used to either show all the posts at once or with the load more button, option “0” will disable load more button and will render all the posts on-page, option “1” will work with ptl-post-per-page.
[post-timeline ptl-post-per-page=”15″] ptl-post-per-page attribute is used to override the No. of Posts in the timeline with Load more button. Example: ptl-post-per-page=”15″.
[post-timeline ptl-rm-status=”0″] To remove the read more button add the attribute code ptl-rm-status=”0″ into your shortcode.
[post-timeline ptl-post-length=”300″] Post length attribute is used to limit the number of characters in timeline description, the value should be a number only.
[post-timeline scroller=”.my-class-name”] For vertical timelines, when your timeline is not within the body tag, you can add an attribute scroller with the correct class name of the timeline parent, it will help in resolving the navigation glitch.
[post-timeline nav_offset=”100″] For vertical timelines, if you want to add an offset into your timeline navigation scroll, add an attribute nav_offset with a numeric value to adjust the scroll offset.
[post-timeline nav_max=”5″] The default navigation nodes count is 6, if Users want to adjust the number of nodes of navigation they can pass the parameter nav_max in their shortcode, the value must be within 2 and 15 range.
[post-timeline ptl-fav-icon=”fa-heart”] To apply the same icons on all the posts, It has to be provided in the shortcode, and the posts icon field should be left alone, the value must be a font-awesome icon value.
[post-timeline ptl-nav-status=”0″] Navigation can be disabled with attribute ptl-nav-status having a value “0”.
[post-timeline ptl-anim-status=”0″] Animation can be disabled with the attribute ptl-anim-status having a value “0”.

 

Timeline Templates

Post Timeline has 23 Templates in total, including Vertical, Horizontal, and One-Side Timeline Templates. Once you have created your timeline posts, you can hook any template to it and all your posts will render using that selected template. To select a template, all you need to do is to write the attribute in your shortcode named as a template with its value.

timeline templates

The Timeline Template page can help you to get the right code of the template and its shortcode, you can click on the selected template and it will show a dummy timeline with the template code as shown in the image below.

Select Timeline Template

The shortcode can be copied from the blue highlighted line, add the category ID into it and paste it into your WordPress page to show that category timeline.

How to create Multiple Timelines

The steps to create multiple timelines is pretty simple, there is no extra step other than assigning your posts to a single Category, once all the posts are assigned to that category, we just need to enter the right category ID in the shortcode as described in Post Timeline Categories.

For Example, we want to create to separate Timelines, the first category is Happiness and second once is Sad.

Post Category Example

Now when creating Posts we have to assign the Happiness posts to Happiness and Category Sad posts to Sad Category from the right sidebar. Once the posts are assigned, we need to write two shortcodes on two pages, one with Happiness Category ID and other with Sad Category ID.

[post-timeline category_id="1"]

[post-timeline category_id="2"]

The shortcodes above will render timelines of both pages, one with Happiness posts and other with Sad posts.

 

Post Timeline Tags

Post Timeline Tags is an important tab of a timeline, through this tab Admin User can create Tags and associate their posts to those tags, once all the posts are assigned to those tags, the post timeline will collect all the tags and will use them in navigation.

Assign Tags

The above image shows the assignment of a tag to the timeline post, once the timeline is rendered on the page, it will display those tags in the navigation.

Timeline Tags

Post Timeline Categories

Post Timeline category works same as the WordPress categories, the purpose to create categories through this category tab is to separate Post Timelines from one to another, Admin user assign a post to categories, then in the shortcode the category ID is added within, so the timeline only displays the posts that are assigned to that category.

Category Posts

Example Shortcode with category ID 8 will be [post-timeline category_id=”8″], where 8 is the Category ID that we can get through the edit page of that category as shown in the image below.

Category ID Img

 

Create a Post Timeline

Using Create a post timeline method, once all your timeline posts are created, now it’s time to create the timeline. Post Timeline can be created on a WordPress Post/Page using shortcode method, the User needs to write down the shortcode of Post timeline with its optional attributes that are described in Post Timeline Shortcodes. The basic shortcode for Post timeline is [post-timeline], it’s optional attributes that change or add functionality in the timeline such as Template Selection, Timeline Background, Navigation Type, Animation Style etc.

Post Timeline Shortcode

It is must that your Page/Post container is 100% in width so the timeline can appear properly, otherwise, your timeline will be squeezed and may look odd.

 

Create First Timeline Post

Creating a post for a timeline is no different than creating a simple post in WordPress, the only thing which makes the difference is to create Post Timeline posts through its own tab in the side bar.

first timeline post

Upload Timeline Image

It is mandatory that you upload an image for each timeline cost, the Admin user can upload it through “Set featured image”, as shown in the image.

timeline post image

Tag based or Date based

It’s up to admin whether he wants the timeline to be either date based or tag based, the admin has to provide either the right tag or date so based on that, the frontend navigation will render, all the post tags will appear in the navigation of the timeline.

date or tag image

Post Timeline Details

Once featured image is uploaded, timeline post detailed need to be filled in, there are eight fields that include Post Icon, Post Date, Post Tag, Page URL, Post Positioning, Tagline, Post Order, and Post Color. Post Icon and Post Color are mandatory fields, rest of them are all optional. You have to provide either the Tag or the dates so based on that the navigation will work, in the later section of how to write the shortcode, we have provided an example of how to make navigation based on Tags or Dates.

Post Timeline Details

Category Association

It would be better to create a category from the right sidebar and assign your timeline posts to that particular category, it will not only help in creating multiple timelines but will also create a separate filter to search and sort in “All Timelines” section, it Timeline Post are not categorized Admin will not be able to create multiple timelines, as timelines are separated based on that category.

Timeline Category

Once all the detailed of the Post are filled in, Admin user will click the Publish button to save the timeline, once it’s clicked the saved timeline will appear in All Timeline tab.

Installation Guide

Installation of Post Timeline Plugin is no different than the installation of any other plugin, you can skip this section if you have knowledge about how to install a WordPress plugins.

How to install it?

Plugin Installation

To install a plugin all you need is to upload Post Timeline directory into your WordPress “wp-content/plugins” folder, now to do this thing, WordPress has provided Plugins Tab in their WP-Admin. You can click on Installed Plugins which will show up the list of plugins that are installed on your WordPress instance. To install the new Post Timeline Plugin, click on “Add New” and then “Upload Plugin”, once you upload the plugin, simply activate it within the next step, you will see a section will appear named Post Timeline in your WP-admin sidebar, which confirms that it is successfully installed.

Installed Post Timeline

Introduction

Post Timeline is a WordPress plugin that provides you with an excellent way to create timeline of the events, appointments, stories and other meaningful situations in your life. With help from our plugin, you will be able to showcase things like:

  1. Company history
  2. Product roadmap
  3. Tutorial steps
  4. Personal story/life stories
  5. Events and appointments
  6. Any piece of history

Upon using Post Timeline, you will get a professional, unique plugin that brings you one of the best timelines on the market. If you want to impress your readers, all while providing them with functionality and a resounding attention to detail, Post Timeline is the right choice for you. We also added stunning CSS3 animations and the ability to create multiple styles and designs. Plus, you can even create multiple timelines if you want.