and like us on FB

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.

  1989

  Employee Speaks Out

In 1990, Weinstein settles with a young assistant from Miramax's London office, according to the...

Read More

  1992

  Actresses win Oscars

Miramax follows 1992's best-picture nominee 'The Crying Game' with another, 'The Piano.' It wins...

Read More

  1993

  'He chased me'

Weinstein allegedly convinces actress Katherine Kendall, 23, to stop by his apartment after a...

Read More

  1994

  Two cult classics

Two cult classics Miramax releases two cult classics, Kevin Smith's 'Clerks' and Quentin Tarantino's Oscar-nominated 'Pulp Fiction.'

Read More

  1996

  'Good Will Hunting'

'Good Will Hunting' 'Good Will Hunting' is released and goes on to win two Oscars. Ben Affleck, accepting the best...

Read More

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

The image_size is the size of the thumbnail. Defaults to 60 square pixels.

ruler

Thickness of the vertical ruler.

titlesize

Size of the title. Defaults to 1.0em (normal).

responsive

The width at which to switch to a responsive design. We use 600 pixels by default.

background_right

The background color of the right container.

fontcolor_right

Font color of the right container.

background_left

Background color of the left container.

fontcolor_left

Font color of the left container.

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.

Download

Title: Modal Popup Timeline in WordPress
Description: Create a modal popup timeline With WordPress shortcode or PHP.
Download: Shortcode (V0.1) | | Plugin Page

Shortt URL for this post: http://shor.tt/14E3