How to Add Animated Number Counter in WordPress

Today’s readers love to read statistics more than flat text information. WordPress offers you lots of plugins and solutions to showcase your achievements, projects completed, clients, etc., in beautiful counter bars.

This article will explain how to add animated number counter in WordPress with a simple and easy steps.

There are several plugins you can use for adding counter bars in WordPress. Here I’ll be using two plugins – Ultimate Blocks and Counter Number.

Let’s start with the Ultimate Blocks plugin.

Adding Number Counter Using Ultimate Blocks

Ultimate Blocks provides a ‘Counter‘ block that you can use for animated numbers. To add an animated number counter in WordPress using the Ultimate Blocks plugin, follow these steps:

Step 1: Install Ultimate Blocks Plugin

Go to your WordPress dashboard. Navigate to ‘Plugins’ (1) and click ‘Add New Plugin’ (2). Search for “Ultimate Blocks” (3). Click ‘Install Now’ (4) next to the Ultimate Blocks plugin and activate it.

Step 2: Add the Counter Block

Now go to the post/page where you want to add the animated number counter. In the post/page editor, click on the ‘+’ icon (1) to add a new block. Search for “Counter” (2) in the block search bar. Click on the Counter block (3) to add it to your post or page.

Step 3: Configure the Counter Block

Once you’ve added the Counter block, you can configure its settings. Set the starting (1) and ending (2) numbers for the counter. The animation will count from the starting number to the ending number. To adjust the speed of the animation, select seconds from Animation Duration (3).

You can also customize the font size, color, and other appearance settings from the Styles tab.

Step 4: Add More Counter Side-by-Side

If you want, you can add more counters side-by-side. To do that, click on the Counter icon from the toolbar and transform the block to Columns.

Then change the number of columns according to your needs.

Then copy the counter block and paste it on other columns and customize them.

That’s it. Your animated number counters are ready.

Ultimate Blocks is designed to be user-friendly, so even if you’re not very technical, you should be able to add and customize the animated number counter without much hassle. Remember to save your changes and check the post or page on different devices to ensure compatibility and responsiveness.

Adding Number Counter Using ‘Counter Number’

If you’re using the Classic Editor, you can consider using the Counter Number plugin. Here’s the step-by-step guide.

Step 01: Install and Activate the Counter Number Plugin

Go to the plugin section from your WP Dashboard. Type Counter Number in the search box. Install and activate it once the plugin appears below.

Step 02: Add a New Counter

Activating the plugin will create a new section on the WP admin bar names Counter Numbers. Go there and next click the button Add New Counter.

Come down a bit below when the new page appears. Give a name for the set of counter bars.

Scrolling down again, you’ll come to the ADD COUNTER NUMBER section. You’ll get options to add new counter boxes, title them, change the counter icon, and set values. You can delete the box you don’t like anymore by clicking the delete icon on the right-bottom corner of the box.

On the right side, below the COUNTER SETTINGS, you’ll get the options to change icon color, counter title color, number color, icon size, font size, and more.

Step 03: Publish the Counter Box

Once the counter boxes are ready, come on top and hit the Publish button.

Go to All counters from the WP Admin bar. You’ll get the shortcode of the counter box. Copy-paste it on your desired post and page. The counter boxes will be displayed.

Below is a preview of the counter box, added on a post.

Sum Up!

Hope you have this tutorial. It’s now your turn to use this plugin and create exciting counter boxes/bars on your website. If you know of any alternative solution other than this plugin, please mention its name in the comment box.

Ultimate Blocks is a popular WordPress block-based plugin by which you can also create similar number boxes. Check out a demo of the number box block of the plugin.

Also Read:

• How to Add a Progress Bar in WordPress
• How to Add Percentage Animation in WordPress
• How to Create Styled Content Boxes in WordPress