Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

Create a Basic Timeline With WordPress Shortcode

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

   9th May 2021

.. We've always provided a facility to set a schedule of profiles based on national or important events, such as Anzac Day, Australia Day, Christmas, or various company events. This article introduces the enhanced functionality we've built into which is more…

   5th May 2021

.. Adding video chapters to a video on your website is a guaranteed method to improve upon your views and engagement. Many of our own videos are hours in length, so incorporating clickable chapter links enables a user to jump ahead…

   30th April 2021

.. As introduced in our article, "", we introduce why there's no greater asset to your and funnel experience than the of and . In a world where we want people to 'know us and like us', video provides the perfect…

   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…

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:

   9th May 2021

.. We've always provided a facility to set a schedule of profiles based on national or important events, such as Anzac Day, Australia Day, Christmas, or various company events. This article introduces the enhanced functionality we've built into which is more…

   5th May 2021

.. Adding video chapters to a video on your website is a guaranteed method to improve upon your views and engagement. Many of our own videos are hours in length, so incorporating clickable chapter links enables a user to jump ahead…

   30th April 2021

.. As introduced in our article, "", we introduce why there's no greater asset to your and funnel experience than the of and . In a world where we want people to 'know us and like us', video provides the perfect…

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.

1
<?php 
2
/*
3
 Create a Basic Timeline With WordPress Shortcode
4
 http://www.beliefmedia.com/basic-timeline-wordpress
5
 Requires Simple Cache: http://www.beliefmedia.com/simple-php-cache
6
*/
7
 
8
function beliefmedia_basic_timeline($atts) {
9
 
10
  $atts = shortcode_atts(array(
11
    'tags' => '',
12
    'descending' => 1,
13
    'posttype' => 'post',
14
    'image_size' => '60',
15
    'alternate' => 1,
16
    'ruler' => '5',
17
    'titlesize' => '1.2em',
18
 
19
    'number' => '-1',
20
    'date' => 1,
21
    'format' => 'jS F Y',
22
    'description' => 1,
23
    'words' => '40',
24
    'remove' => 'Tweet  and like us on FB',
25
    'responsive' => '600',
26
 
27
    /* Timeline colors */
28
    'background' => '608350',
29
    'vertical' => '000000',
30
    'dot' => '608350',
31
    'textcolor' => 'ffffff',
32
 
33
    'cache' => 3600
34
  ), $atts);
35
 
36
  /* Check Simple Cache Installed */
37
  if (!function_exists(beliefmedia_get_transient)) return 'Install Simple Cache <a href="http://www.beliefmedia.com/simple-php-cache">here</a>';
38
 
39
  /* Transient */
40
  $transient = 'bmphp' . md5(serialize($atts));
41
  $cachedposts = beliefmedia_get_transient($transient, $atts['cache']);
42
 
43
  if ($cachedposts !== false) {
44
    return $cachedposts;
45
 
46
  } else {
47
 
48
    /* Full width if we don't alternate rows */
49
    $width = ($atts['alternate']) ? '50%' : '100%';
50
    if (!$atts['alternate']) $atts['ruler'] = '0';
51
 
52
    $style = '
53
<style>
54
      * {
55
        box-sizing: border-box;
56
      }
57
 
58
      /* Timeline (vertical ruler) */
59
      .bm-timeline-' . $transient . ' {
60
        position: relative;
61
        max-width: 1200px;
62
        margin: 0 auto;
63
      }
64
 
65
      /* Timeline (vertical ruler) */
66
      .bm-timeline-' . $transient . '::after {
67
        content: "";
68
        position: absolute;
69
        width: ' . abs($atts['ruler']) . 'px;
70
        background-color: #' . ltrim($atts['background'], '#') . ';
71
        top: 0;
72
        bottom: 0;
73
        left: 50%;
74
        margin-left: -3px;
75
      }
76
 
77
      /* Content Container */
78
      .bm-container-' . $transient . ' {
79
        padding: 10px 40px;
80
        position: relative;
81
        background-color: inherit;
82
        width: ' . $width . ';
83
      }
84
 
85
      /* Timeline circles */
86
      .bm-container-' . $transient . '::after {
87
        content: \'\';
88
        position: absolute;
89
        width: 25px;
90
        height: 25px;
91
        right: -17px;
92
        background-color: #' . ltrim($atts['vertical'], '#') . ';
93
        border: 4px solid #' . ltrim($atts['dot'], '#') . ';
94
        top: 15px;
95
        border-radius: 50%;
96
        z-index: 1;
97
      }
98
 
99
      /* Place the container to the left */
100
      .bm-title-' . $transient . ' {
101
        font-size: ' . rtrim($atts['titlesize'], 'em') . 'em;
102
        font-weight: bold;
103
        padding-bottom: 8px;
104
      }
105
 
106
      /* Place the container to the left */
107
      .bm-left-' . $transient . ' {
108
        left: 0;
109
      }
110
 
111
      /* Place the container to the right */
112
      .bm-right-' . $transient . ' {
113
        left: 50%;
114
      }
115
 
116
      /* Add arrows to the left container (pointing right) */
117
      .bm-left-' . $transient . '::before {
118
        content: " ";
119
        height: 0;
120
        position: absolute;
121
        top: 22px;
122
        width: 0;
123
        z-index: 1;
124
        right: 30px;
125
        border: medium solid #' . ltrim($atts['background'], '#') . ';
126
        border-width: 10px 0 10px 10px;
127
        border-color: transparent transparent transparent #' . ltrim($atts['background'], '#') . ';
128
      }
129
 
130
      /* Add arrows to the right container (pointing left) */
131
      .bm-right-' . $transient . '::before {
132
        content: " ";
133
        height: 0;
134
        position: absolute;
135
        top: 22px;
136
        width: 0;
137
        z-index: 1;
138
        left: 30px;
139
        border: medium solid #' . ltrim($atts['background'], '#') . ';
140
        border-width: 10px 10px 10px 0;
141
        border-color: transparent #' . ltrim($atts['background'], '#') . ' transparent transparent;
142
      }
143
 
144
      /* Fix the circle for containers on the right side */
145
      .bm-right-' . $transient . '::after {
146
        left: -16px;
147
      }
148
 
149
      /* The actual content */
150
      .bm-timeline-content-' . $transient . ' {
151
        padding: 20px 30px;
152
        background-color: #' . ltrim($atts['background'], '#') . ';
153
        position: relative;
154
        border-radius: 6px;
155
        color: #' . ltrim($atts['textcolor'], '#') . ';
156
      }
157
 
158
      .bm-timeline-arrow-right-' . $transient . ' {
159
        width: 0;
160
        height: 0;
161
        width: 20px;
162
        display:inline-block;
163
        border-top: 10px solid transparent;
164
        border-bottom: 10px solid transparent;
165
        border-left: 10px solid black;
166
      }
167
 
168
      /* Media queries < {responsive}px wide */
169
      @media all and (max-width: ' . rtrim($atts['responsive'], 'px') . 'px) {
170
 
171
        /* Place the timelime to the left */
172
        .bm-timeline-' . $transient . '::after {
173
          left: 31px;
174
        }
175
  
176
        /* Full-width containers */
177
        .bm-container-' . $transient . ' {
178
          width: 100%;
179
          padding-left: 70px;
180
          padding-right: 25px;
181
        }
182
  
183
        /* Make sure that all arrows are pointing leftwards */
184
        .bm-container-' . $transient . '::before {
185
          left: 60px;
186
          border: medium solid white;
187
          border-width: 10px 10px 10px 0;
188
          border-color: transparent #' . ltrim($atts['background'], '#') . ' transparent transparent;
189
        }
190
 
191
        /* Make sure all circles are at the same spot */
192
        .bm-left-' . $transient . '::after, .bm-right-' . $transient . '::after {
193
          left: 15px;
194
        }
195
  
196
        /* Make all right containers behave like the left ones */
197
        .bm-right-' . $transient . ' {
198
          left: 0%;
199
        }
200
    }
201
    </style>
202
 
203
';
204
 
205
    /* QP_query */
206
    $args = array(
207
      'post_type' => $atts['posttype'],
208
      'post_status' => 'publish',
209
      'orderby' => $atts['orderby'],
210
      'order' => $atts['descending'] ? 'desc' : 'asc',
211
    );
212
 
213
    /* Primary search parameter */
214
    $args['tag'] = $atts['tags'];
215
 
216
    /* Limit number of posts? */
217
    $args['posts_per_page'] = $atts['number'];
218
 
219
    /* Query */
220
    $pages = new WP_query($args);
221
 
222
    if ($pages->have_posts()) :
223
 
224
       /* Save each result into array for rows */
225
       $i = 0;
226
 
227
       while ($pages->have_posts()) : $pages->the_post();
228
 
229
         $permalink = get_permalink();
230
         $title = get_the_title();
231
         $title = wp_trim_words($title, $num_words = $atts['title_length'], $more = '..');
232
 
233
         /* By default your WP time format is used */
234
         $date = ($atts['date']) ? get_the_date($format = $atts['format']) : $title;
235
 
236
         /* Post thumbnail. Uses a default if an image isn't set */
237
         $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
238
         $thumbnail = (!empty($thumbnail)) ? '<a href="' . $permalink . '" title="' . $title . '" alt="' . $title . '"><img loading="lazy" src="' . $thumbnail['0'] . '" alt="' . $title . '" width="' . $atts['image_size'] . '" height="' . $atts['image_size'] . '" style="float: left; padding: 7px 7px 5px 0px;" /></a>' : '';
239
 
240
         /* If displaying excerpt */
241
         if ($atts['description']) $excerpt = trim(str_replace($atts['remove'], '', strip_tags(do_shortcode(get_the_excerpt())) ));
242
         if ( ($atts['words']) && ($atts['description']) ) $excerpt = wp_trim_words($excerpt, $num_words = $atts['words'], $more = null);
243
 
244
         /* False if odd for alternating containers */
245
         $class = ($atts['alternate']) ? ($i % 2 == 0) ? 'bm-left-' . $transient : 'bm-right-' . $transient : 'bm-left-' . $transient;
246
 
247
         /* Build container */
248
         $result .= '<div class="bm-container-' . $transient . ' ' . $class . '">
249
<div class="bm-timeline-content-' . $transient . '">
250
<div class="bm-title-' . $transient . '"><i class="fa fa-calendar" aria-hidden="true"></i>   ' . $date . '</div>' . $thumbnail . ' ' . $excerpt . ' <a href="' . $permalink . '"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
251
</p></div>
252
</p></div>';
253
 
254
         $i++;
255
 
256
         endwhile;
257
 
258
    else :
259
 
260
         $result = false;
261
 
262
    endif;
263
 
264
  /* Build Style & HTML */
265
  $return = $style . '<div class="bm-timeline-' . $transient . '">' . $result . '</div>';
266
 
267
  /* Cache code to text file */
268
  beliefmedia_set_transient($transient, $return);
269
  return $return;
270
 }
271
}
272
add_shortcode('timeline', 'beliefmedia_basic_timeline');

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.
  • 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 • Version 0.1, 2.6K, 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.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433