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
“.
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.
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.
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?.
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!
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
above code I have included in timeline_express_container.php but reflecting.
not working link.
Hi @ subbaramireddy,
Have you copied over the template from the plugins /templates/ directory into your theme before adding the code? If you would like some assistance, feel free to email us via the contact form here on the site, found at https://www.wp-timelineexpress.com/contact/
Hello!
How do I change the size of the Title text?
Thanks!
Tommy
yes, I have copied from templates directory but not working link.
please assist me where is my mistake.