The Jellyfish Counter plugin for WordPress provides a widget and shortcode enabling you to easily add animated counters to your WordPress based website.
Counters can display as a manually updated total, an automatic counter that updates over time or just as an animated visual effect. Each counter can count upwards or downwards making them suitable for both incrementing totals or countdown situations. A great visual effect for travel blogs or any website that wants to display a running total or countdown of anything and is not limited to counting jellyfish!
New Shortcode support allows you to generate a counter directly within any post or page content making counters no longer limited to your sidebar or other widgetable area.
You’ find several of examples of the counter on this page
Either install and activate the plugin via your WordPress Admin
Download the archive from the WordPress plugin repository. Extract the zip file and just drop the contents in the wp-content/plugins/ directory of your WordPress installation and then activate the Plugin from the Plugins page.
After activation you’ll find a new Counter widget in the widgets panel of your WordPress admin, drag as many counter widgets as you need to your sidebar and other widgetable areas. Each counter widget has it’s own settings.
You can also use the [jellyfish_counter] shortcode with page or post content to display a counter within your page or post. Shortcode counters can be configured just as much as their widget counterparts. See Usage for details.
Upgrading from a previous version
Existing counters should not be effected by an upgrade but it is always good practice to backup your database and installation before performing an upgrade.
After an upgrade visit the widget admin page to check the new options available to your counters.
There have been changes in class names after version 1.0, if you have added custom counter styles to your WordPress theme you may need to make minor changes to reflect the new CSS classes applied to counter elements. If you have made any changes to the plugin files they will be lost if you upgrade.
On your WordPress widgets admin page simply drag a counter widget to your sidebar and adjust it’s settings to suit your needs.
There are three basic modes of operation:
If you want the counter to simply display a non animated number just set a Start Value to the desired number for the counter and set the Counter Type to static
If you supply both start value and end value in the widget, the counter will increment upwards or downwards depending on the chosen Counter Type until it reaches the end value. Speed of the count is controlled by the Animation Speed option. Be aware that this counter has no memory, it will reset when a page is reloaded or changed but it is great for a visual effect where start and end values are relatively close together.
If you want to count over a long period of time and need your counter to continue to count irrespective of page loads then just select the continuous option in the widget. Then choose the interval between the counter increments, in seconds. As soon as you save the widget the counter will “start” and will continue to tick away even if nobody is viewing your blog. Changing the setting on an active continuous counter will not effect the count value and it will keep count, if you wish to reset an active continuous counter just change the start value and save the widget and the counter will restart from the new starting value.
Note: In continuous mode, animation speed and display tenths have no effect.
General Options and Settings
The counters are very configurable through the widget panel. You can define the digit height, width and font as well as animation speed (animated mode only) and bustedness (odometer style misalignment of the digits).
You can further customise the appearance of an individual counter via the Digit Style input that will accept a valid CSS style attributes such as font-family, colour, background etc.
Note: the size of the font here as is automatically calculated from the height, width and padding settings.
Need a flat looking counter? Disable 3D effect removes the CSS shading effect.
If you want to display a prefix on the counter or include separating characters, use the Format input. Just enter a string here representing your desired counter appearance, a 0 represents a counter digit, any other character will be displayed as it is. The Format option overrides the number of digits option, if a format string exists then the counter will use the total number of 0 characters as the number of digits.
$0.00 1,000,000 0000 km
You can generate a counter directly within page or post content using the [jellyfish_counter] shortcode. The shortcode accepts a full range of parameters to provide identical functionality to the widget version.
The following parameters may be used within a shortcode:
digits : a number, Number of digits in the counter
format : a string, representing any fancy display format
tenths : true/false, display tenths digit or not
digit_height : number, pixel height of digits
digit_width : number, pixel width of digits
digit_padding : number, pixel padding for digits
digit_style : a string, custom css styles for the digits
alignment : ‘left’, ‘center’, ‘right’ or ‘inline’ By default a counter will appear centred on it’s own line. You can change this to left or right or use inline to make the counter appear with a line of content.
bustedness : a number, misalignment of digits
flat : true/false, don’t show 3d effect, show 3d effect
speed : a number, 0 – 100, animation speed
start : a number, starting value for the counter
end : a number, ending value for the counter
direction : a, string ‘up’ or ‘down’
interval : The number of seconds between updates of a continuous counter
tick_multiplier : The number of units to update every interval
timestamp : false or a string representing the starting time for the counter
id : by default a shortcode counter gets a unique id based on the time it is created, this means it’s id will change every time a page loads which may not be desirable if you want to use the id to identify it for styling or scripting. To give the counter a permanent id just supply a sting through the id option. The string is prepended with ‘jellyfish-counter-shortcode-‘ and so for example in your shortcode id=”mycounter” would result in the counter having an id of #jellyfish-counter-shortcode-mycounter
If you don’t specify a parameter it’s default value will be used.
The above shortcode translates as: Display a counter that animates upwards from 0 to 100
[jellyfish_counter start=999 end=123456 direction="up" digit_style="background: transparent; color: red;" flat=true; timestamp="2019-09-28 9:20:21" interval=300 ]
The above shortcode translates as: Display a counter that starts at 999, counting upwards until it reaches 123456. It has red digits on a transparent background with no 3D shading effect. It is a persistent counter that started counting at 9:20:21 on 2019-09-28 and has been incrementing by one every 300 seconds (5 minutes) since then.
[jellyfish_counter digits=8 start=1 end=99999999 interval=10 tick_multiplier=42 timestamp="2020-01-24 21:00:00"]
This shortcode sets up a continuous counter that will increase by 42 every 15 seconds.
You can modify the appearance of an individual counters text through the widget control panel or through shortcode parameters. This should be sufficient for most uses.
However, if you need to globally override the default counter style or make other CSS changes to the counter digits or container, take a look at jellyfish-counter.css for the appropriate class names. You should override this in you theme rather than modifying this css file as any changes made would be lost when the plugin upgrades..
You can download this plugin from the WordPress plugin repository