--- title: "How to Add a Number Counter in WordPress?" url: https://nexterwp.com/docs/add-a-number-counter-in-wordpress/ date: 2024-12-11 modified: 2026-09-18 lang: en author: "Aditya Sharma" description: "A number typed into a heading is a fact. The same number counting up in front of the reader is the thing people actually stop and look at. The Number..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Number-Counter-in-WordPress_-1024x519.jpg word_count: 686 --- # How to Add a Number Counter in WordPress? ## Key Takeaways - Number Counter anima de un valor a otro al entrar en vista y funciona en Nexter Blocks gratis y en Nexter Blocks Pro, con activación en Nexter > Blocks. - Style 1 apila los elementos y los centra, mientras Style 2 los coloca a la izquierda; el bloque también permite definir Number, Start Value, Time Delay e Increment. - Increment controla cuántos pasos hace la cuenta: con Time Delay en 3, 1,000,000 a 2,000,000 en pasos de 100,000 termina al instante, pero 0 a 100 en pasos de 1 y 0 a 1,000,000 en pasos de 1,000 animan durante unos tres segundos. - Indian numeration muestra un guion hasta que empieza la animación; con Start Value de 1,000,000 la página se entrega como 10-00,000 y solo pasa a 20,00,000 al desplazarse hasta el contador. A number typed into a heading is a fact. The same number counting up in front of the reader is the thing people actually stop and look at. The Number Counter animates from one value to another as it comes into view, with an optional icon, title, symbol and link. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-number-counter/) ## Before You Start - **Edition:** Free — the Number Counter block works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Number Counter, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Video Tutorial https://www.youtube.com/watch?v=BYTpt_i7ijM ## Steps - Add the **Number Counter** block to your page. ![Enabling the Number Counter block in Nexter > Blocks](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-activate-new-1.png) - Choose a **Style** — Style 1 stacks the parts and centres them, Style 2 lays them out to the left. ![The style options](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-design-type-1024x192.png) - Set the **Number** the counter should finish on, and the **Start Value** it counts from. ![Number and start value settings](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-content-new.png) - Set **Time Delay** and **Increment** to control how the count runs. - Add a **Title**, and a **Symbol** such as + or % if the number needs one. ![Title and symbol settings](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-accessibility-new.png) - Optionally add an icon or image above the number, and a link. ![Icon, image and link settings](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-style-new.png) > ***The count starts when the block scrolls into view, not when the page loads.** Measured on a published page: a counter below the fold sat at its start value for as long as it was off screen, and only counted up once it was scrolled to. That is deliberate — it means visitors see the animation rather than missing it.* ## How It Behaves **Increment decides how many steps the count takes, and that is what makes the animation visible.** Measured with Time Delay set to 3 in every case: counting 1,000,000 to 2,000,000 in steps of 100,000 is only ten steps and finished instantly, while 0 to 100 in steps of 1, and 0 to 1,000,000 in steps of 1,000, both animated across about three seconds. If your counter snaps straight to its target, the Increment is too large for the range. | Numeration | How 2,000,000 is written | | ---------- | ------------------------ | | Default | 2000000 — no grouping at all | | International | 2,000,000 — grouped in threes | | Indian | 20,00,000 — grouped in twos after the first three digits | - **Symbol Position** puts your symbol before or after the number. **Both** is the only setting that uses the second symbol field — measured, the leading symbol comes from that separate field and the trailing one from Symbol.- A **link** wraps the title, the icon and the image together, so the whole counter is clickable — measured on a published page.- The number is real text in the page, not an image, so it can be selected and read aloud. ## Limitations - **Indian numeration shows a hyphen until the counter runs.** Measured: with a Start Value of 1,000,000 the page is delivered reading `10-00,000`, and only becomes `20,00,000` once the animation starts. Anyone who does not scroll to the counter sees the hyphenated form. Leave **Start Value** at 0 to avoid it. This is a known bug and has been reported to the development team.- **The count only runs once per page load** — scrolling away and back does not replay it.- A large **Increment** relative to the range makes the count finish instantly whatever Time Delay says — measured.- The counter animates whole numbers; it is not built for decimal places or currency formatting beyond the symbol field. ## Troubleshooting ### My counter jumps straight to the final number The **Increment** is too large for the range. Measured: counting a million in steps of 100,000 is only ten steps and finishes instantly, while steps of 1,000 animate across about three seconds. Lower the Increment. ### The counter never animates It starts when it scrolls into view. If it sits above the fold it will have finished before you look, and if it is inside a tab or an accordion that is closed on load it will wait until it is revealed. ### My number shows a dash in it That is the Indian numeration issue described above — set **Start Value** to 0 and the counter renders correctly from the beginning. ### I set a symbol but only see one of them Set **Symbol Position** to **Both** and fill in both symbol fields — the leading symbol comes from its own separate field. ## Related Docs - [Progress Bar](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/)- [Advanced Heading](https://nexterwp.com/docs/add-an-advanced-heading-in-wordpress/)- [Heading Animation](https://nexterwp.com/docs/add-animated-headings-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)