SeedProd Logo

Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create Animated Number Counters in WordPress

How to Create Animated Number Counters in WordPress (2 Methods) 

Do you want to add animated number counters to your WordPress website?

Animated counters are a great way to add interest and direction to your site. They can illustrate important statistics, highlight accomplishments, and make your web page more engaging.

In this article, we’ll show the best ways to easily create animated number counters in WordPress.

What Is an Animated Number Counter?

An animated number counter is a widget that counts up or down to a specific number.

They’re similar to countdown timers because they can count down in increments to the end of a sale or promotion. But you can also embed counter widgets that count up to highlight specific statistics.

You can use animated number counters in several different ways:

  • Show how many customers you have
  • Display the number of projects you’ve completed
  • Showcase total email subscribers
  • Celebrate your number of years in business

Quantifiable statistics like this are an effective type of social proof. Consumers generally find stats and figures trustworthy, which can help them convert quicker than usual.

Which would you trust more: a brand with 22 customers or one with a customer base of 1,213,437+?

OptinMonster social proof example

With that being said, here are 2 easy ways to add animated number counters to your WordPress website.

1. How to Make Custom Animated Number Counters with SeedProd

For the first method, we’ll show you how to add animated number counters to your WordPress site using SeedProd.

SeedProd WordPress website builder

SeedProd is the best drag-and-drop website and landing page builder for WordPress. Its live visual editor lets you easily create any type of WordPress layout without code.

You can use SeedProd to make the following:

  • Custom WordPress themes
  • High-converting landing pages
  • Coming soon pages
  • Maintenance mode screens
  • WordPress login pages
  • Custom 404 page designs
  • Content pages like about, services, and contact
  • And much more.

Getting started is quick and easy with full website kits and landing page templates. Plus, you can customize any design visually with WordPress blocks like animated number counters, text animations, call-to-action buttons, responsive galleries, and 1-click customizations.

With full WooCommerce support, email marketing integrations, and compatibility with popular WordPress plugins and themes, SeedProd is the quickest and easiest way to make custom WordPress designs without hiring a developer.

So let’s jump into this tutorial and learn how to create animated number counters with SeedProd.

Step 1. Install and Activate SeedProd

First, go to the SeedProd pricing page and choose your plan. For this guide, we’ll use SeedProd pro for its drag-and-drop WordPress Theme Builder.

Next, log into your account dashboard and click the Downloads tab. On this screen, click the Download SeedProd Plugin button, and copy your license key.

download seedprod copy your license key

Now head to your WordPress website and upload the plugin .zip file. If you need help with this step, follow these instructions on installing and activating a WordPress plugin.

After installing and activating the plugin, head to SeedProd » Settings and enter the license key you copied earlier.

enter your license key

Now click the Verify Key button to save your license details.

Step 2. Create a WordPress Layout

The next step involves creating a new layout in WordPress. You can do this with SeedProd by either building a new WordPress theme from scratch or creating a standalone landing page.

Both methods use the powerful drag-and-drop page builder to customize your design. And you can use SeedProd’s Counter block on themes and landing pages.

To help you decide, think about what functionality you want your website to have.

The Theme Builder is an excellent choice for creating a complete custom website design from scratch without code.

Seedprod theme builder template files

However, if you want to keep your current WordPress theme and use SeedProd to build individual pages, the Landing Page Builder is your best solution.

create a new landing page

You can follow these step-by-step tutorials for each option:

Both guides will walk you through choosing a template and understanding the visual editor. Once you’re familiar with how it works, come back to step 3 for instructions on adding the Counter block to your design.

Note: We’ll use the Theme Builder with the Headphone Shop website kit for this tutorial.

Step 3. Add the SeedProd Counter Block

The next step involves adding the Counter block to your landing page or WordPress theme design. So click Edit Design on the page you want to customize to open it in the visual editor.

Since we’re customizing a WordPress theme, we’ll start by editing the Homepage template:

Edit SeedProd homepage template WordPress

When you open your design, you’ll see a layout similar to the following screenshot:

SeedProd drag-and-drop page builder

It will have blocks and sections on the left and a live preview of your page on the right-hand side.

You can click anywhere on your preview to edit the content and customize any of the template elements.

Edit design elements visually

It’s also super easy to add new elements to your page with drag and drop. We’ll show you how to do that with the Counter block.

From the left-hand panel, search for the Counter block and drag it onto your WordPress design.

SeedProd Counter block

Once the block is in place, you can click it to see the different customization options.

Counter block settings

With the Counter block, you can:

  • Add a starting and ending count value
  • Enter a number prefix and suffix
  • Set the animation duration
  • Choose a decimal or space separator
  • Add a counter title
  • Edit the alignment on mobile and desktop

Plus, clicking the Advanced tab offers even more settings for styling your counter. For instance, you can change the counter and title fonts and colors, add shadow effects, adjust the spacing, and select visibility options for mobile and desktop devices.

Counter block advanced customization options

The best thing is it doesn’t require custom CSS, HTML, Jquery, or Javascript to get your counter looking exactly how you want. Simply point and click to style your number counter, and your stylesheet updates automatically.

Continue customizing your page until you’re happy with how everything looks. Then click the Save button in the top-right corner to save your customizations.

Save your changes

Step 4. Publish Your Changes

After adding your animated number counter to your custom page and saving your changes, you’re ready to make it live for your website visitors.

If you’re creating a standalone landing page, simply click the down arrow on the Save button and select Publish. But if you’re using the Theme Builder, there’s one more step.

Exit the page builder by clicking the X icon, then from the theme builder dashboard, turn the Enable SeedProd Theme toggle to the “Yes” position.

enable seedprod theme

That’s it! You can now preview your design to see your number counter animation in action:

Animated number counters example

2. Using the Counter Number WordPress Plugin

If you’re not interested in using a drag-and-drop page builder to customize your WordPress site, there is another way to add animated number counters to your site without writing code.

In that case, you can use a free WordPress number counter plugin like the Counter Number plugin from WPShopMart. It lets you add fully responsive counters to your website to display number statistics on posts, pages, and sidebar areas.

This method doesn’t include as many customization options as the previous one, but it’s an easy way to add a simple animated number counter to your website with a shortcode.

To get started, download, install, and activate the Counter Number plugin to your WordPress site. 

Install WordPress counter number plugin

Then go to Counter Numbers » All Counters from your WordPress admin area, and click the Add New Counter button.

Add new counter

On the next screen, you’ll see a simple drag-and-drop counter builder. So enter a title for your counter, then scroll down to the Add Counter Number section.

By default, there are 3 counters set up already. We’ll delete 2 of them by clicking the trashcan icon, then edit the remaining counter.

In the counter settings, you can add a title, select a counter icon, and enter a number value.

Edit counter settings

Then, on the right-hand side, you can change the following:

  • Icon color and size
  • Counter title color and size
  • Counter number color, and size
  • Font weights
  • Font family
Counter customizations options

You can also hide the counter icon if you prefer. When you’re happy with how your counter looks, copy the shortcode, then click Publish.

Number counter shortcode

Now you’re ready to add your counter to a post or page, so create or edit a WordPress page or post. Then, find the section of the page you want, and paste your shortcode directly into a new paragraph block.

Paste number counter shortcode into WordPress page

Finally, click Update or Publish. When you preview your page, the number counter will automatically count up.

WordPress animated number counter example

There you have it!

We hope this guide helped you find the best method for adding animated number counters to WordPress.

Ready to create custom number counters without code?

You might also enjoy reading the following WordPress tutorials:

Thanks for reading. Please follow us on YouTubeTwitter, and Facebook for more helpful content to grow your business.

Get SeedProd

Join Our Newsletter

Subscribers to get Free WordPress Tips and Resources

We do not sell or share your information with anyone.

Let's Connect

Most Popular

Copyright © 2022 SeedProd LLC. SeedProd is a trademark of SeedProd, LLC

PayPal Verified Badge
WPBeginner Verified Badge