A Vertical Post Timeline displays your website posts (like blogs, news, or updates) in a top-to-bottom timeline layout. Each post appears as a separate timeline story with its title, featured image, date, and short description.
You can create a vertical post timeline easily using either the Classic Editor or the Gutenberg Block Editor.
Add Vertical Post Timeline in Classic Editor
If you are using the Classic Editor, follow these steps to add a Vertical Post Timeline:
- Open your page/post in Classic Editor.
- Click on the Add Timeline button in the toolbar (as shown in the editor screenshot).
- A pop-up panel will appear.
- From the top select box option, choose the Post Timeline.
From Layout Settings:
- Select Layout: Choose a vertical layout for your post timeline.
- Select Design: Select from predefined timeline designs to change the visual appearance of your timeline.
- Select Skin: Set the color scheme of your timeline. You can choose Default, Light, or Dark styles depending on your site design.
- Timeline Width: Choose how much space the timeline should use within the content area.
- Custom Width: Set the maximum width of the timeline when Custom width is selected.
- Connector Style: Choose how the posts pointers connect to the timeline line.
- Icons: Choose icon for your timeline story from: Icon, Dot or None.
From Content Settings:
- Select Post Type: Define the content type of your timeline (like Posts).
- Taxonomy Name: Choose which type of content group you want to display in your post timeline.
- Specific Category: Select categories to display stories from a specific category.
- Specific Tags: Choose specific tags whose posts you want to display in the timeline.
- Stories Order: Choose how your posts appear on the timeline from ASEC or DESC.
- Stories Date: Choose whether to show or hide the date for each post.
- Select Date Formats: Select how the date should appear on your timeline.
- Title: Choose to show or hide the post title.
- Title Link: Enable or disable the link on the post title.
- Stories Description: Choose how much post content to display: Summary, or Full Text.
- Display Read More: Show or hide a link to the full post.
- Stories Read More Text: Enter a custom text for the Read More link.
- Open Read More Link In: Choose whether to open the read more link in the Same Tab or a New Tab.
- Content Length: Set how much of each post’s text will appear before the “Read More” link.
- Display Post Meta: Choose whether you want to show or hide post meta information.
- Meta Key: Enter the custom field key used to retrieve the post meta value for the timeline story.
- Pagination Settings: Choose how users navigate between multiple pages of posts. You can use the default numbered pagination or enable AJAX “Load More”.
- Pagination Design: Choose a preset design for the pagination controls.
- Display Per Page: Set the number of posts displayed on each page.
From Extra Settings:
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
- Year Label Setting: Show or hide the year label display within your timeline.
- Navigation Menu: Show or hide the year navigation bar, allowing users to quickly jump between different years in your timeline.
- Position: Choose where the year navigation menu appears.
- Style: Choose the visual style for the year navigation menu.
- Line Filling: Toggle this on if you want to fill the center line connecting all posts.
- Category Filters Setting: Choose whether to show or hide filters to let visitors filter posts from specific categories.
- Add Categories Slug for Filters: Display all timeline stories or choose to display posts from a specific category.
- Border Radius: Set the corner roundness of the story content, media, and Read More elements.
- Border Width: Set the thickness of the story border. The timeline connector uses the same border width.
- Story Padding: Set the inner spacing around the story content.
- Story Spacing: Set the space between individual timeline stories.
- Line to Story Gap: Set the horizontal space between the timeline line or icon area and the story cards.
- Show Featured Image: Choose whether to display the featured image with each post.
- Image Size: Choose the WordPress image size to use for the featured images, such as Large.
- Image Width: Set the width of the featured image as a percentage of its available space.
- Image Height: Set the height of the featured image.
- Object Fit: Choose how the featured image fits within its image container.
- After being satisfied with all the changes, click on Insert Shortcode.
- Shortcode will be added to your page. Now publish your page and preview it.
Add Vertical Post Timeline in Gutenberg Block Editor
If you are using the Gutenberg Editor, follow these steps to add a Vertical Post Timeline:
- Open any page or post in the Gutenberg editor.
- Click on the “+” Add Block button.
- Search for “Timeline” and select the Post Timeline Shortcode.
- The shortcode will be added to your page.
- After adding the timeline shortcode to your page, you can fully customize the display of timeline using the following settings.
Layout Settings
- Layout: Choose a vertical layout from the available options.
- Timeline Width: Choose how much space the timeline should use within the content area.
- Custom Width: Set the maximum width of the timeline when Custom width is selected.
- Design: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Color Scheme: Choose the color theme for your timeline. You can use the default, dark, or light skin according to your requirements.
- Connector Style: Choose how the posts pointers connect to the timeline line.
- Story Marker: Choose the marker displayed on the timeline line for each post.
Content Settings
- Category Slugs: Enter the category slugs you want to use for filtering timeline posts.
Content Source
- Post Type Slug: Define the content type of your timeline (like Posts).
- Taxonomy Slug: Choose which type of content group you want to display in your post timeline.
- Tag Slugs: Choose specific tags whose posts you want to display in the timeline.
Story Order
- Order: Choose how your posts appear on the timeline from ASEC or DESC.
Story Date
- Show Date: Choose whether to show or hide the date for each post.
- Date Format: Select how the date should appear on your timeline.
Story Content
- Title: Choose to show or hide the post title.
- Title Link: Enable or disable the link on the post title.
- Content Type: Choose how much post content to display: Short, Full, or Hide.
- Content Length: Set how much of each post’s text will appear before the “Read More” link.
- Read More Link: Show or hide a link to the full post.
- Read More Text: Enter a custom text for the Read More link.
- Open Read More Link In: Choose whether to open the read more link in the Same Tab or a New Tab.
Post Meta
- Show Post Meta: Choose whether you want to show or hide post meta information.
- Meta Key: Enter the custom field key used to retrieve the post meta value for the timeline story.
Pagination
- Pagination Type: Choose how users navigate between multiple pages of posts. You can use the default numbered pagination or enable AJAX “Load More”.
- Pagination Design: Choose a preset design for the pagination controls.
- Posts Per Page: Set the number of posts displayed on each page.
Extra Settings
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
Year Navigation
- Year Label Setting: Show or hide the year label display within your timeline.
- Navigation Menu: Show or hide the year navigation bar, allowing users to quickly jump between different years in your timeline.
- Position: Choose where the year navigation menu appears.
- Style: Choose the visual style for the year navigation menu.
Scroll Fill
- Toggle this on if you want to fill the center line connecting all posts.
Category Filters
- Show Filter: Choose whether to show or hide filters to let visitors filter posts from specific categories.
- Filter Categories: Display all timeline stories or choose to display posts from a specific category.
Spacing & Size
- Border Radius: Set the corner roundness of the story content, media, and Read More elements.
- Border Width: Set the thickness of the story border. The timeline connector uses the same border width.
- Story Padding: Set the inner spacing around the story content.
- Story Spacing: Set the space between individual timeline stories.
- Line to Story Gap: Set the horizontal space between the timeline line or icon area and the story cards.
Image Settings
- Show Featured Image: Choose whether to display the featured image with each post.
- Image Size: Choose the WordPress image size to use for the featured images, such as Large.
- Image Width: Set the width of the featured image as a percentage of its available space.
- Image Height: Set the height of the featured image.
- Object Fit: Choose how the featured image fits within its image container.
- After being satisfied, publish your page and preview it