The plugin is a dynamic event plugin for WordPress, allowing users to create interactive timelines on their websites effortlessly. It enhances user engagement through visually appealing timelines that showcase key events seamlessly. Utilizing a user-friendly interface, it offers a wide range of customization options for colors, layouts, and content organization. Integrated smoothly into WordPress, users can efficiently manage and display events in chronological order, making it ideal for showcasing company history, project milestones, or personal achievements. Its responsive design ensures timelines look great on all devices, enhancing the overall user experience.

Plugin Version: 3.5.4
 
WordPress plugin Themify Timeline

Plugin Features

Enabling users to create compelling timelines, it provides various layout options, such as vertical and horizontal orientations, along with flexible styling choices to match the websites aesthetics. Users can easily add images, videos, descriptions, and links to each event on the timeline, creating a rich multimedia experience for visitors. The plugins intuitive drag-and-drop functionality simplifies the process of adding, rearranging, and editing events, allowing for quick updates without extensive coding knowledge. Offering smooth navigation, users can interact with the timeline seamlessly, whether scrolling through events or clicking to explore specific details.

With its robust features, it offers timeline animations and effects that bring an element of interactivity to the user experience. Users can choose from various animation styles to customize how events appear on the timeline, adding a visually engaging dimension to the website. Furthermore, it supports timeline categories and filters, enabling users to categorize events based on different criteria and allowing visitors to filter events based on their interests. This feature enhances content organization and accessibility, making it easier for users to explore specific types of events within the timeline.

The plugin boasts compatibility with popular WordPress themes and plugins, ensuring seamless integration into existing websites without disrupting functionality. With regular updates and maintenance, users can rely on its stability and performance, providing a dependable tool for showcasing events dynamically. Leveraging Themify Timeline extensive documentation and support resources, users can quickly troubleshoot any issues and maximize the plugins potential for their websites. Overall, it offers a powerful solution for creating visually captivating timelines that captivate audiences and effectively communicate information in a chronological format.

Specifications:

Release date: 20-05-2015
Last updated: 14-04-2026
Type: Paid
License: GPL 
Subject: Calendars & Events
Compatibility: W5.x W6.x
Includes: Plugin
Language packs: English
Developer: Themify

Rating:
4.452 1 1 1 1 1 (250 Votes)

Download by subscription!

You need to log in on the site and purchase a club subscription!

Share with your friends!

 

How to Configure and Use Themify Timeline

Themify Timeline is useful not as a standalone "pretty timeline," but as a module for Themify Builder that turns a sequence of posts or manually entered events into a clear chronological section. In this guide, we will look at where to find the module after installation, how to choose a data source, which settings affect appearance and item order, how to verify the result on the live site, and what to do if the timeline does not look the way you expected.

This guide is written for a WordPress site owner or editor who already works with Themify Builder or is willing to use it for visual page building. We will not repeat the product's marketing copy. Instead, we will walk through the practical workflow: preparation, installation, adding the module, configuring posts and manual text events, checking the mobile layout, making safe visual adjustments, and troubleshooting common issues.

It is also important to keep one limitation in mind: Themify Timeline is a Builder Addon. It does not replace Themify Builder itself, does not create a separate post type on its own, and is not a universal WordPress editor block. Its strength is working inside a Builder page, where you can combine the timeline with sections, backgrounds, animation, custom spacing, layout imports, and other Builder features.

Themify Timeline inside a WordPress page with Builder settings and the final front-end result
Guide cover: the Timeline module connects settings in Themify Builder with a finished chronological section on the page.

What the Timeline Module Solves and Where It Works Best

The module's main purpose is to show events, posts, or short text blocks not as a standard grid, but as a sequence. This format helps readers see how something developed over time: a company's story, project stages, a product roadmap, a publication archive, a course outline, a series of releases, a biography, a case study collection, or a list of major milestones. If a regular list answers the question "what is on this page," a timeline answers "how did this develop, and in what order should I read it?"

On the official addon page, Themify highlights two main output formats: timeline graph and list view. This is an important choice. A graphic timeline works better as a visual story, where the date, icon, image, and text form a sequence of steps. A list is more practical when there are many events, the design needs to stay calmer, and visitors care more about scanning headlines quickly and opening the item they need.

The second key decision is the content source. The module can display posts or manual text items. Posts work well for an existing published archive: news, case studies, releases, articles, project updates. Manual mode is better for smaller pages where each event should be written separately and does not need to exist as a WordPress post. That can include items such as "Company Founded," "First Version Released," "Expansion into a New Market," "Product Update," or "New Office Opened."

When a Timeline Works Better Than a Regular Posts Block

Use Themify Timeline when the order of items matters more than a card-based showcase. For example, on an About page, visitors are not just reading news. They are trying to understand the brand's path: what came first, where the turning point happened, and which milestones demonstrate real experience. On a product page, a timeline helps show a feature roadmap or the history of major updates without forcing everything into a heavy table. On an event page, it can show the schedule by time or the stages of preparation.

If the goal is to display a large volume of content with filters, pagination, search, tags, complex sorting, and separate archives, Themify Timeline alone may not be enough. In that case, it works better as a showcase layer for selected events rather than the main catalog. For the full catalog, it is usually better to keep standard WordPress archives, Post Type Builder, filters, a search page, or another dedicated component already used on the site.

Who Themify Timeline Fits, and Who It May Not

The module is a good fit for editors who already build pages in Themify Builder and want to add one expressive section without bringing in a separate timeline builder. It is also convenient for sites running Themify themes, because Builder is already part of that ecosystem, and the module interface follows the familiar logic of rows, modules, settings panels, and saving changes.

It is not the best fit for a site where editors work only in the WordPress block editor and do not want to enable Builder for a single section. Another questionable case is a large historical archive with hundreds of events, categories, external filters, and separate event cards. For that kind of project, it is better to evaluate a dedicated timeline plugin with its own timeline entries, pagination, and advanced filtering from the start.

Practical rule of thumb: if you need a timeline on one or several Builder pages and it consists of selected posts or manual events, Themify Timeline is a logical choice. If you need a separate content section with a large number of events and complex navigation, the timeline module is better treated as part of the design, not as a full data system.

What to Check Before Installation

Before installing Themify Timeline, check not only the addon archive itself but also where it will be used. The official documentation clearly states the dependency: Builder Addons require Themify Builder. That can be Builder included in a current Themify theme or the separate Themify Builder plugin. If Builder is not installed and active, Timeline will not appear as a standard standalone editor block.

The first checkpoint is who will edit the page. Themify Builder supports both backend edit mode and frontend edit mode. For an editor who prefers seeing the result immediately, it is usually more convenient to open Builder on the live page from the admin bar. For building structure more carefully without visual distractions, the admin-panel mode may be better. The Timeline documentation treats both as standard Builder module workflows.

The second question is what data will feed the timeline. If you plan to use posts mode, prepare categories, titles, excerpts, and featured images in advance. The Timeline documentation lets you choose a category, limit, offset, sorting, order, text display format, whether to show or hide the featured image, and the image size. If the post content is not prepared, the module may still output items, but the result will look random: some cards will have images, some will not, some excerpts will be too long, and the order will not tell a clear story.

The third question is mobile readability. Themify Builder supports responsive styling and separate visibility settings for different devices. This matters especially for a timeline: a vertical line, images, dates, and text cards may look good on a wide screen but become too dense on a phone. That is why you should test not just the desktop version, but also the tablet and mobile views in Builder before publishing.

Quick Checklist Before the First Launch

  • Make sure Themify Builder is active, either as part of a Themify theme or as a standalone plugin.
  • Prepare the page where the timeline will appear, and decide whether you will edit it in backend or frontend mode.
  • For posts mode, set up a clear category structure in advance, add featured images, and write short excerpts.
  • For manual text mode, prepare a list of events: title, date, link, icon, image, and short text.
  • Create a backup or save a revision of the Builder layout before making major page changes.
  • Check whether another block on the page is already showing the same posts, so you do not end up with duplicate content.

Installing the Module and Running the First Check

Themify describes Builder Addon installation as a standard WordPress plugin install. The addon archive is uploaded through Plugins > Add New > Upload Plugin, then installed and activated. If your browser automatically extracted the ZIP archive, Themify recommends keeping the ZIP file itself, because WordPress expects the plugin archive, not an already unzipped folder.

After activation, do not look for a separate "Timeline" menu item in the left WordPress menu. According to the documentation, the module appears in the Themify Builder modules panel under Addons. That is normal behavior for a Builder Addon: you manage it inside the page where Builder is open, not through a separate settings screen in the admin panel.

Themify Timeline installation path and the Timeline module in the Addons panel
After installation, it is important to verify not just plugin activation, but also that Timeline appears in the Builder modules panel.

Post-Activation Check

Create or open a test page, enable Themify Builder, and open the modules panel using the add button. In the Addons section, you should see the Timeline module. Drag it into a row and save the page with minimal settings. At this stage, the goal is not design. The goal is to verify the full chain: "addon installed - Builder sees the module - page saves - front end displays the block."

If the module does not appear, do not immediately start reinstalling everything. First check whether Themify Builder is active, whether the archive was unpacked incorrectly, whether the addon was installed into the wrong folder, whether there is an error message on the Plugins page, and whether you are looking at an old cached version of the Builder panel. Sometimes simply refreshing the editor page after activating the addon is enough.

Importing the Demo Layout as a Learning Tool

The Timeline documentation mentions a sample Builder data file inside the addon's ZIP archive. You can import it through Themify Builder > Import / Export > Import on a page where you want to study the example. This import is not required for a production site, but it is useful as a learning tool: you can see how the demo is built, which sections it uses, how the module itself is configured, and which settings produce the expected result.

Work with the demo on a test page, not on an important published page. If the import replaces the current Builder layout or adds extra sections, restoring order will be harder than creating a separate page such as "Timeline test," importing the example there, and reviewing the settings calmly.

Two Content Sources: Posts and Manual Text

Themify Timeline has a core split that affects all later configuration. In posts mode, the module takes existing WordPress posts and arranges them as a timeline or list. In text mode, you create events directly inside the module. Both modes are useful, but they serve different workflows.

If the site already has regular content with dates, categories, and images, posts mode saves time. You choose a category, limit the number of posts, set the order, and decide whether to show the excerpt, the full content, or no text at all. This is a good model for a company blog, release log, case study list, project news, or a collection like "how we built the product."

Manual text mode works better when the events should not exist as standalone WordPress posts. For example, a company may have five key milestones, and each one needs its own date, icon, link, image, and short description. Creating five separate posts just for that may be unnecessary. Inside Timeline, you can add those event rows and keep the whole block on one page.

Posts Mode: When Post Discipline Matters

Categories are especially important in posts mode. If you choose a category that is too broad, the timeline will pull in content that does not form a coherent story. If you choose one that is too narrow, the block may be empty or too short. It is usually better to create a dedicated category for a showcase timeline or use an existing category where the content already follows a logical sequence.

The Limit setting controls the maximum number of posts. It matters not only for design, but also for readability. A large timeline with dozens of posts may look impressive, but visitors quickly lose context. If you need to show a long history, split it into several meaningful sections or keep the timeline focused on key milestones and link to the full archive separately.

Offset helps skip the first posts. Themify explains it in the documentation as a way to avoid showing the same items again across multiple rows. In practice, this is useful if the page already has a "Latest News" block and the Timeline should start not with those same items, but with earlier stages or a second group of posts.

Order By and Order define the sequence logic. On the product page, Themify lists sorting options such as ID, author, date, title, modified, and random, while the Timeline documentation for posts also mentions date, price, sales, ID, title, and random. Because of these differences in wording, it is best to check the interface in the specific installed version and avoid designing the whole page around a parameter you do not actually see in your module. For a classic historical sequence, date and ascending usually make the most sense. For a news feed, date and descending are more typical. For an alphabetical catalog, use title.

Text Mode: Control Over Every Event

In manual mode, each event has its own set of fields: title, link, icon, icon color, date, image, and text editor. That makes the module feel like a compact event editor inside Builder. This approach works especially well for static pages where what matters is not automated selection, but precise editorial control.

The title field should stay short. Timelines do not handle long headlines well because they break the visual rhythm. The date can be used not only as a calendar date, but also as a short stage label if that fits the page. For example, "Stage 1," "Launch," "Pilot," or "Public Release" may be clearer than bare numeric dates when you are describing a process rather than a calendar-based history.

Choose icons as meaning markers, not decoration. Themify mentions access to a library of 320+ icons. If the icons differ, they should help distinguish event types: idea, launch, growth, support, update, result. If the icons feel random, the timeline starts to look noisy and becomes harder to scan.

Detailed Configuration After Installation

It is better to approach configuration not by moving top to bottom through the interface, but by moving from the goal to the settings. First decide what the visitor should see: a brand story, a post archive, a list of service stages, a product roadmap, or a learning path. Then choose the layout, source, order, text, images, and responsive behavior. This sequence reduces the risk of building a block that looks attractive but does not communicate clearly.

Themify Timeline settings map: layout, source, order, display, image size, and responsive check
It helps to think of Timeline settings as a chain: content source, order, text density, images, and result review.

Module Title and the Role of the Heading on the Page

The Module Title field outputs a heading above the module. The documentation notes that it appears as an H3, is left-aligned, and displays in uppercase. That means the module title should not duplicate an existing H2 on the page. It is better to use a short functional label for the block, such as "Key Milestones," "Update History," "How the Project Evolved," or "Implementation Path."

If the page already has a full section heading, the Module Title field can be left empty or used very sparingly. Otherwise, you end up with two headings in a row, and the page hierarchy becomes harder to understand. From an SEO perspective, repeating the same heading in both H2 and H3 can also look artificial.

Timeline Layout: Graph or List View

The choice between timeline graph and list view should depend on content density. Graph works well for 4 to 12 events where each item has visual value: a date, icon, image, and short explanation. List view is better when there are more events, images are not always available, and visitors need to scan the sequence quickly.

For a public company history page, graph is usually the better choice because it shows movement over time visually. For an archive page of publications where each post leads to a full article, list view is often more practical: less decorative weight, faster scanning, and easier mobile adaptation.

Category, Limit, and Offset in Posts Mode

Start with the category. Create or choose a category that tells one story. Do not mix company news, technical articles, and personal notes in the same timeline. Even if WordPress lets you output everything together, the narrative line will be weak.

Then set Limit. For a homepage or landing page, 4 to 6 key events are usually enough. For a dedicated history page, you can use more, but it still helps to divide the material into periods. If you have 30 publications, ask whether it would be better to show 8 key milestones in the Timeline and place a link to the archive below.

Use Offset carefully. It is helpful when a page has multiple blocks that use the same posts, but a month later it may not be obvious to the editor why the first post is missing. If you use offset, leave a clear note in the page notes or even in the section name explaining which range of posts is being shown.

Display: Excerpt, Content, or No Text

The Display field determines whether to show the excerpt, the full content, or no text at all. For a timeline, excerpt is usually the best choice. WordPress treats the excerpt as a short post summary, and if the field is empty, it may generate one automatically from the opening text. A manually written excerpt is almost always better than an automatic one: it is shorter, clearer, and does not cut off a sentence in the wrong place.

Use full content inside a timeline only for short posts. If a post contains long text, tables, forms, galleries, or complex blocks, outputting the full content inside Timeline can overload the page and create layout problems. In that case, it is better to show the excerpt and link to the full post.

Hide Featured Image and Image Size

Images make a timeline feel more alive, but only if they are prepared well. A WordPress featured image represents the post visually, and Themify Timeline lets you show or hide those images and adjust their size. If the images vary too much in format, are too small, or do not match the events, it is better to hide them temporarily and return to visuals later.

The image size setting is about balancing quality and speed. Images that are too large add unnecessary page weight. Images that are too small look blurry, especially on high-density displays. In manual mode, use images with a consistent logic: the same aspect ratio, similar composition, clear alt text in the media library, and no tiny unreadable text inside the image.

Responsive Styling and Visibility

Themify Builder supports responsive styling for different screen sizes and visibility settings that let you hide elements on desktop, tablet, or mobile. For Timeline, that does not mean you should hide the whole module on phones. In most cases, it is enough to reduce spacing, make images more compact, shorten the text, and check that the vertical line does not break.

If the mobile version still feels weak, you can create a separate simplified block for mobile and hide the heavier visual version on small screens. But that increases maintenance overhead because editors have to update two blocks instead of one. So start by simplifying a single universal Timeline, and keep the separate version only for truly complex pages.

Practical Example: A Company History Page

Let us walk through a scenario that shows the logic of Themify Timeline well. Suppose you need a "How the Project Evolved" section on an About Us page. You have five important milestones: the team launch, the first product, service expansion, support launch, and a major website update. These events do not need to exist as separate posts, so manual text mode is the better option.

Example of a manual Themify Timeline workflow for a company history with dates, icons, and result review
Manual text mode works well for an editorial narrative where each event is entered directly in the module.

Scenario Goal

The goal is to create a section where a visitor understands in about 30 seconds how the project reached its current state. The timeline should be short, visually clear, and not require opening separate posts. Each event will have a title, a date or stage label, an icon, a short text, and, if needed, a link to a more detailed page.

Preparation

Create a test page or a draft of the current page. Enable Themify Builder, add a new row, and decide where the block should go: after the intro text, before testimonials, next to the team section, or before the contact section. Prepare the event copy in advance so you are not writing it directly in the interface as you go.

For each event, prepare a short data set:

  • Title: no longer than one line, for example "Launched Our First Service."
  • Date: a year, a stage label, or a short marker such as "Launch" or "Stage 2."
  • Icon: a symbol that helps distinguish the event by meaning.
  • Image: an optional image, only if it adds context.
  • Text Editor: 1 to 2 short paragraphs without heavy tables or complex embeds.
  • Link: a case study, news item, or section page, if the visitor truly has somewhere useful to go next.

Setup Steps

  1. Open the page in Themify Builder and add the Timeline module from the Addons section.
  2. In the Module Title field, enter a short block name or leave it empty if the section heading already appears above.
  3. Choose Timeline Layout as timeline graph if there are only a few events and the visual sequence matters.
  4. Switch to manual text mode and add the event rows in the required order.
  5. For each event, fill in title, date, icon, icon color, image, and text editor.
  6. Save the module, then save the Builder page.
  7. Open the live page in a new tab and verify that the events read top to bottom in the correct order.

Reviewing the Result

Check the meaning before the beauty. The reader should understand why the events appear in that exact sequence. If the order can be rearranged without changing the story, the narrative is still weak. Add cause-and-effect logic to the text: "after launching the service, the team expanded support," "after the first case studies, a new format appeared," "after the site update, it became easier to choose the right solution."

Then review the visual side. On desktop, the text blocks should not be too wide, and there should not be random empty gaps. On mobile, the dates, icons, and text should not overlap. If images take up too much space, reduce the image size or temporarily hide them. If the text blocks are too long, cut them down to the core point and add a link to a detailed page.

A Detail People Often Miss

A manual timeline can easily turn into an "achievement poster" where every event sounds equally grand. That gets old quickly. It is better to write events as useful milestones: what changed for the customer, the user, the team, or the product. Then Timeline becomes part of a helpful reference page, not just a decorative section.

How to Use Posts Mode for Publications and Updates

Posts mode is useful when the timeline should update along with the content. For example, the site may have a category called "Product Updates," and each new release is published as a post. Themify Timeline can display those posts in chronological form, and the editor does not have to reopen the module and add a new row manually every time.

This approach requires content discipline. Each post should have a clear title, publication date, category, featured image if needed, and excerpt. If one author writes a long excerpt, another leaves it empty, and a third forgets the image, the timeline will look uneven. That is why it helps to define an editorial standard before launching posts mode.

Example of an Editorial Standard

  • Use a single timeline category, for example "Project History" or "Updates."
  • The post title should answer "what happened," not just contain a date.
  • The excerpt should be 1 to 2 sentences and explain the outcome of the event.
  • Use a featured image only when there is a relevant illustration, not a random stock image.
  • The publication date should match the logic of the timeline, or the editor should set the intended order manually through the available parameters.

After that, choose the category in Timeline and set the limit and order. For a history that runs from old to new, use ascending if your version of the interface offers that option. For updates where the newest content matters most, use descending. If you are thinking about random order, ask whether that contradicts the whole point of a timeline: random can work for a showcase, but it rarely works for chronology.

When Not to Use Posts Mode

Do not use posts mode just because it is automatic. If the category has very little content, the dates are only approximate, and each event needs to be written specifically for the page, manual mode will be more accurate. Posts mode is strong when the posts already serve as the primary source of truth, and Timeline only changes the way they are displayed.

Also be careful with full content output. A complete post inside the timeline may include shortcodes, embedded blocks, images, forms, and other elements. The Timeline documentation says you can choose content, excerpts, or hidden content. But for a stable page, it is usually safer to show the excerpt and send the user to the full post through a link.

Dynamic Data, Builder Pro, and Post Type Builder

One additional capability worth understanding without overstating it is Builder Pro Dynamic. The Timeline documentation says that when Builder Pro is active, some fields may show a Dynamic toggle. It allows data to be pulled from post metadata, shortcodes, custom fields, and fields created with Post Type Builder or Advanced Custom Fields. At the same time, Themify also warns that not all fields may support Dynamic if the feature is unavailable or incompatible.

This opens up an interesting scenario: you can store events as posts or custom post types and pull in certain values dynamically. But you should not treat that as a promise that every Timeline field will automatically become dynamic. Before designing a complex structure, verify the actual fields in your own installation.

When Dynamic Data Is Truly Useful

Dynamic fields are useful when the events already exist in the database as structured entries. For example, you may have a custom post type called "Projects" or "Milestones" with a date, status, short description, and image. Post Type Builder lets you create custom post types, custom fields, taxonomies, and templates without code, while Builder Pro can use dynamic content in templates and modules. In that case, Timeline can become a visual layer for data already maintained by the editorial system.

If you only have a few events and they rarely change, dynamic fields may be overkill. Simple manual text configuration is faster, clearer for the editor, and easier to validate. Complex dynamic setup is justified when the data is reused in multiple places, updated regularly, or tied to custom fields.

How to Check Whether a Specific Field Is Supported

Open the Timeline module in Builder, activate Builder Pro if it is installed, and see whether a Dynamic toggle appears next to the field you need. Test it on a sample page to confirm that the value is actually displayed on the live site, not just visible in the editor. Then change the source field in the post and refresh the page. If the value does not update, the connection is not configured correctly or that field is not supported for dynamic output in your setup.

Do not design a complex site around an assumption. First test one Timeline item with real dynamic fields, save the page, open the front end, and verify that the data changes correctly. Only after that should you scale the pattern to the whole section.

Checking the Result: Design, Speed, SEO, and Accessibility

After configuring the timeline, it is worth running a short quality check. This is not about formal testing. It is about making sure the block actually helps the user. A timeline often looks "impressive" in the editor, but on the published page it may end up too long, too dense, or hard to read on mobile.

Design Check

Open the page without Builder enabled and go through it like a regular visitor. Is the timeline logic clear without extra explanation? Do the dates work with the headings rather than against them? Do the images help explain the event? Do the icons feel intentional rather than random? If the answer is no, go back to the content, not just the colors.

Also review the neighboring sections. The timeline should not repeat a "Latest Posts" block directly above or below it. If it is showing the same content, change the category, limit, or offset, or remove one of the blocks. Repeating the same posts reduces trust and makes the page feel padded.

Speed Check

Timeline itself should not become the main reason a page is slow, but a large number of images, complex animations, Builder background effects, and heavy neighboring modules can collectively affect loading performance. Reduce the number of events if the block becomes too large. Use prepared images instead of full-size originals when they are not necessary. Do not add animation to every item just for the sake of motion.

The Themify Builder changelog includes fixes related to lazy load, optimization conflicts, animations, Slider/Gallery, and cache. That does not mean Timeline will automatically cause a problem. But it is a good reason to recheck the page after updating Builder, caching plugins, and the theme, especially when the page uses several dynamic modules.

SEO and Structure Check

The timeline should support the page content, not replace it. Do not hide all important information inside a visual module if the page is supposed to rank for a detailed guide, company history, or service. Keep normal text paragraphs, clear headings, and links to full materials nearby. In posts mode, pay attention to the excerpt: it should be unique and useful, not a random first sentence from the post.

If each item links to a separate post, the links should feel expected. Do not make the headline clickable if the destination page does not add value. In manual text mode, fill in the link field only when there is a real continuation: a case study, release note, archive, detailed article, service page, or document.

Accessibility Check

Check text contrast, font size, date readability, and whether the images communicate meaning. In the WordPress Media Library, you can define alt text for images, and a featured image should help explain the post. If an image is decorative, do not overload it with text. If it explains the event, the alt text should briefly describe the meaning rather than repeat the file name.

Do not rely on color and icon alone. A user should understand the stage from the heading and text. If a red icon means a problem and a green one means success, add a text explanation. That helps both users with color-vision limitations and people who scan the page quickly.

Safe CSS Adjustments for a Cleaner Look

If the standard Builder settings are enough, there is no need to add code. But sometimes it helps to fine-tune the timeline so it sits more neatly on the page: reduce the gap between the heading and the cards, soften the images, or bring event headings into a more consistent style. Do this through Page Custom CSS in Themify Builder or through the theme's additional CSS, but do not edit plugin or theme files directly.

The safest approach is to assign your own CSS class to the row or module and write rules only inside that scope. Builder documentation includes a CSS Class field in row options and Page Custom CSS in the Builder panel. That way, the adjustment does not affect every timeline on the site.

Small Snippet for Gentle Visual Tweaks

First, add the class brand-history-timeline to the row or module. Then paste the CSS into the place where your site stores custom CSS for the page or theme.

.brand-history-timeline {
  --timeline-accent: #d97706;
}

.brand-history-timeline h3 {
  letter-spacing: 0;
  line-height: 1.25;
}

.brand-history-timeline img {
  border-radius: 10px;
}

.brand-history-timeline a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

This snippet does not use internal Themify Timeline classes and does not depend on a specific module version. It only applies inside the selected row or module and adjusts common elements: headings, images, and links. After adding it, check both desktop and mobile. If you do not like the result, remove the CSS and the brand-history-timeline class. That is a complete rollback without modifying plugin files.

Do not add complex JavaScript just to animate the timeline if Builder settings already solve the problem. Any extra script makes post-update validation harder, can conflict with optimization, and is rarely necessary for a simple chronological block.

Common Issues and Troubleshooting

Problems with Themify Timeline usually do not live in one place. They tend to appear somewhere in the chain: is the addon installed, is Builder active, is the source selected correctly, is there actual content, is the page showing fresh settings, and are cache, theme, or another plugin getting in the way? That is why you should troubleshoot from simple to complex.

Themify Timeline troubleshooting: module not visible, no posts, incorrect order, images not displaying
Troubleshooting goes faster when you separate the symptom, likely cause, check, fix, and retest.

Timeline Does Not Appear in the Modules Panel

Symptom: the addon is activated, but the Timeline module is missing from the Addons section in Themify Builder.

First, check the dependency: is Themify Builder active? If you are using a Themify theme, Builder may be included with the theme, but you still need to open it through the Builder interface on the page. If the site uses a third-party theme, make sure the standalone Themify Builder plugin is installed. Then refresh the editor page and verify that you are not looking at an old cached interface.

If the module still does not appear after refreshing, check the Plugins page: is the addon itself active, is there an installation error message, and was a ZIP archive uploaded rather than an extracted folder? If you suspect a corrupted installation, use the standard WordPress reinstall workflow, but create a backup first and make sure you still have the original archive.

The Timeline Is Empty in Posts Mode

Symptom: the module is visible, but there are no events, or fewer posts appear than expected.

Check the category, limit, and offset. The most common cause is selecting a category with no published posts, or using an offset that skips all available posts. Then check the post status: drafts and private content may not be visible to regular visitors. If you are using a custom post type or a dynamic setup, verify that the selected source is supported in that module and that the posts are available on the front end.

The fix is straightforward: choose a category with published content, set a small offset temporarily or remove it, set the limit higher than the number of test posts, and save the page. After verifying the result, return the settings to the intended values.

The Event Order Looks Wrong

Symptom: newer posts appear at the top when you need a history from old to new, or manual events do not line up in the expected order.

In posts mode, check Order By and Order. A history usually needs date and ascending. A news block often needs descending instead. If your version of the interface offers several order-by options, choose the one that matches the page logic rather than simply selecting the first item in the list.

In manual mode, check the order of the rows inside the module. If the dates are written as text labels, the module does not have to interpret them as a calendar. It outputs the rows in the sequence you set. That is why manual events should be arranged in their final order right away.

Images Do Not Display or Look Uneven

Symptom: some events have no images, or the images look stretched, too large, or too small.

In posts mode, verify that each post has a featured image and that Hide Featured Image is not enabled. In manual text mode, check whether the image field is filled in for the specific event. If images exist but still look poor, they probably use inconsistent aspect ratios or an unsuitable image size has been selected.

Fix it by preparing images with a consistent visual logic, choosing an appropriate size in the module settings, and checking how the block looks on mobile. If the images do not add meaning, it is better to hide them than leave visual noise in place.

Changes Are Saved but Not Visible on the Site

Symptom: the changes appear in Builder, but the live page still shows the old version.

Check whether you saved not just the module settings, but the full Builder page. Then clear the site cache, browser cache, and, if CSS/JS optimization is enabled, regenerate the compiled files. The Builder changelog includes fixes related to generated CSS, lazy load, and cache, so after updates to Builder or optimization plugins, it is always worth checking the page in a normal viewing mode.

If the issue started after updating a plugin, theme, or cache system, temporarily disable aggressive optimization for testing and review the page again. If the correct result comes back, the optimization settings need adjustment, not the timeline itself.

The Page Breaks After Installation or Update

Symptom: after installation or update, the site shows a critical error, the admin panel is unavailable, or Builder will not open.

At that point, this is no longer just a Timeline setup issue, but general WordPress plugin troubleshooting. In its crash recovery documentation, Themify recommends using FTP or a file manager when the admin panel is inaccessible and renaming the conflicting plugin's folder inside wp-content/plugins so WordPress deactivates it. That step should be taken only if you understand which plugin caused the error and you have access to the site files.

If you are not sure, do not start deleting or renaming folders blindly. Record the error message, review the most recent changes, and contact your hosting provider or developer. On a live site, the safer path is to restore access first, then reproduce the conflict on a copy, and only after that try the update again.

FAQ About Themify Timeline

Do I need to install Themify Builder separately?

Yes, if the site is not running a Themify theme that already includes Builder. The official documentation says Builder Addons require Themify Builder and can work either with a Themify theme or with the standalone Builder plugin. Without that dependency, Timeline will not function as a regular standalone WordPress block.

Can I use the module only for manual events without WordPress posts?

Yes. In text mode, you can manually add events with title, link, icon, icon color, date, image, and text editor. This is a good option for a history page, service stages, or a roadmap where the events should not exist as separate posts.

Which is better: timeline graph or list view?

Timeline graph is better for a short visual story with a limited number of events. List view is more practical for a denser list of posts where scanning speed matters. The choice depends on the number of events, text length, whether images are present, and how readable the layout remains on mobile.

Why are the wrong posts showing in posts mode?

The reason is usually the category, limit, offset, order by, or order settings. Check whether the correct category is selected, whether it contains published posts, whether they are being skipped by the offset, and whether the order matches the logic of the page.

Can I display custom fields in Timeline?

The Timeline documentation says that when Builder Pro is active, a Dynamic toggle may appear on certain fields, working with post metadata, shortcodes, custom fields, Post Type Builder, and Advanced Custom Fields. But Themify also warns that not all fields support Dynamic. That is why you should test the specific field on a sample page.

Can I add custom CSS adjustments?

Yes, but it is safer to do that through your own CSS class on the row or module and Page Custom CSS, rather than by editing plugin files. That way, the change can be disabled quickly and it will not affect other blocks across the site.

Is there a specific YouTube tutorial for Themify Timeline?

At the time this guide was prepared, no precise and genuinely useful video focused specifically on Themify Timeline was found. That is why no YouTube embed was added to the article. For learning, it is better to rely on the official Timeline documentation, the demo layout from the addon's ZIP archive, and a test page in Builder.

Is Themify Timeline suitable for a large archive of events?

For a small to medium showcase block, yes. For a large archive with hundreds of events, filters, categories, and separate navigation, it is better to evaluate a specialized timeline plugin or a dedicated content structure. Themify Timeline works best as a page module, not as a full event database.

When Themify Timeline Is the Right Choice

Themify Timeline is worth using when you need a clear chronological block inside a page built with Themify Builder. It works especially well for company history, product roadmaps, service stages, update roundups, learning flows, and category-based post showcases. Its advantage is the familiar Builder workflow: add the module, choose the source, configure the order, refine the appearance, and verify the result on the page.

Before publishing, verify four things: Builder is active, the content source was chosen intentionally, the events form a clear story, and the mobile view is easy to read. If those conditions are met, you can move on to practical testing and get the Themify Timeline file to install it on your WordPress site.

If the site does not use Themify Builder, the editors work only in the block editor, or you need a large standalone event archive, it is better to compare alternatives before implementation. A good timeline is not the flashiest visual block. It is the one that helps visitors quickly understand the order of events, see how the stages connect, and move to the information they need next.

By OceanTheme.org Editorial Team

 

You are not logged in to post comments.