WP CountUP JS

Description

This plugin it’s based on Inorganik CountUp.js and Countup JS WordPress Plugin (this plugin just permit you create one countup shortcode).

With this plugin and using a shortcode, you can create a lot of animated numerical counter and display it into your site.

Usage and Options

Using this plugin is very easy, after install go to the options page (“Settings->CountUp.js”) and set the values you prefer.

If you enable “Use the end number inside the shortcode?” option you should use the shortcode like this:

[countup start=”your-value” decimals=”your-value” duration=”your-value”]end_value[/countup]

Note: You can insert inside of this shortcode another shortcode that generates any number.

In case that “Use the end number inside the shortcode?” is not checked, you should use the shortcode in this way:

[countup start=”your-value” end=”your-value” decimals=”your-value” duration=”your-value”]

The shortcode accepts those arguments, as you can see previously:

  • Start: The number that your counter starts. Default value: 0.
  • End: The number that your counter ends. Default value: 1000.
  • Decimals: How many decimals will have your counter. Default value: 0.
  • Scroll: Execute the counter when you scroll to the counter. Default value: true.
  • Easing: Easing the counter. Default value: false.
  • Grouping: Groups the content into sections (eg. 1,000 vs 1000). Default value: false.
  • Separator: You can use a separator (default is comma).
  • Decimal: Symbol to use for decimal spot (default is dot).
  • Prefix: Character(s) at beginning of string. Default value: none.
  • Suffix: Character(s) at end of string. Default value: none.

Example:

If “Use the end number inside the shortcode?” is checked:

[countup start=”0″ decimal=”.” decimals=”1″ duration=”1″ prefix=”hello” suffix=”world”]55[/countup]

If “Use the end number inside the shortcode?” is not checked:

[countup start=”0″ end=”55″ decimal=”.” decimals=”1″ duration=”1″ prefix=”hello” suffix=”world”]

Important: If you don’t use these options inside of the shortcode, the default values will be pull from CountUp.js Options Page.

Screenshots

  • Screenshot-1: Output counters on the site.
  • Screenshot-2: Shortcode example.
  • Screenshot-3: Plugin options page.
  • Screenshot-4: CountUp.js Options inside shortcode.
  • Screenshot-5: Output counters on the site with individual prefix and suffix.

Installation

  1. Install the plugin via WordPress Plugin Installer.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress.
  3. Go to “Settings”->”CountUP.js” menu to configure options of the plugin.

Reviews

Easy to use, need some features

Hi Roel,

Thanks for this plugin. Its very easy to use. However, I had a few feature requests:

  1. I want the counter to run on a decimal number. Something like 0 to 2.5 in 1 second. I tried using [countup start=”0″ end=”2.5″ decimals=”1″ scroll=”true” duration=”1″], but that ends at 25 instead of 2.5
  2. I want a suffix, but want it in a slighly smaller size than the number. So in 2.5 Lakh, Lakh needs to be in a smaller font. If I put it outside the counter div, it goes to the next line.
  3. Is it possible to have run the counter whenever someone scrolls up and down and comes to that section?

If these features are already available, pls let me know how to implement them.

Thanks!
Priyanka

Absolutely amazing plugin!

This plugin is the only one out there that allows you to use dynamic number directly from the database by using shortcode within a shortcode.

For instance [countup start=”1″ decimals=”0″ duration=”5″][users_count][/countup]

Thank you for adding this functionality. That person who gave you 4 stars needs to resubmit his review as it was his only reason for not giving you 5 stars!

I’d give you 6 stars to cover it 😉

Thanks again!

Works perfectly.

Works perfectly!
The one missing star is only because I wish I could use an ending number from outside the shortcode itself. Like…

[countup start="0" duration="3"]2,500[/countup]
Then I could stick some PHP in there and source the number dynamically from content. Love the plugin though. You have all the classes n’stuff you need to make this do pretty much anything you want and it’s simple and light. 🙂

Just What I Needed!

Finding this functionality to trigger the animation when the user scrolls to the content is tough. This works right out of the box. The newest params are so helpful. Thank you!

Read all 8 reviews

Contributors & Developers

“WP CountUP JS” is open source software. The following people have contributed to this plugin.

Contributors

Translate “WP CountUP JS” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0

  • Release

1.1

  • jQuery issue was solved.

2.0

  • Now you can add the options from CountUP.js Options Page inside of the shortcode. Please check Usage and Options for more information.

2.1

  • All counters started their animation before to reach the target counter. Now, when you scrolled to the target counter, the counter will start their animation.

2.2

  • Now you can add an option if you wanna start the counter when the page is loaded or when scroll it.

2.3

  • Bug fixed where counter at the top starts counters at bottom. Now, every counter works independently.

3.0

  • Bug fixed where some counters didn’t start after scroll into it. And it was implemented two ways to use the shortcode.

3.1

  • Bug fixed where the plugin was initializing at the same time of the other plugins, breaking them.

3.2

  • Bug fixed where shortcodes inside of the shortcode were not running.

3.3

  • Bug fixed where decimal input text shows a wrong value.
  • “Reset the counter when view again?” option was added. With this you can reset the counter if it’s out of the viewport, if you scroll to counter again it will start, again.
  • Now the prefix and suffix are surrounded by its own “” tag with “wp_cup_prefix” css class and “prefix-{id}” id css class, same with preffix, so you could edit it via CSS.