This document is for advanced WordPress users and for WordPress developers that are familar with the shortcode and template tag idea. Please read the Quick Start first!

Animated Counter Plugin can be placed in your post or page content by a simple shortcode with a visual editor. The counter package comes with a shortcode generator, so there is not need of reading this document for a basic usage. Counter can also be placed with a Template Tag, so it can appear anywhere You like on your website body.

List of attributes

List of attributes that the [counter] shortcode can be used with as well as counter_display template tag.

Name Type Default value
type String int
Determines counter type, if it’s showing integer, decimal values, with separators or without or if it’s displaying date/time countdown. Type attribute can have values as follows:
int – to display integer values
int-sep – to display integer values with thousand separators
decimal – to display decimal values
decimal-sep – to display decimal values with thousand separators,
date-countdown – to display date/time countdown counter
increment Number (integer or decimal) 1
Counter is increased (for positive “increment”) or is decreased (for negative “increment”) with this value.
animationInterval Number (integer) 1000
Number of milliseconds between animations (counter value change).
animationSpeed Number (integer) 800
Number of milliseconds the animation last.
charsImageUrl String null
URL to an image that holds characters graphic representation.
characterSet DefaultCharacterSets numericUp
Character set used by the counter. It can be any of the DefaultCharacterSets listed below this table.
decimalPoints Number (integer) 2
Numer of decimal points.
decimalSeparator String .
Character used as a decimal separator. Can be anything, but most likely dot or comma should be used.
digitsNumber Number (integer) 6
Number of digits (characters) that counter is using. For example if it’s set to 6 and character set is set to numeric, it can display any number between 0 and 999999.
endValue Numeric (integer or decimal) or date null
Numeric or date value that determines when the counter should be stopped. When the endValue is reached, counter is replaced with the text or html of [counter] shortcode content, that is text between [counter] and [/counter]
direction ScrollDirection Mixed
Determines animation direction. It can be any of the ScrollDirection listed below this table.
markerImageUrl String null
URL to an image that is used as an overlay of the counter.
postfixText String (empty string)
Character that is shown to the right of the counter.
prefixText String (empty string)
Character that is shown to the left of the counter.
scrollAnimation ScrollAnimation FixedTime
Determines scroll animation type. It can be any of the ScrollAnimation listed below this table.
startDate Date/time in format “YYYY-MM-DD hh:mm:ss” (null)
If the startDate value is given, current counter value is calculated with this formula:
initialValue = startValue + increment * (((now – startDate) * 1000) / animationInterval)
See the USA GDP example.
startValue Number (integer or decimal) 0
Initial counter value.
showYears Boolean true
Determines if “years” counter should be displayed. Applies only for the date/time countdown (type=”date-countdown”).
showDays Boolean true
Determines if “days” counter should be displayed. Applies only for the date/time countdown (type=”date-countdown”).
showHours Boolean true
Determines if “hours” counter should be displayed. Applies only for the date/time countdown (type=”date-countdown”).
showMinutes Boolean true
Determines if “minutes” counter should be displayed. Applies only for the date/time countdown (type=”date-countdown”).
showSeconds Boolean true
Determines if “seconds” counter should be displayed. Applies only for the date/time countdown (type=”date-countdown”).
thousandsSeparator String ,
Character used as a thousands separator. Can be anything, but most likely dot or comma should be used.
Name Values
DefaultCharacterSets numericUp : ‘0123456789’,
numericDown : ‘9876543210’,
alphabeticUp : ‘ ABCDEFGHIJKLMNOPQRSTUVWXYZ’,
alphabeticDown : ‘ZYXWVUTSRQPONMLKJIHGFEDCBA ‘,
alphanumericUp : ‘0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ’,
alphanumericDown : ‘9876543210ZYXWVUTSRQPONMLKJIHGFEDCBA ‘,

calculator : ‘0123456789.,+-*/= ‘,
qwertyKeybord : ‘ QWERTYUIOPASDFGHJKLZXCVBNM1234567890-=[]\\;\’,./~`!@#$%^&*()_+{}|:”<>?’,
allCharacters : ‘ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-=[]\\;\’,./~`!@#$%^&*()_+{}|:”<>?’

ScrollAnimation FixedTime,
FixedSpeed,
SlotMachine
ScrollDirection Downwards,
Mixed,
Upwards

Note: If You are going to use more than one counter on a single post or page content You should always use closing shortcode.

Template Tags

Name Parameters Returned value
counter_display() Array, String optional null
Outputs counter html and JavaScript code. First parameter is a list of attributes as a key-value collection (attributes are described above). Second parameter is optional and it’s a string that the counter is replaced with when it reaches the endValue.