3. Using Bold Timeline

INTRODUCTIONBold Timeline options

After Bold Timeline is installed and activated, you should see Bold Timeline custom post type on your dashboard.

In order to create new timeline, click on Add New option. Should you want to edit one of the existing timelines, you need to import demo content. Instructions on how to install demo content can be found in Installing Demo section.

Once you click on ‘Add New’ option, you will see box with big ‘+’ button. Click on it to add Bold Timeline element.

Bold Timeline has several commands, such as:

  • Add – add new element to the Bold Timeline.
  • Edit – edit Bold Timeline settings such as color, shape, etc.
  • Duplicate – duplicate an element or entire timeline.
  • Copy – copy an element or entire timeline.
  • Copy + – copy several elements one after the other.
  • Paste – paste previously copied element / timeline.
  • Delete – delete an element or entire timeline.

SECTION 01Bold Timeline Settings

If you edit Bold Timeline element (pencil icon), you will see dialog with several options.

General Settings


Line position – select position of the line that connects timeline items.

Line style – here you can select if the line will display, and its style.

Line thickness – here you can choose thickness of the line that connects timeline items.

Line color – color picker to choose line color.


Item Settings

These are the settings of Timeline Items. Each of these settings can be overridden on individual Timeline Items.


Style – choose a style of timeline items.

Shape – here you can select the items’ shape.

Frame thickness – select the thickness of the frame around the content in timeline items.

Frame color – color picker for items’ frame.

Background color – color picker for items’ background color.

Animation – select the timeline items’ animation direction.

Content display – choose if the content will be immediately visible or only when toggled.

Connector style – select the style of the line that connects individual timeline items to the main timeline line.

Connector color – color picker for item connector.

Marker style – this element joins individual timeline items to the main timeline line.

Marker color – color picker for item marker.

Icon shape – select the shape of item’s icon.

Icon style – select the style of item’s icon.

Icon position – choose if the icon will display on the line or opposite of it.

Icon color – color picker for icon color.

Media position – select the position of the item’s images / video / audio.

Media image gallery columns – number of columns for images in timeline item.

Title size – here you can set the title size of timeline items.

Supertitle style – choose if the timeline item’s supertitle will display as a sticker or regular supertitle.

Sticker color – if you have item’s supertitle display as sticker, here you can select color for sticker.

Title font – select font family for title.

Body font – select font family for body text.

Font subset – write desired font subset.

Item alignment – select the alignment of timeline items’ content.


Group Settings


Group shape – here you can select the group’s shape.

Group style – select the style for the timeline group.

Group frame color – color picker for frame color.

Group frame thickness – here you can choose thickness for frame.

Group title size – select size of the group title.

Title font – choose font family for group title.

Font subset – write desired font subset.

Group content display – select if  the content will be immediately visible or hidden on page load.

Buttons Settings


The following settings apply to the Button element that can be added to Timeline item.

Buttons style – select button’s style.

Buttons shape – select button’s shape.

Buttons size – select button’s size.

Buttons color – color picker for button.

Slider Settings

Slider settings will only work when Line position is set to Top (horizontal timeline)/ Bottom (horizontal timeline) in General Settings of Timeline.


Height – select slider height.

Animation – select slider item’s animation.

Navigation arrows style – choose the look of slider arrows.

Navigation arrows shape – choose the shape of slider arrows.

Navigation arrows size – choose the size of slider arrows.

Dots navigation – select if dots navigation will display or not.

Number of slides to show – write number of slides you want to  be visible at once.

Slider autoplay interval – write number of miliseconds for slider autoplay.

Slider horizontal gap – set the gap between slider items.

Slider navigation color – color picker for navigation.


Custom Settings


Custom ID attribute – set the custom ID for the timeline element.

Extra Class name – add custom class for timeline element.

Extra CSS – enter custom CSS for timeline element. Use #this as a selector for desired CSS.

Inline style – add inline custom style for timeline.

Responsive Settings


These settings allow you to hide timeline on certain screen sizes.

When you are finished with editing your Bold Timeline, copy its shortcode (e.g. [bold_timeline id=”53″]) and paste it in Text / Shortcode element on desired page.


SECTION 02Export Bold Timeline

Here is how to export Bold Timeline from one site to the other.

In order to export the timeline you created from one site, and import it to another one, please follow these steps:

1. Open timeline you want to copy, and click on Copy button.


2. Then, click on the two arrows at the bottom of the screen.


3. On the pop up that appears, click export, and copy the symbols that appear.


4. After that select to add new timeline to the site where you want to copy it. Click on the blue button to add Bold Timeline settings.


5. Then again click on the two arrows on the bottom of the screen, paste the symbols you previously copied, and click ‘Import’ button.


6. Close the pop up, and on the Bold Timeline settings panel click ‘Paste’. Make sure to save changes and now your timeline should be properly copied.


SECTION 03Translate Plugin

The procedure is standard – you can find the .pot file in the plugin’s languages folder.

Please use PoEdit to translate the .pot file and create respective .po and .mo fies.

You should upload .po and .mo files created using PoEdit back to plugin’s languages folder.

Please name .po and .mo files for example: bold-timeline-nl_NL.po and bold-timeline-nl_NL.mo (nl_NL is the language code for dutch) and place them in /wp-content/plugins/bold-timeline/languages/. 

For other languages code, please refer to the following link: Internationalization.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist.


In this section you will find the most common questions regarding the editing of Bold Timeline.
How to update a plugin?

There are two ways to update Bold Timeline plugin – through wp-admin or through FTP.

Since plugin version 1.0.3 it is possible to update plugin through your dashboard, in Updates panel. In order to be able to do this, you will need to register your purchase code.

You can register your purchase code in Bold Timeline >Product License panel, on your dashboard.

Other option to update Bold Timeline to the latest version is to download the plugin folder from the download section of your CodeCanyon profile and update through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.

Extract bold-timeline file from the folder you downloaded, and upload it to /wp-content/plugins/ folder of your WordPress installation. You will be prompted to overwrite the existing files. Select ‘Yes’, and the plugin will update.

If you have made some changes in the plugin’s code, you will need to reapply the changes in the new version.

Timelines that were made before update will be preserved.