Note: Customizing the announcement container requires Timeline Express version 1.2 or later be installed.

Customizing the Timeline Express announcement container on the timeline is easy. Included in the plugin root, are three template files which allow you to customize 99% of Timeline Express.

How To

In this tutorial, I am going to be using the default WordPress theme TwentySixteen, but this will work with any theme that you currently have installed.

To begin, you’ll want to create a directory inside of your theme (or child theme) called “timeline-express“.

Example
Create a 'timeline-express' directory in your theme root.

Once you’ve created the “timeline-express” directory in your theme root, you’ll want to copy over the template file, named timeline-express-container.php, from the Timeline Express plugin root directory (/wp-content/plugins/timeline-express/templates/) into the newly created “timeline-express” directory in your theme root.

Example
Timeline Express Announcement Container Template (plugin root)
Plugin Directory

Copy over "timeline-express-container.php" into the new "timeline-express" directory in your theme root.
Theme Directory

Once you’ve copied over the template file, you can now start customizing it as needed. Any modifications you want to make to the announcement container will be done in this file, and will override anything found in the plugin files.

 

Adding Content to the Container

Let’s make a quick modification to the announcement containers as they appear on the timeline. In this example we’ll make a quick modification, and wrap the announcement title in an anchor tag, so your users can click on the announcement titles, instead of having to click the icon or the ‘read more’ link.

Open up timeline-express-container.php in the text editor of your choice. Scroll down to lines 39-40, where you’ll find the following bit of code:

 <h2 class="cd-timeline-item-title">
    <?php the_title(); ?>
 </h2>

If you’re familiar with editing WordPress templates, this should look familiar – and you should have no problems flexing Timeline Express to your needs. If you’re not don’t worry, we’ll continue below.

Next, we’ll simply wrap the code<?php the_title(); ?> in an anchor tag <a></a>.

You can alter the code on lines 39-40, to the following:

 <h2 class="cd-timeline-item-title">
   <a href="<?php echo esc_url( get_the_permalink( $post->ID ) ); ?>">
     <?php the_title(); ?>
   </a>
 </h2>

When your done making the alterations above, go ahead and save the template file. Now reload the timeline on the frontend of the site, and you should now be able to click on your announcement titles to lead you into the single announcement template.

Example:
Timeline Express Announcement Container Title Link

If you’d like to customize the single announcement template, displayed after you click an announcement on the timeline – take a look at the follow article: How do I customize the single announcement template?.

6 Comments

  1. Hey there, thanks so much for the awesome article!

    There is one thing you should know.

    The last bit of code you provided to make the time-line-item title clickable has an unnecessary ‘ that was appending it to the post URL and creating 404 pages for all timeline announcements.

    Here’s what the code should be to make the headline clickable. Please tell me if I’m wrong but I thought I would let you know.

    <a href="ID ) ); ?> “>

    Thanks again!

    Reply
    • Hi Adam,

      Thanks for catching that! I’ve gone ahead and updating the documentation to reflect that, so others don’t run into similar issues.

      Thanks again!
      Evan

      Reply
  2. above code I have included in timeline_express_container.php but reflecting.

    not working link.

    Reply
  3. Hello!
    How do I change the size of the Title text?
    Thanks!
    Tommy

    Reply
  4. yes, I have copied from templates directory but not working link.

    please assist me where is my mistake.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.