RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

Create a Modal Popup Timeline With WordPress Shortcode or PHP

Create a Modal Popup Timeline With WordPress Shortcode or PHP

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

Read More


  Actresses win Oscars

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

Read More


  'He chased me'

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

Read More


  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


  '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:

$data = array(
    '1989' => array(
      'title' => 'Title in here',
      'excerpt' => 'Excerpt in here',
      'text' => 'The full text (for modal popup) in here.',
      'thumbnail' => 'Optional Thumbnail URL (60x60 pixels)',
      'permalink' => 'Optional permalink URL. If set, we create a link to another page from the modal popup.',
      'class' => 'right'),
    '1992' => array(
      'title' => 'Another title in here',
      'excerpt' => 'Excerpt in here',
      'text' => 'The full text (for modal popup) in here.',
      'thumbnail' => 'Optional Thumbnail URL (60x60 pixels)',
      'permalink' => 'Optional permalink URL. If set, we create a link to another page from the modal popup.',
      'class' => 'left'),

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.


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


Thickness of the vertical ruler.


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


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


The background color of the right container.


Font color of the right container.


Background color of the left container.


Font color of the left container.


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


Title: Modal Popup Timeline in WordPress (Shortcode)
Description: Create a modal popup timeline With WordPress shortcode or PHP.
  Download • Version 0.1, 3.0K, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  E. Australia Standard Time [ UTC+10, Default ] [ CHECK TO CHANGE ]

  Want to have a chat?


Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment