In this tutorial, you will learn how to convert a paragraph block into a number counter without plugins.

Wordpress customization

128

free WordPress tut update

256

Wordpress code snippet

810

fast WordPress

1024

Add number counter in WordPress without plugins!

Add The Following Code to the functions.php File

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the child theme’s functions.php file and update it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/** 
* Number Counter in WordPress by WPCookie
* https://redpishi.com/wordpress-tutorials/number-counter/
*/
add_filter( 'wp_footer', function ( ) {  ?>
<script>
const counters = document.querySelectorAll('.counter');
if (counters) {
	const observer = new IntersectionObserver(entries => {
    entries.forEach( entry => {
      if ( entry.isIntersecting ) { 
      const finalNumber =  entry.target.innerText;
      const time = Math.ceil(finalNumber / 30) ;
      entry.target.innerText = 0;
      const animate = () => {
	      const data = +entry.target.innerText;			   
        if(data < finalNumber) { 
            entry.target.innerText = Math.ceil(data + time);
            setTimeout(animate, 50);
          }else{
            entry.target.innerText = finalNumber;
          }	 
	      }
      animate(); 
      observer.unobserve(entry.target);
      }
    })
    
  }, {threshold: 0.1 })

  counters.forEach( counter => {
    observer.observe(counter)	
  });
}
</script>
<?php });

Convert a paragraph block to a number counter

Add a paragraph block, write a number inside it, and assign it the “counterclass. That’s it, you can also change the style of the paragraph to your liking.

For example, the above pattern is made by the following blocks. A row block in which there are four groups and in each group there is an image block and a paragraph with the “counter” class.

Number counters pattern in Gutenberg WordPress

If this article is difficult for you to read in text, you can watch the video version below.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 56

Leave a Reply

Your email address will not be published. Required fields are marked *