and like us on FB

A timeline is a display of a list of events in chronological order. It is typically a graphic design showing a long (normally horizontal) bar labelled with dates alongside itself with (what is usually) events. If perfect visual representation is your thing, the distance between each element on the timeline itself is graphed appropriately to represent the time between each event. Our article will show you how to build a basic timeline with WordPress shortcode.

See also: “Create a Modal Popup Timeline With WordPress Shortcode or PHP” here.

In the news and WordPress world of real-time blogging, the timeline is often used a a visual indication for each component of a series, or an ongoing or developing news story. For that reason, our timeline will render posts based on a tag … although you might just as easily obtain data from anywhere and curate it in the manner as described below. We chose WP post tags simply for the purpose of the demonstration.

The Result

While it serves virtually no purpose, we’ve chosen to display posts tagged with youtube Tag: youtube as if the series were a developing story that we were live-blogging. The result of [timeline tags="youtube"] is as follows (we’ve returned only the last 5 posts to save space):

   22nd October 2017

.. Following on from our dealing with creating a YouTube tower with the YouTube RSS feed and WordPress shortcode, this article seeks to provide guidance when building your own tower or thumbnail gallery via use of YouTube’s (version 3) API. Given…

   4th October 2017

.. This article will show you how to display YouTube thumbnail links in your WordPress website (or PHP application) by way of the video RSS feed. While another article is that’ll display the same output using the YouTube API, the RSS…

   26th August 2017

.. This article provides the necessary code to render YouTube video views, titles, descriptions, likes, dislikes, and other data into your WordPress website or PHP application with shortcode. The functions require that you register for an API key via Google’s .…

   24th July 2017

.. This is the first of a couple of a few articles that’ll deal with obtaining data from (version 3). This post will show you how to use YouTube API to render a viewcount (of total videos), subscriber count, and video…

   16th June 2017

.. The YouTube Subscribe button shortcode permits you to embed a channel subscription button into your WordPress post or page with shortcode. The button is another good argument for shortcode over code snippets provided by online tools; if the YouTube embed…

If you’re on a mobile device it’s likely you’re seeing the entire response in a single column.

If we chose not to alternate the containers, and this time changing the colors slightly, we might use [timeline tags="youtube" background="#09A3E2" alternating="0" number="3" vertical="#000000" dot="#09A3E2"]. The result:

   22nd October 2017

.. Following on from our dealing with creating a YouTube tower with the YouTube RSS feed and WordPress shortcode, this article seeks to provide guidance when building your own tower or thumbnail gallery via use of YouTube’s (version 3) API. Given…

   4th October 2017

.. This article will show you how to display YouTube thumbnail links in your WordPress website (or PHP application) by way of the video RSS feed. While another article is that’ll display the same output using the YouTube API, the RSS…

   26th August 2017

.. This article provides the necessary code to render YouTube video views, titles, descriptions, likes, dislikes, and other data into your WordPress website or PHP application with shortcode. The functions require that you register for an API key via Google’s .…

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

We use Simple Cache to cache the resulting HTML. Install via this page. You can alternatively alter our cache functions for the WP transient API.

[crayon-5a19019dde0e9121654020/]

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

While there’s a large number of attributes, most of them are of the set-and-forget variety.

tags

For the purpose of the timeline example we’ve used post tags. In our example we’ve used the youtube Tag: youtube tag.

descending

We return results in descending order (newest first). Use descending="0" to return the results in reverse chronological order.

posttype

We search the ‘post’ post type by default. Alter if required.

image_size

We retrieve the post’s 150px thumbnail and scale it down. Alter the size as required. If you choose to include a larger image, retrieve a larger image. If you’re in a position to do so, use a library to dynamically scale the thumbnail before returning it.

alternate

We’ll return alternate rows by default. To display in a list use alternate="0".

ruler

The width of the vertical ruler. 5px by default.

titlesize

The size of the post title. We use 1.2em by default.

number

The number of results to return. We use -1 which returns them all.

date & format

We include the date title by default. You can choose to alter the manner in which the date is returned via the format attribute (via PHP’s date function)

description

The description is included by default. To remove, use description="0".

words

The words is the number of words the description is truncated.

remove

If you choose to remove repetitious text before the post, include it here.

responsive

The responsive attribute determines at what viewport the timeline reverts to a mobile responsive view.

background

The background color.

vertical

The color of the vertical line and the inside of the timeline dot.

dot

The color of the timeline dot (border).

textcolor

The container text color.

cache

The time results are cached. If you’re live-blogging, this should be a low value (maybe 15 minutes)

Considerations

  • We’ve used Font Awesome for icons. If your WP theme doesn’t support FA by default, download and include from the FA website (or use HTML entities/images for the calendar and right arrow icon). Use the CloudFlare hosted version with the code below.
    [crayon-5a19019dde113479594483/]

  • We’ve used inline CSS which is far from best practice. However, it does cater for numerous occurrences of the timelines with alternate styles on the same page. If you’re using a single style, copy the CSS and code into their respective files.
  • We haven’t included the title in the response. Include the $title variable if you choose to show it.
  • The shortcode is similar to our series shortcode with the exception that we’ve limited the search parameters and styled the output.

Download

Title: Create a Basic Timeline With WordPress Shortcode
Description: Create a basic timeline with WordPress shortcode. Includes a staggered and inline option. Formatting options apply.
Download: Shortcode (V0.1) | | Plugin Page

Shortt URL for this post: http://shor.tt/1SRw