How to Add a Number Count Animation in WordPress (Elementor, Gutenberg, or JavaScript)

The easiest way to add an animated number in WordPress depends on your editor: use Elementor’s Counter widget on an Elementor page, install Counting Number Block for Gutenberg, or use CountUp.js when you need custom markup, data, or timing. In every case, keep the final number available as ordinary text and respect reduced-motion preferences.

Choose the right WordPress counter method

Elementor is the quickest choice for Elementor sites, the block plugin is the quickest Gutenberg option, and CountUp.js gives the most control when the number comes from a custom data source or application logic. That recommendation reflects the documented feature sets, not a measured performance test.

#	Preview	Product	Price
1		WordPress 3.0 jQuery	$50.99	Buy on Amazon

Method 1: Add a counter with Elementor

Elementor’s Counter widget displays a numeric value that can increase or decrease. It is the lowest-effort route because the widget supplies the animation and formatting controls.

Steps

1. Open the page with Edit with Elementor.
2. Search the widget panel for Counter and drag it into the section or container where the statistic should appear.
3. Set the starting number and ending number. Use the starting value for a partially completed statistic or set it to zero for a conventional count-up.
4. Enter the counter title, then add any prefix or suffix, such as a dollar sign, percent sign, plus sign, or unit label.
5. Choose the number separator and set the animation duration. Elementor documents duration in milliseconds, so confirm the unit shown in your installed version before entering a value.
6. Style the typography, color, spacing, and alignment, then preview the page at mobile and desktop widths.
7. Click Publish or Update.

Elementor checks before publishing

• Make sure the static value still makes sense if JavaScript has not loaded.
• Check long values, decimal separators, prefixes, and suffixes in the responsive preview.
• Do not use a rapidly changing counter as an aria-live announcement; it can create excessive announcements for screen-reader users.
• Provide a reduced-motion experience, either through the widget’s available settings or a site-wide reduced-motion rule.

Method 2: Add a counter in Gutenberg without JavaScript

For the Block Editor, install and activate the WordPress.org Counting Number Block plugin from Plugins → Add New. The plugin listing documents count-up and count-down modes, animation on entry to the viewport or once, prefixes and suffixes, number formatting, a screen-reader value, and suppression of the animated effect when reduced motion is enabled. The listing records version 1.1.0 as released June 30, 2024; verify compatibility with your current WordPress version before using it on a production site.

#1 Best Overall

WordPress 3.0 jQuery

$50.99

Buy on Amazon

Steps

1. In the WordPress dashboard, open Plugins → Add New.
2. Search for Counting Number Block, confirm the plugin name and author shown by WordPress.org, and select Install Now.
3. Select Activate.
4. Open the post or page in Gutenberg and insert the Counting Number Block.
5. Set the target value, direction, duration, trigger behavior, prefix, suffix, and number-formatting options in the block settings.
6. Save or publish the page, then test the counter while scrolling it into view.

When the block is a good fit

• You want a visual counter but do not want to write or enqueue JavaScript.
• The statistic is editorial content managed directly in the block editor.
• You need a built-in reduced-motion behavior and a text value that remains available to assistive technology.

Method 3: Build a custom counter with CountUp.js

CountUp.js is a dependency-free, MIT-licensed JavaScript class that animates a numerical value by counting to it. It supports duration, easing, formatting, and automatic animation when the element becomes visible through IntersectionObserver.

1. Put the real value in the markup

Use an element whose text is meaningful before JavaScript runs. The data-count-end attribute lets the initializer read the target while the visible text supplies a usable fallback.

<span class="stat-number" data-count-end="12500">12,500</span>
<span class="stat-label">customers served</span>

2. Enqueue the library and initializer correctly

For a theme or plugin, load both files with wp_enqueue_script() from the wp_enqueue_scripts hook. This is WordPress’s recommended way to link front-end JavaScript and lets WordPress manage dependencies and loading strategy instead of hard-coding script tags into templates.

function freedom251_enqueue_counter_assets() {
    wp_enqueue_script(
        'countup',
        get_theme_file_uri( '/assets/js/countUp.umd.js' ),
        array(),
        null,
        array( 'strategy' => 'defer' )
    );

    wp_enqueue_script(
        'site-counters',
        get_theme_file_uri( '/assets/js/counters.js' ),
        array( 'countup' ),
        null,
        array( 'strategy' => 'defer' )
    );
}
add_action( 'wp_enqueue_scripts', 'freedom251_enqueue_counter_assets' );

Adjust the file paths to match your theme or plugin. If your WordPress version or script registration setup does not support the strategy array, use the loading approach supported by that installation and preserve the dependency relationship.

3. Initialize CountUp and honor reduced motion

document.addEventListener('DOMContentLoaded', () => {
  const counters = document.querySelectorAll('.stat-number');
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  counters.forEach((element) => {
    const endValue = Number(element.dataset.countEnd);
    if (!Number.isFinite(endValue)) return;

    if (reduceMotion) {
      element.textContent = endValue.toLocaleString();
      return;
    }

    const counter = new countUp.CountUp(element, endValue, {
      duration: 2,
      useEasing: true,
      useGrouping: true
    });

    if (!counter.error) counter.start();
  });
});

The exact global name can vary with the CountUp.js bundle you install; check that bundle’s usage instructions. If you want animation only when the statistic enters the viewport, enable CountUp’s auto-animation option or create an IntersectionObserver that calls start() once the element is visible.

4. Add a page-specific snippet in Elementor

For a small one-page experiment, Elementor’s HTML widget accepts HTML, CSS, and JavaScript. Put CSS inside <style> tags and JavaScript inside <script> tags. Elementor Custom Code also provides placement, priority, and display-condition controls, but it does not accept PHP. Use a theme or plugin for reusable PHP enqueue code.

Accessibility and motion requirements

Keep a usable value in the HTML

Search engines and assistive technologies should receive a meaningful number even if the animation fails, loads slowly, or is disabled. Do not make the animated text the only source of the statistic.

Do not announce every intermediate value

A counter changing dozens of times per second is not an appropriate aria-live announcement. Present the final value as normal text and expose supporting context, such as the statistic’s label, in the surrounding markup.

Respect reduced motion

Use the user’s operating-system preference as a hard stop for decorative motion. WordPress accessibility guidance recommends placing animation and transition rules behind @media not (prefers-reduced-motion); the Counting Number Block disables its animated effect in reduced-motion mode.

@media (prefers-reduced-motion: reduce) {
  .stat-number {
    transition: none;
    animation: none;
  }
}

Also avoid unnecessary motion and be mindful of people with vestibular disorders. A static number is often the best experience when motion is not essential to understanding the data.

Testing checklist

• Load the page with JavaScript blocked or delayed and confirm a meaningful number is still visible.
• Test keyboard navigation and a screen reader, ensuring the label and value make sense together.
• Turn on the operating system’s reduced-motion setting and verify that the counter does not animate.
• Test prefixes, suffixes, decimal values, grouping separators, negative values, zero, and very long numbers.
• Check the first paint, the in-view trigger, and the final settled value on a slow connection.
• Verify that the counter does not restart unexpectedly when another script rerenders the section.
• On multilingual sites, confirm that number formatting matches the site’s locale.

Troubleshooting common failures

The number stays at the fallback value

Inspect the browser console for a missing CountUp bundle, a JavaScript error, an incorrect global name, or a dependency that loaded after the initializer. Confirm that the target element’s data-count-end value is numeric.

The animation starts before the visitor can see it

Use CountUp’s visibility-aware option or an IntersectionObserver instead of starting every counter on page load.

Formatting is wrong

Check whether the widget, block, or CountUp options are applying grouping and decimal separators. Test the exact locale and the longest value your content can produce.

The counter works in the editor but not on the published page

Clear page-cache and optimization-plugin caches, confirm that the script is enqueued on the front end, and check whether minification or deferred execution changed the dependency order.

Quick Recap

Bestseller No. 1

WordPress 3.0 jQuery

$50.99

Which approach should you use?

• Choose Elementor Counter when the page already uses Elementor and you need a polished statistic with minimal setup.
• Choose Counting Number Block when editors work in Gutenberg and you want a no-code block with documented reduced-motion behavior.
• Choose CountUp.js when values come from custom data, counters must share a bespoke design system, or you need precise control over timing and visibility.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.