Timeline Designer WordPress Plugin Help Document

Getting Started




Introduction

We appreciate your decision of using our Timeline Designer Plugin.

This document has been written in such a way that it can be easily understood by beginners as well as advanced users or developers.

If you have an any query that is beyond the scope of document, please feel free to contact us at support@solwininfotech.com

Timeline Designer
We offer plugin customization as well. Get in touch for a quote if you want to customize your WordPress posts with Timeline Designer plugin.
Quick Search Tip: Access your browser search with keyboard shortcut "Crtl+F" (Windows) or "CD+F" (OSX) for instant results.

Installation

1. Installation Via WordPress Admin area

  1. Step 1. Log into your WordPress admin area.
  2. Step 2. Click on the left side plugin menu.
  3. Step 3. Now at the top you can see the Add New button, click the button.
  4. Step 4. Again at the top you can see/view Upload Plugin button, click the button.
  5. Step 5. Extract that timeline-designer.zip file in your local pc and find there another plugin file (timeline-designer.zip) that you have downloaded from wordpress.org.
  6. Step 5. Now upload the plugin zip file (timeline-designer.zip). After upload, click on "Install" button and click on "Activate Plugin".

Plugin Installation

Plugin Upload

Plugin Upload

Plugin Installation

2. Installation Via FTP

  1. Step 1. Extract the above selected zip file (timeline-designer.zip). It will create 'timeline-designer' folder with all plugin files & folder inside it. (Remember this extracted folder path)
  2. Step 2. Using your FTP program like Filezilla or cPanel, upload the non-zipped plugin folder into the /wp-content/plugins/ folder on your server.
  3. Step 3. Go to Dashboard » Plugins » Installed Plugins page and find 'Timeline Designer' from plugin list.
  4. Step 4. Click on Activate to activate Timeline Designer plugin.
Before going to the detail document, preview the Quick Guide of the Timeline Designer.

Quick Guide

Quick guide will help you to easily create timeline posts on your website in a few easy steps within 5 to 10 minute. However, you can set it up in only a few steps. We provide you easily understandable settings in the admin panel of your wordpress.

Please follow below quick steps.

Create a new Layout

First you have to create a timeline Layout which contain settings of timeline post layout.

Add New Ad

Create custom post type.

Product Support

1. Documentation 2. FAQ 3. Ask our experts 4. Customize The Plugin

Detail Document

Create a new Layout

  1. Step 1. Login in to wordpress admin and got WP Timeline Menu.
  2. Add New Ad
  3. Step 2. Now click on ‘Create New Layout’ Button.
  4. Create New Layout Button
  5. Now you can see the Layout Option panel and vertical settings menu where you have different settings related to Layout.
  6. Create New Layout Button

General Settings

  1. Step 1. First select a template which you want to show in your timeline layout from General Settings.
  2. Layout Settings Panel
  3. Layout Settings Panel
  4. NOTE: Few settings depend on the selected template and only work with that particular settings, so it may not show when you select a template.
  5. Step 2. Give a Layout Name, add timeline headings, sub-headings and select ‘Post Type’ which you want to show on the timeline layour. You also have the option to select a custom post type as well as create a new post type for timeline layout.
  6. Layot Name, Headings, Post Type
  7. Step 3. Select a page to show the timeline layout although you also have the option to copy shortcodes and paste in your designer page.
  8. Step 4. Select the number of posts you want to show in a timeline layout at a time.
  9. Step 5. Display settings provide you to show post meta fields such as post category, tags, author, date, comment, etc. in timeline posts, as well as you can disable/enable links to those particular meta fields.
  10. Step 6. Add Custom CSS in Timeline Layout.
  11. Layot Name, Headings, Post Type

Standard Settings

  1. Step 1. Set ‘Template Background Color’ which appears on the whole background of the timeline layout.
  2. Step 2. Set default link color and link hover color example: meta link color. By default, it's disabled but if you are using the WP Timeline Designer PRO Plugin then it will be active.
  3. Step 3. Set number of post offset.
  4. Step 4. Set post meta typography settings where you able to select font-family, font-size, font-style etc.
  5. Step 5. Set date typography settings where you able to select font-family, font-size, font-style etc.
  6. Layot Name, Headings, Post Type

Timeline Settings

  1. In timeline settings there are layout base options which depend on the selected layout mostly are colors, text, animation, layout type. Few layouts support horizontal as well as vertical. So those settings impact on timeline layout elements such as border color, border radius, alignment of layout’s post etc.

  2. Step 1. To change the line width of the timeline use ‘Timeline Line Width’.
  3. Step 2. To change the style of the timeline use ‘Timeline Style’. To change or set the style view of the timeline use ‘Timeline Style View’. By default, it's disabled but if you are using the WP Timeline Designer PRO Plugin then it will be active.
  4. Step 3. To change the animation of the timeline use ‘Timeline Animation’.
  5. Step 4. To change the icon border radius of the timeline use ‘Timeline Icons Border Radius’.By default, it's disabled but if you are using the WP Timeline Designer PRO Plugin then it will be active.
  6. Step 5. To change the layout color use ‘Template Color’. If you want show vertical or horizontal post so there is option ‘Layout Type’.
  7. Timeline Settings

Post Title Settings

  1. Step 1. In ‘Post Title Settings’ you have the option to change post title link, title alignment, color, and hover color option.
  2. Step 2. In ‘Typography Settings’ you have the option to change Font-Family, Font-Size, Font-Weight, Line-Weight, Italic Font-Style, Text Transform, Text Decoration, Letter Spacing. By default, it's disabled but if you are using the WP Timeline Designer PRO Plugin then it will be active.
  3. Post Title Settings

Post Content Settings

  1. Step 1. Setting ‘For Each Article In A Feed, Show’ you able show summary or full content of post.
  2. Step 2. ‘Show Content From’ option allows you to select show content from post excerpt or from post content.
  3. Step 3. If you want to ‘Display HTML tags with Summary’ then you have option to display it or not.
  4. Step 4. If you want to show dropcap letter in post content then you have option with typographic settings
  5. Post Content Settings
  6. Step 4. To limit post content in timeline posts there is the option ‘Enter Post Content Length’, you just have to adjust how many words show at a time in each post.
  7. Step 5. ‘Advance Post Contents’ allow you to end post content after paragraph or after a special character.
  8. Step 6. Set ‘Post Content Color’
  9. Post Content Settings
  10. Step 7. Under Post Content Typography Settings tab there is option for full customization of content typography
  11. Post Content Settings
  12. Step 8. Next option to show ‘Read More’ link or button, there is a full customizable option like text color of read more, alignment, background color, border, border style, border radius, hover, margin, padding of button, text-decoration and full customizable typography.
  13. Post Content Settings

Content Box Settings

  1. NOTE: All content box settings applied on post content box but in a few templates it applied for all post containers including post title depending on layout.
  2. Step 1. For the content box there is borde settings, border radius, background color of content box, box shadow settings and padding settings.
  3. Media Settings

Media Settings

  1. Step 1. ‘Media Settings’ you have to option ‘Enable Media’ in timeline posts or you can disable it if you don’t want to show, ‘Post Image Link’ if you want to add a link over image.
  2. Step 2. In ‘Post Image Hover Effect’ you can enable to show the hover effect on image otherwise, you can disable it if you don’t want to show the hover effect and set default image in case posts don’t have an image. You also can configure post media size using the ‘Select Post Image Hover Effect’ option to select the hover effects.
  3. Step 3. ‘Select Post Default Image’ option to select the default image or browse from you computer. ‘Select Post Media Size’ option to set the media size of post. ‘Add Custom Size’ option is use to give custom size to your post.
  4. Media Settings

Horizontal Timeline Settings

  1. Default all layout template set to vertical timeline post show, but we provide same design layout in horizontal, for horizontal timeline there few customization settings, display timeline bar (icons), auto slide, scrolling speed(ms), number of navigation item, number of slide etc. few settings not apply for few templates because it depend on layout design.
  2. Horizontal Settings

Pagination Settings

  1. Pagination Type: Paged Option allow you to show traditional pagination in your posts. There is Pagination Template option comes with a few preloaded templates and pagination color settings where you are able to set text color, background color, border color, hover color etc.
  2. Pagination Settings

Social Share Settings

  1. Enabling Social Share show social media icon on each timeline posts with counter and you able to customize social share icon using below options:

  2. Step 1. ‘Social Share Style’ option is use to load default or custom pre build icon packs.
  3. Step 2. ‘Available Icon Themes’ gives you the option to choose one of the social icons pack.
  4. Social Share Settings
  5. Step 3. ‘Social Share Links Settings’ gives options to show/hide specific social media icons as well as counter and have to enter the facebook access token.
  6. Social Share Settings
  7. Step 4. ‘Few More Options’ like Mail Share Content where you are able to set email content when shared via email. Social Share Count Position to set counter position in social social icon. Social Share Position to set positions of icons.
  8. Social Share Settings

Timeline Designer Features

  1. Create Layout You have the option to create unlimited layouts with a built-in template.

  2. Select Template There are various build-in templates which are fully customizable , Select a page where you want to show posts' timeline layout. Meta settings and custom css. A template has vertical options or horizontal or both you have choice how you want to show timeline.

  3. Meta Settings You have a full post meta option to show, hide, and add links or not as well as there is also an option to limit the number of posts to show on timeline layout.

  4. Standard Options In the standard option you can set background color of template and typography option for meta, there are also few more color options which are only for particular template.

  5. Post Title Options Post title in the timeline layout is fully customizable where you can set color, alignment etc.

  6. Post Content Settings In the post content option you have the option to set post excerpt, dropcap, content color, read more text and button, typography.

  7. Content Box Content box of a timeline layout, there is an option for border, shadow, border radius, background color, padding.
  8. Timeline Setting In timeline layout there icons, or custom image so you can setup radius of those icon, timeline style, template color, layout type (Vertical and Horizontal)

  9. Media Option Enable media for timeline’s posts, link on media, hover effect on images, option to add default image, set particular size post images or add custom size.

  10. Horizontal Options With the horizontal option you can customize horizontal timeline sucha enable auto slide, scrolling speed, number item in navigation, number of slide etc.

  11. Pagination There are 1 types of pagination: paged (with few customizable build-in template)

  12. Social Media Icons Enable social media icons on timeline post with customizable option like social icon style, shape of icons, size of icons etc.

  13. Custom post type option In particular case you don’t need to add custom code or install a plugin for custom post type, plugins have built in features to create custom post type with custom taxonomy which you can use with timeline easily.

  14. Responsive Compatibility You not need to worry about responsive issue with various devices, Timeline Designer plugin design such way it auto adjust with your blog posts layout and look perfect in all devices.

  15. Simple and Easy configuration Plugin provides easy configuration.

  16. 3rd Party Builder Support Such as WPBakery Page Builder, Elementor, KingComposer, Page Builder by SiteOrigin, Beaver Builder and divi with shortcode.

Translation

Timeline Designer plugin is language compatible, thus can be translated into multiple languages. You can use POEdit plugin for translation.

  1. Step 1. Install Poedit tool and open it
  2. Step 2. Open .POT file from /wp-content/plugins/timeline-designer/languages/ that you want to translate
    .pot file editin in Poedit tool
  3. Step 3. Now, click on "Save"
  4. Step 4. A popup will appear, enter your Language code ( Ex :- "ca_CA" for English (Canada)) in language option

    Translation property
  5. Step 5. Then select source path tab and you have to modify this path to full path of your plugin that you want to translate.

    Select path
  6. Step 6. Then press ok button.
  7. Step 7. Then give file name like this wp-timeline-designer-ca_CA.po for English (Canada) language.
  8. Step 8. Then save file inside language folder in plugin that you want to translate and all strings are appear in your poedit editor POT file
  9. Step 9. Select your string that you want to translate and in bottom side there are two options one is Source Text and another one is Translation Translate string
  10. Step 10. Source Text keep as it is and in Translation section enter your translated string of selected string that you want to translate and then save it.
  11. Step 11. Repeat step 10 untill your all strings to be translate.
  12. Step 12. Now you will get two separate files – a .po file and a .mo file.

    Note : When you save the files, you must name them according to your language code. Find a list of language codes at WordPress in your Language. For example, the language code for English (Canada) is ca_CA, so you would save the translated files as ca_CA.po and ca_CA.mo.

    PO MO file
  13. Step 13. Then go to wp-config.php file then enter the below code.
    define('WPLANG', 'Your language code'); for Ex.(ca_CA for English (Canada)) then save it.
  14. Step 14. Select language from admin side, Go to Dashboard » Settings » General in that check Site Language options.

    Select language
  15. Step 15. Check language prefix in front end, view HTML.

    Language prefix
For more about translating WordPress themes please visit the following link : https://developer.wordpress.org/themes/functionality/localization/

FAQ

1. Does plugin support custom post type?

Yes, the plugin supports custom post type and custom post type taxonomy and custom tag as well.

2. Is template layout responsive?

Yes, all layouts are fully device ready and no need worry about responsiveness.

3. I don’t want to show featured images, how to hide featured images?

There is an option for disable media in that particular layout, you can click disable from there and all posts' images will hide.

4. How to add a social share icon in a timeline post?

The plugin has an option for social share icons where you enable/disable icons to show on front. You also set up the size of icons, type and style of icons as well as config Facebook access code and mail content.

5. I have a woo store, can I add my products in timeline?

Yes, you add a product in timeline plugins has fully supported woo commerce and you can easily add products to any layout. It will show rating, price, add to cart button, product tags and category.

6. Can I customize pagination of timeline according to my current theme?

Yes, You can you as plugin already has an in-build template which is customizable. You can easily change pagination color.

7. Is there an option to customize design other than inbuilt options?

Yes, you can also customize design using custom CSS or you can add CSS in your own theme using template classes.

8.How to show same layout on multiple pages as well as on a specific portion of my layout?

You can copy shortcode of layout and paste of in any page or inside page template content. You can use same shortcode multiple time.

9. I just want to show a plain post without any other meta content like date, author etc.?

You have the option to show and hide post meta, such date, post author, comment, category, tag form general settings.

10. How to show limited posts in timeline?

There is an option under general tab to limited posts as well as you can select the specific post type or product.

11. How to add timeline in Divi Module?

Divi not support any wp widget in divi module so you have to copy code of a timeline, add divi text module or content module past shortcode and save, now you can see the timeline on the front-end.

Thanks for using Timeline Designer Plugin!

We would like to thank you for using our Timeline Designer Plugin! If you have any difficulties with Timeline Designer Plugin or need any additional service, do not hesitate to contact us. We provide priority support with all our premium WordPress themes and plugins.

Just contact us on support.solwininfotech.com

We will be happy to assist you!