Update, 25th February 2018: With an update to our website we have a need to alter this code a little (we'll get to it soon). In the meantime it's likely it'll work on your website as intended.
After our last article on rendering timelines in WordPress I had a number of emails and a few comments make their way to me with an array of requests. Since I can't address them all individually (unless you're a client, of course), I decided to share a second article with a look at a couple of variations on our former theme. The advantage of this second post does mean we can share more generic code for use outside of WordPress (since it doesn't use post data).
Note: Read "Create a Basic Timeline With WordPress Shortcode" here.
One gentleman pointed me to an example timeline on the USA Today 
website (screenshot here 
) that detailed the life of Harvey Weinstein. Their timeline uses the posts on the right or left to separate Weinstein's career highlights versus his harassment incidents. We've emulated that behaviour in our own example simply for the sake of providing another feature. Not unlike the USA Today example, we've also added the modal popup feature (with the popup providing an optional link to a source or article). It's these two features that make this version notably different to our former snippet.
The Result
Note the lower two examples don't alternate. Click on each down arrow for a popup with full text (and image). If you're reading this on a mobile device the timeline will be stacked; you'll need to switch to desktop view to see the alternating containers.
Employee Speaks Out
In 1990, Weinstein settles with a young assistant from Miramax's London office, according to the...
1989
Employee Speaks Out
In 1990, Weinstein settles with a young assistant from Miramax's London office, according to the 'Times.' Then-employee Laura Madden tells the paper that Weinstein asked her for massages at hotels in Dublin and London in 1991, adding he had a way of making anyone who objected feel like an outlier. "It was so manipulative," she recalled, two decades after the original incident. "You constantly question yourself - am I the one who is the problem?" .. More
Actresses win Oscars
Miramax follows 1992's best-picture nominee 'The Crying Game' with another, 'The Piano.' It wins...
1992
Actresses win Oscars
Miramax follows 1992's best-picture nominee 'The Crying Game' with another, 'The Piano.' It wins acting Oscars for actresses Holly Hunter and Anna Paquin.
'He chased me'
Weinstein allegedly convinces actress Katherine Kendall, 23, to stop by his apartment after a...
1993
'He chased me'
Weinstein allegedly convinces actress Katherine Kendall, 23, to stop by his apartment after a screening one afternoon. Then he comes out of his bathroom in a robe, asking for a massage, she later tells the 'Times.' "Everybody does it," he tells her, according to the newspaper's account. She refuses; he leaves the room and returns nude, she says. "He literally chased me," she says in the 'Times' story. "He wouldn't let me pass him to get to the door."
Two cult classics
Miramax releases two cult classics, Kevin Smith's 'Clerks' and Quentin Tarantino's Oscar-nominated 'Pulp Fiction.'
.. 'Good Will Hunting'
'Good Will Hunting' is released and goes on to win two Oscars. Ben Affleck, accepting the best...
.. We process a lot of data so we cache the result with Simple Cache. We retrieve the cached result based on the serialized array of all values so the cache period is a little redundant; for this reason we treat the cached result as an option and only update it if there's a change.
Shortcode Usage
Our inline shortcode is enough to make most developers a little sick. It's far from best practice but it works... and it means we can share the snippet without the complexity of plugins. Rendering the CSS inline also makes it possible to have multiple timelines on the same page without CSS conflicts. Everything we share is simply so our clients have a feel for some options to consider. In such cases where we install the code, it's consistent with best practice.
In addition to the normal set-and-forget attributes (below), there's a data array that is used to generate the results. While we've used an array it's expected that you'll source the data from a database or similar. The format of the array is as follows:
Using the year for each key isn't ideal because it doesn't support duplicates. When we wrote it the exception was that we would use date and time. You may optionally include the date in the array and number the arrays numerically.
The left and right values are important. Unlike our former shortcode you will have to specifically define whether the container renders to the right or left. The intention is to provide - not unlike the USA Today example - an option to provide two types of data.
You may include images in the modal popup (example: click me). The optional thumbnail scales to 60 square pixels by default. If a thumbnail doesn't exist only text will be displayed.
Shortcode Attributes
There are a number of self explanatory attributes. The most common are listed below.
image_size
image_size is the size of the thumbnail. Defaults to 60 square pixels.ruler
ruler.titlesize
title. Defaults to 1.0em (normal).responsive
background_right
fontcolor_right
background_left
fontcolor_left
Considerations
- The modal popup code is used repeatedly in our plugins and shortcodes - most notably for YouTube popups and images (both forthcoming articles). It's also used as an effective means of providing an exit popup (if you're into that sort of thing).
- The down arrow is an image you may download here. The full sized version that we stole from USA today may be downloaded here (both included in the download below).
- We've used Font Awesome
to display the icons in the modal popup and inline containers. Download and install or link to a hosted version with some simple WP code.
