---
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-04-14
author: "Aditya Sharma"
description: "Number counters can convey statistics, milestones, or achievements in a visually appealing manner. Whether you are showcasing the number of clients served, products sold, or projects completed, a number counter..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Number-Counter-in-WordPress_-1024x519.jpg
word_count: 744
---

# How to Add a Number Counter in WordPress?

## Key Takeaways

- Nexter Blocks includes a Number Counter block that highlights key numeric milestones on a WordPress website.
- The Number Counter block allows users to select from three numeration types: Default, Indian, and International.
- Users can customize the Number Counter block by adding an animated counter and selecting from four icon types: None, Icon, Image, or SVG.
- The Number Counter block provides styling options for the main title, digit typography, and background customization.

Number counters can convey statistics, milestones, or achievements in a visually appealing manner. Whether you are showcasing the number of clients served, products sold, or projects completed, a number counter can succinctly present information while drawing attention to key metrics.

With the Number Counter block from Nexter Blocks, you can easily highlight key numeric milestones on your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-number-counter/)

## Required Setup

- Make sure the default WordPress Block editor is active.

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Number Counter block is activated, to verify this visit Nexter → Blocks → and Search for Number Counter and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=BYTpt_i7ijM

## How to activate the Number Counter Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name** **and** turn on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-activate-new-1.png)

## Key Features

- **Animation** - You can easily add an animated number counter.

## How to Use the Number Counter Block?

Add the Number Counter block from Nexter Blocks to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-design-type-1024x192.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Content

From the **Style** section, you can select a style.

![](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-content-new.png)

.

- **Style 1** - In this style, the icon, number and text are positioned at the center.

- **Style 2** - The icon is placed inline with the number and text in this style.

You can align the content of the number counter from the **Alignment** section.

In the **Title** field, you can add a title to the counter.

Then, in the **Link** field, you can add a link to the number counter.

From the **Icon Type** section, you can select the icon type. Here you’ll find four options – 

- **None** - With this, no icon will be added to the number counter.

- **Icon** – To add a standard icon to the number counter.

- **Image** - To add an image to the number counter.

- **SVG** - To add a custom SVG to the number counter.

Select the option as per your requirements, let’s select Icon here.

From the **Select Icon** section, you can add an icon.

### Digit

In the **Initial Number** field, you have to set the number you want to show initially.

Then in the **Final Number** field, you have to set the final number for the counter.

In the **Number Gap (Animation)** field, you can set the gap between each number change.**
****
**Then you can set a delay between each number change from the **Time delay (Animation) **field.

From the **Numeration Type** dropdown, you can select the numeration type. Here you’ll find three options - 

- **Default** - To show numbers without any comma.

- **Indian** - To place commas on the number as per the Indian number system.

- **International** - To place commas on the number as per the international number system.

In the **Add Symbol/Content** section, you can place a symbol before or after or on both sides. 

Then in the **Symbol** field, you can add a symbol like $,%, etc. in the counter.

> *Note: When the Both option is selected, you’ll see an additional symbol field.*

### Accessibility

In the **Aria Label** field, you can add a text for Aria Label to improve accessibility.

![](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-accessibility-new.png)

## How to Style the Number Counter Block?

To style the Number Counter, you’ll find all the options in the Style tab.

**Main Title **- From here, you can manage the title typography, title color, and space for normal and hover states. 

![](https://nexterwp.com/wp-content/uploads/2024/12/number-counter-style-new.png)

**Digit **-  From here, you can manage the counter number typography, color, and space for normal and hover states.

**Icon **-  This option will be visible only when you select Icon as the icon type from the Layout tab. From here, you can manage the icon style. 

**Image** - This option will be visible only when you select Image as the icon type from the Layout tab. From here, you can manage the image style.

**SVG Icon** - This option will be visible only when you select SVG as the icon type from the Layout tab. From here, you can manage the SVG style.

**Background Options **- From here, you can customize the number counter container background, border, and box shadow for normal and hover states.

**Extra Options** - From here, you can add padding to the number counter container.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Number Counter block isn't showing up?**
A: If the Number Counter block isn't showing, ensure that the Nexter Blocks plugin is installed and activated. You can verify this by navigating to Nexter u2192 Blocks and checking if the Number Counter block is listed and activated. If it's not activated, simply turn on the toggle next to it.

**Q: What are the best practices for styling the Number Counter block?**
A: When styling the Number Counter block, consider using the Style tab to manage typography, colors, and spacing for both normal and hover states. Pay attention to the Main Title and Digit sections to ensure they stand out. Additionally, using background options can enhance visibility and engagement.

**Q: What icon options are available for the Number Counter block?**
A: The Number Counter block offers several icon options: None (no icon), Icon (standard icon), Image (custom image), and SVG (custom SVG). Choose the one that best fits your design needs. If you select Icon, you can further customize it in the Icon section of the Style tab.

**Q: How do I import a preset template for the Number Counter block?**
A: To import a preset template for the Number Counter block, click on the Import Pre-Designed Template button after adding the block to your page. This allows you to start with a customized layout that you can then modify to suit your requirements. For detailed guidance, refer to the [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) documentation.