If you want to showcase some statistics on your website, such as the number of clients and projects that you’ve had, then using animated number counters would be a great solution.

Cloudways

In this tutorial, I’ll show you how to do that using a simple plugin which is based on CSS animations, not JavaScript.

Let’s get to it!

Cloudways

Adding an Animated Number Counter in WordPress

Step 1

Install and activate the Counter Number plugin.

Here are several different ways of installing a plugin in WordPress.

Cloudways

Step 2

Go to Counter Numbers > Add New Counter and add a title for the counter.

add title counter

Step 3

Scroll down and start creating your animated number counters.

Cloudways

There are 3 by default, but you can add more using the Add New Counterbox button.

Add a title, choose one of the many Font Awesome icons, and add a value for the number counter.

add counter number

You can also rearrange the counters by simply dragging and dropping them where you want.

Step 4

Adjust the settings on the right sidebar.

You can change the colors, sizes, font, column layout, and a couple more things.

If you hover over the light bulbs, an explanation pop-up will appear, showing you what part of the counter will change.

counter pop-up

Step 5

Once you’ve finished setting up your animated number counters, click the Publish button.

publish counter

Step 6

Scroll down, copy the shortcode and paste it in the page where you want to display the counter.

counter shrotcode

Here’s how to add shortcodes in a WordPress page or post.

Check your counters

Here’s how they look like with the default settings.

animated number counters

Of course, the numbers will be animated.

animated number counters

Changing the Counter Style with CSS

If you know CSS, you can further change the counter’s style by adding some code in the plugin’s Custom CSS box.

coutner number plugin css box

For example, if you want to add a background color to the whole counter row, you can add this CSS code:

.wpsm_counter_b_row {background-color: #f0f8ff;}

And you’ll get this:

You’ll need to use the plugin’s CSS classes/ids for this.

Here’s a tutorial on how to find CSS selectors in WordPress.

Or, you can buy the Pro version, which offers more features, such as adding background images or colors.

That’s a Wrap

I hope you found this tutorial useful, and you managed to add awesome animated number counters in WordPress!

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

Don’t forget to share the post to help out others!