Display multiple animated counters into your WordPress site.

Roel Magdaleno

<p>Display multiple animated counters into your WordPress site.</p>
<h3>Gutenberg</h3>
<p>The plugin is compatible with Gutenberg, so you can add the custom block called <em><strong>CountUp</strong></em> to your posts and pages. <a href="https://github.com/roelmagdaleno/wp-countup-js/wiki/Gutenberg-Block" rel="nofollow ugc">Check the wiki for more details</a>.</p>
<h3>Shortcode</h3>
<p>It’s very easy to use this plugin, you can use the shortcode after install it, but there are two ways to use the plugin:</p>
<p>The first way is:</p>
<pre><code>[countup start="your-value" end="your-value" decimals="your-value" duration="your-value"]
</code></pre>
<p>The second way. To use this format you need to check the <strong><em>Use the end number inside the shortcode?</em></strong> setting in the plugin option page:</p>
<pre><code>[countup start="the-start-number" decimals="your-value" duration="your-value"]the-end-number[/countup]
</code></pre>
<h3>Example</h3>
<p>You can use the shortcode in two ways, as mentioned before. If you are using the first way:</p>
<pre><code>[countup start="0" end="55" decimals="2" duration="5" prefix="my_prefix" scroll="false"]
</code></pre>
<p>If you are using the second way (remember to check the <strong><em>Use the end number inside the shortcode?</em></strong>):</p>
<pre><code>[countup start="0" decimals="2" duration="5"]55[/countup]
</code></pre>
<p>Copy and paste any example in one of your posts and test.</p>
<h3>Available Attributes</h3>
<p>The shortcode and Gutenberg block accepts the next arguments:</p>
<ul>
<li>decimals – Puts the desired decimals into your counter.</li>
<li>delay – Set a delay in milliseconds to start the counter.</li>
<li>duration – The counter duration represented by a number (seconds).</li>
<li>easing – Easing the counter.</li>
<li>end – A number to end (arrive) the counter.</li>
<li>grouping – Groups the content into sections (eg. 1,000 vs 1000).</li>
<li>prefix – A text as counter prefix.</li>
<li>reset – Reset the counter after view.</li>
<li>scroll – If true, start the counter when the user visualize it.</li>
<li>separator – You can use a separator (default is comma).</li>
<li>start – A number to start the counter.</li>
<li>suffix – A text as counter suffix.</li>
</ul>
<h3>Settings</h3>
<p>You know how to use the plugin now, but you can still edit some options inside of the plugin settings page (Go to <em><strong>Settings->CountUP.js</strong></em>).</p>
<p>Inside of the settings page, you can find the next settings:</p>
<ul>
<li>Easing: Easing the counter.</li>
<li>Grouping: Groups the content into sections (eg. 1,000 vs 1000).</li>
<li>Separator: You can use a separator (default is comma).</li>
<li>Decimal: Symbol to use for decimal spot (default is dot).</li>
<li>Prefix: Character(s) at beginning of string.</li>
<li>Suffix: Character(s) at the end of string.</li>
</ul>


Alternatives to WP CountUP JS

Top alternatives