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

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

Plugin Directory

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:

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?.