The individual counter shortcodes provide access to all the important options provided by the counter library, in addition to labeling the counters. For example:
Which, as you might expect, outputs the following:
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.
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):
And renders like so, on the front-end:
And that’s it! It’s a simple way to integrate my radial counter library and WordPress.