JavaScript Radial Counter Library and WordPress

As a follow up to the post I wrote about my HTML5/JavaScript Radial Counter Library, I want to talk about how I am utilizing the library in my current theme. In order to make the library easily reusable throughout the site, I made a shortcode specifically for the counters. More accurately, I made a shortcode for the counters, and a shortcode to wrap the counters. The wrapping shortcode is particularly useful for ensuring that the positioning and styling of the counters works on both desktop and mobile.

The ft_counter Shortcode

The individual counter shortcodes provide access to all the important options provided by the counter library, in addition to labeling the counters. For example:

[ft_counter stroke_width=15 stroke_color=#fde244 radius=70 year_text=80 year_suffix=% final_angle=288]JavaScript[/ft_counter]

Which, as you might expect, outputs the following:

2 yrs
JavaScript

Labels are not a part of the library itself. Rather, that is specific to the ft_counter shortcode. The inner content of the shortcode is used for the counter’s label. This allows me to give the counters context, since I primarily use the counters to keep track of the time spent working with various technologies.

An interesting side note is that a recent update to WordPress modified the core shortcode functionality, so that quotations within the shortcode parameters break. That means that strings with spaces can’t be passed into any of the shortcodes! While working on a separate shortcode, I got around this issue by using asterisks to break up words. It’s a little annoying, but not a huge deal for what I need the shortcode to accomplish.

The ft_counter_block Shortcode

I played around with several ideas while trying to determine how to best group the counter blocks. One of the ideas I had was writing a script to automatically group all the counters on the page into one div, on each page load. Obviously, that wasn’t a terrific idea. That would defeat the purpose of making a shortcode that could be used anywhere on a page! I settled on creating the ft_counter_block shortcode to wrap the individual ft_counter shortcodes. It doesn’t require anything other than content between the shortcode tags.

So, using the shortcodes together looks like the following in the back-end (with indentation for readability):

[ft_counter_block]
	[ft_counter stroke_width=15 stroke_color=#fde244 radius=70 year_text=80
			year_suffix=% final_angle=288]
		JavaScript
	[/ft_counter]
	[ft_counter stroke_width=15 stroke_color=#e9491d radius=70 year_text=20
			year_suffix=% initial_angle=288 final_angle=360]
		HTML5
	[/ft_counter]
	[ft_counter stroke_width=15 stroke_color=#21759b radius=70 year_text=100
			year_suffix=% final_angle=360]
		Awesomeness
	[/ft_counter]
[/ft_counter_block]

And renders like so, on the front-end:

2 yrs
JavaScript
2 yrs
HTML5
2 yrs
Awesomeness

And that’s it! It’s a simple way to integrate my radial counter library and WordPress.