Blog, WordPress, WordPress Shortcode

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

30th January 2023

We've written a large number of YouTube shortcodes over the years, but as WordPress and YouTube have evolved, and as we've added more features to Yabber and our , some of our have become partially obsolete, and the functionality in…

4th October 2021

In previous articles we've introduced the extensive and integration made available from within , and in another series of articles we've highlighted the need for creation as part of a broader . In this article we'll build on the functionality…

20th May 2021

In a previous article we introduced a feature that will and other assets based on set-and-forget events that you have defined throughout the year. In the same article we touched on the automated changes that may be made to the…

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…

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:

30th January 2023

4th October 2021

20th May 2021

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.

<?php

Create a Basic Timeline With WordPress Shortcode

http://www.beliefmedia.com/basic-timeline-wordpress

Requires Simple Cache: http://www.beliefmedia.com/simple-php-cache

function beliefmedia_basic_timeline($atts) {

$atts = shortcode_atts(array(

'tags' => '',

'descending' => 1,

'posttype' => 'post',

'image_size' => '60',

'alternate' => 1,

'ruler' => '5',

'titlesize' => '1.2em',

'number' => '-1',

'date' => 1,

'format' => 'jS F Y',

'description' => 1,

'words' => '40',

'remove' => 'Tweet and like us on FB',

'responsive' => '600',

/* Timeline colors */

'background' => '608350',

'vertical' => '000000',

'dot' => '608350',

'textcolor' => 'ffffff',

'cache' => 3600

), $atts);

/* Check Simple Cache Installed */

if (!function_exists(beliefmedia_get_transient)) return 'Install Simple Cache <a href="http://www.beliefmedia.com/simple-php-cache">here</a>';

/* Transient */

$transient = 'bmphp' . md5(serialize($atts));

$cachedposts = beliefmedia_get_transient($transient, $atts['cache']);

if ($cachedposts !== false) {

return $cachedposts;

} else {

/* Full width if we don't alternate rows */

$width = ($atts['alternate']) ? '50%' : '100%';

if (!$atts['alternate']) $atts['ruler'] = '0';

$style = '

<style>

* {

box-sizing: border-box;

}

/* Timeline (vertical ruler) */

.bm-timeline-' . $transient . ' {

position: relative;

max-width: 1200px;

margin: 0 auto;

}

/* Timeline (vertical ruler) */

.bm-timeline-' . $transient . '::after {

content: "";

position: absolute;

width: ' . abs($atts['ruler']) . 'px;

background-color: #' . ltrim($atts['background'], '#') . ';

top: 0;

bottom: 0;

left: 50%;

margin-left: -3px;

}

/* Content Container */

.bm-container-' . $transient . ' {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: ' . $width . ';

}

/* Timeline circles */

.bm-container-' . $transient . '::after {

content: \'\';

position: absolute;

width: 25px;

height: 25px;

right: -17px;

background-color: #' . ltrim($atts['vertical'], '#') . ';

border: 4px solid #' . ltrim($atts['dot'], '#') . ';

top: 15px;

border-radius: 50%;

z-index: 1;

}

/* 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 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

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.

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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.