Does Post Timeline support other Types of Post of WordPress?

Yes, Post Timeline does support other post types such as default “post” or any other custom types, in the shortcode, it is important to mention the type of that post type, else it will be considered ‘post-timeline’, to call other types of post to add attribute ptl-post-type, the complete shortcode will be as follows.

[post-timeline ptl-post-type="post" category_id="xxx"]

How can we add pagination for too many posts?

Post Timeline does support pagination through the “Load More” button with can be activated either through Post Timeline Settings or through the shortcode below, once the posts are above the per page limit, the pagination Load More button will appear at the button to Load More items on the page with animation.


Demo of Load More button.

Easy shortcode for the Load More option is provided below.

[post-timeline animation="fade" template="1" category_id="12" ptl-post-load="1" ptl-post-per-page="10"]

How can I customize my Template without modifying core files?

You can customize your Post Timeline Template without modifying the core files of the plugin and would be able to get updates without losing your customization changes. To do the template customization, first, you have to select the right template which you want to customize, for example: if you are willing to do some changes in “Template 3”, you have to copy the template view file from the specified folder.

Folder Path:   "/wp-content/plugins/post-timeline/public/partials"

Template File: "post-timeline-public-3.php" (for horizontal template, copy the post-timeline-public-3-h.php file)

Once you are done with the customization, paste the template file in your theme root directory as shown in the image, Post Timeline will use your theme file and will show the changes.

Modify Template Directory View

My Tag text doesn’t fit in the navigation

Post Timeline have 5 navigation styles, in case your Tag text is greater and doesn’t fit in the navigation text area, you can easily increase the width of the navigation by adding the CSS rule in Post Timeline Settings Custom CSS text-area, the rule to increase the width of the area is as follows.

.p-tl-cont.timeline_section .yr_list ul.yr_list-inner li a,
.p-tl-cont.timeline_section .yr_list ul.yr_list-inner li{width:155px !important;}
.p-tl-cont.timeline_section .yr_list{width:155px !important}
.p-tl-cont.timeline_section .yr_list .ptl-btn a{width:100% !important;}

For Navigation style 5, paste the following rule.

.p-tl-cont.timeline_section .yr_list ul.yr_list-inner li a,
.p-tl-cont.timeline_section .yr_list ul.yr_list-inner li{width:70px !important;height:70px !important;}
.p-tl-cont.timeline_section .yr_list{width:155px !important}
.p-tl-cont.timeline_section .yr_list .ptl-btn a{width:70px !important;height:70px !important;}

Timeline Header Post

Vertical timelines do support header posts, to add a header Post in your timeline, create a post using the Post Timeline tab, once the post is created, add the ID of the post into your shortcode with an attribute header.

For Example, [post-timeline category=”8″ header=”12″], the post ID of header post id 12 which we can see from the post edit page URL.

Timeline Header


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.