Section 1

Instalation

Wordpress Instalation

Login to your WordPress website backend and on the left menu you will find “Plugins” link. Hover that link and click “Add New” from a dropdown menu. On the top of the page with plugins click “Upload Plugin” button and click “Browse” and select “ContentTimeline.zip” file from your plugin folder and click “Install Now” button.
NOTE: Depending on your hosting company and server settings you may or may not be prompted for a FTP password to your hosting. If you do not know your FTP username, host and password please contact your hosting provider.

FTP Instalation

Extract your “ContentTimeline.zip” into a separate folder. Login to your FTP account (using some FTP software, FileZilla is free and reliable) and browse to the location of your wordpress website. Once you are in the root of your wordpress installation folder open “wp-content” folder and inside it open “plugins” folder. Now copy your previously extracted folder to “plugins” folder and go to your WordPress backend.
NOTE: Some hosting companies have very high permissions set on their server. This means that you may not have high enough permission to paste files to your online folders. If this is the case, please contact your hosting provider and explain them that you need permissions to write on your server.

Section 2

Creating Your First Timeline

Once the plugin is installed an activated you can proceed to create your first timeline. In the WordPress backend click on the “Content Timeline” in the left menu and click “Add New” button on top of the page. You are now located at the main page of your new timeline. Here you can set-up your timeline, add content and everything else that we will cover in the rest of this manual.
Lets start with naming your first timeline and adding some content to it. Type in a name of your new timeline in the field at the top of the page. There are 2 ways of adding content to your timeline:

ADDING CONTENT FROM POST CATEGORIES

At the center of your page click the “Add New Item / Category” button. You can choose from 3 options, select “Whole Category” option and select a category from your existing ones to add to your timeline and click “Add” button. Once you have added the category to your new tiimeline a list of all posts from that category will appear bellow that button. You can now choose to click “Save Timeline” and preview it or you can expand each individual post and change some of its settings (image, title, excerpt, date, category, links).
Once an item is expanded you can set it to be a start item by selecting a checkbox “Start Item” on the far right of that particular post.
You can also “drag and drop” all posts to re-arrange them the way you want them.
NOTE: If a post contains some HTML in it it may break the preview and excerpt txt. That can be fixed by manually editing that particular post from Content Timeline.

ADDING CONTENT MANUALLY

At the center of your page click the “Add New Item / Category” button. You can choose from 3 options, select “Add New” and you will get a blank card with no content in it. Now you have the option to add cover image, active cover image, cover image link (prettyPhoto), title, content, date, category, excerpt text, content text, button URL, enable / disable scroll.
You can add as many custom cards as you want, you can also import a category and add custom cards to it.

Section 3

MANAGING YOUR TIMELINES

You can have multiple timelines on your website with different settings each. In order to manage them you have a preview screen with all your created timelines. You can see this page by clicking “Content Timeline” link in WordPress backend. On this page you can create new timelines, delete some of the existing ones and edit any timeline.

Section 4

Settings

GLOBAL SETTINGS

  • Style: Choose one of the premade style for timeline layout. There are 14 different styles to choose from
  • Vertical: Switch timeline orientation to vertical
  • Disable Pretty Photo: Disable link on an image to open up a pretty photo gallery
  • Read More Link: Enable opening of a post in a new window instead of a preview
  • Scroll Speed: Set the speed of the horizontal scroll for the Timeline cards
  • Easing: Choose an easing of your scroll transition
  • Close Item on Transition: Check this box to disable an item being open when scrolling your cards
  • Latest Post is Start Item: Set the latest post that you added as a first item on the Timeline
  • Load Posts Dynamic: Check this box to enable a post to be added automatically to timeline once it is created in WordPress
  • Switch Direction: Latest posts are located on the right
  • Autoplay: Check this box to enable autoplay
  • Autoplay Mobile: Check this box to enable autoplay on mobile devices only

GLOBAL SETTINGS

  • Autoplay Step: Set the amount of delay for autoplay
  • Hide Years: Check this box to remove years from your timeline
  • Type: Choose the type of your timeline ordering: Years, Categories, Months
  • Timeline Width: Set the width of the entire timeline
  • Item Margin: Set the space between the cards
  • Item Height: Set the height for the cards in a timeline
  • Read More: Choose the option for your Read More button: Whole Item, Button, None
  • Hide Timeline / Navigation: Check this box to hide the timeline above the cards / hide navigation arrows
  • Line / Navigation Style: Choose the design for your timeline and navigation
  • Shadow: Set the shadow options for your cards: Show, Show on hover, Hide
  • Node Desctiption Color, Node Line Color: Set the colors for nods on the timeline and the line itself
  • Node Arrows Color, Node Dot Color: Set the colors for nod arrows and the dot itself

CARD SETTINGS

Default view

  • Card Width: Choose the width for your cards
  • Content Padding: Choose the padding of all elements in a card
  • Image Height: Choose the height of an image in a card (if the image is not full width of the card)
  • Image Border Width: Choose the width of the border bellow the image (0 = disabled)
  • Image Border Color: Set the color of the border bellow the image
  • Show Date: Choose to display the date of a post on a card
  • Background Color: Choose the background color for your cards
  • Background Image: Choose the background image for your cards

CARD SETTINGS

Active view

  • Card Width: Choose the width for your cards
  • Content Padding: Choose the padding of all elements in a card
  • Image Height: Choose the height of an image in a card (if the image is not full width of the card)
  • Image Border Width: Choose the width of the border bellow the image (0 = disabled)
  • Image Border Color: Set the color of the border bellow the image
  • Show Date: Choose to display the date of a post on a card
  • Background Color: Choose the background color for your cards
  • Background Image: Choose the background image for your cards
  • Scroller Color: Choose the color of the scroller in an active view of the card if there is more content to be displayed then the height of the card is

BUTTON SETTINGS

  • Button Type: Choose the type of the button on your cards: Flat, Flat White, Sharp (when the button is selected as a “Read More” option)
  • Text: Type in the text that you want to display on your button (the default text is “Read More” )
  • Close Text: Type in the text that you want to display on your close button (the button is located in the active view of any card)
  • Color: Choose the color for the buttons
  • Hover Color: Choose the hover color for the buttons

FONT SETTINGS

  • Title Font Size / Line Height: Choose the font size and line height (space between the rows) for the title
  • Title Font Type / Color: Choose the font type (Google fonts) and the color
  • Text Font Size / Line Height: Choose the font size and line height (space between the rows) for the title
  • Text Font Type / Color: Choose the font type (Google fonts) and the color
  • Open Title Alignment: Choose the alignment for the title: Left, Center, Right
  • Open Title Font Size / Line Height: Choose the font size and line height (space between the rows) for the title
  • Open Title Font Type / Color: Choose the font type (Google fonts) and the color
  • Open Text Font Size / Line Height: Choose the font size and line height (space between the rows) for the title
  • Open Text Font Type / Color: Choose the font type (Google fonts) and the color

Section 5

Add a timeline to your page

USSING VISUAL COMPOSER

If you do not have an already existing page where you want your timeline to be placed you need to create a page in WordPress. Go to “Pages” and click “Add New” button. Once on that page activate Visual Composer by clicking “Backend Editor” button. Now click the “Add Element” button and add “Text Block” shortcode. Now click “Content Timeline” button on the left WordPress menu and open it in new window. Copy the shortcode for your timeline (it should look something like this “shortcode example” ) and paste it in the “Text Block” shortcode on your page. Click “Save Changes” for that shortcode and update and preview your page. Your timeline should now be live and visible on your page.

DEFAULT WORDPRESS PAGE

If you do not have an already existing page where you want your timeline to be placed you need to create a page in WordPress. Go to “Pages” and click “Add New” button. Now click “Content Timeline” button on the left WordPress menu and open it in new window. Copy the shortcode for your timeline (it should look something like this “shortcode example”) and paste it on your page where ever you want it. Update and preview your page. Your timeline should now be live and visible on your page.

Section 6

UPDATING THE TIMELINE PLUGIN

When updating to a newer version please read the CHANGELOG file to understand all changes made in order to know what has been updated, what are the new options, and stuff that you should pay attention to. If you’re constantly updating your system (which is recommended) this file will help you a lot!
Follow the steps below to update Content Timeline plugin
– Navigate to Plugins admin menu
– Click Deactivate next to Content Timeline plugin name. After the plugin has been deactivated click Delete and then Yes delete all the files button
– After the plugin has been deleted repeat the process of installing plugin via WordPress from this documentation with new updated files.