Introduction

TF Random numbers is free numbers counter WordPress Plugin that can be easily integrated with any project.

TF Numbers is compatilbe with all modern browsers, and IE8 and later.

Usage

To add Random Numbers Section, go to Random Numbers and click Add Random Numbers


New page will be opened. There you will be adding new numbers in few clicks. After you have finished adding new numbers and setting the color options, you can insert them into post or page. So go to the page you want to insert the numbers you created, from the WordPress editor click on the TF Numbers icon:



Then select the section you want to insert and click on Insert Shortcode.



Or you can manualy insert the shortcode, by going to All Numbers, where you will see the list of all numbers sections you created. On the right you will see shortcode, just copy it, and paste into post or page where you want to include that section.


Options

Options are also pretty much self-explanatory. From every random numbers section you are creating, you can set individual options that will be applied only to that section.



There are howewer few guidlines worth mentioning:

  • Background image will always have priority over background color option. Meaning if you add both Background Image and Background Color, image will be displayed. In order to display color, you need to remove image.
  • Numbers Size, Titles Size, Icons Size are set in em. You will be adding only numbers here. For example inputing 1.2 means outputed font-size of the selected element will be 1.2em. You can learn more about em size at official W3C Schools website

Note

If you want more power, there are addons that will provide you few more options like counting speed, more layouts, numbers subtitle, currency, animations and usage of better looking numbers (12,800, 100,000, etc), unlocking the usage of comma(,) as separator in your values, and option to add your own images (.png, .jpg, .gif) into options panel. You can learn more in Addons section.

Addons

Addons give you more power and control over TF Numbers plugin. Each addon will give you additional features and functionality that will enrich your numbers, making them more appealing. Addons are installed the same way like any other plugin. Go to Admin Dashboard->Plugins->Add New , and select the addon(s) you purchased. After installing and activating addon new option will be added to the Random Numbers edit screen.


Full list of general options with all addons activated:


Full list of element values with all addons activated:


Addons list:

Controller Addon

Controller Addon gives following options:

  • Change Counting Speed
  • Support for "," comma separator between numbers
  • Support for number subtitles
  • Gives you 7 more layouts
  • "Start counting immediately after page loads" option
  • "Numbers Section Vertical Padding" option
  • "Numbers Section Vertical Margin"
  • Let you choose if you want to show or hide numbers section title
  • Gives you "Numbers Subtitle Font Size" option
  • Gives you "Numbers Subtitle Distance From Title" option
  • Gives you "Numbers Subtitle Color" option

Full list of Layouts with Controller Addon


Parallax Addon


Parallax Addon gives following options:

  • Enable/Disable parallax effect on background image
  • Image Overlay background color

With this addon you can have the parallax effect on the background image of the numbers section. You can also change the background color of the transparent image overlay.


Iconizer Addon

Iconizer Addon gives following options:

  • Ability to use your own images, just like you use font awesome icons. They will populate icons panel.
  • Search icons inside icons panel (font awesome icons and your images also)
  • Image Width Option to edit your image width
  • Image Height Option to edit your image height

Once you activate Iconizer Addon and paste your images to iconizer images folder, you will see new tab in icons panel named "Image Library". All your images will be displayed there as icons. You can select them the same way as you can select font awesome.



Currencies Addon

Currencies Addon gives following options:

  • Support for 16 currencies
  • Currency can be added to each number. Can be set per number
  • Currency Position option. Show currency before or after number. Can be set per number/li>

List of available currencies:

  • Dollar
  • Euro
  • Cent
  • Pound Sterling
  • Yen
  • Franc
  • Lira
  • Peseta
  • Rupee
  • Indian Rupee
  • Hryvnia
  • Drachma
  • Tugrik
  • German Penny
  • Guarani
  • Peso

Animator Addon

Animator Addon gives following options:

  • Choose between 14 Animations for every number block
  • Animation Duration for every number block
  • Animation Delay for every number block
  • Numbers Section Animation
  • Numbers Section Animation Duration
  • Section Title Animation
  • Section Title Animation Duration
  • Hide Numbers Before Animating Them
  • Start Animation After Page Load

Full list of available animations:

  • Fade In
  • Slide Up
  • Slide Down
  • Slide Left
  • Slide Right
  • Expand
  • Shrink
  • Bounce
  • Bounce Down
  • Bounce Up
  • Bounce Left
  • Bounce Right
  • Flip
  • Pulsate
You can save 40% by getting the addons bundle which includes all 5 addons. Learn more Here

Video Tutorials

TF Numbers - Installing And Activating

TF Numbers - Add Numbers Section

TF Numbers - Insert TF Numbers To Page Or Post

TF Numbers - Editing Options

TF Numbers - Set Transparent Background Section

Developer API

TF Shortcodes is easy to extend, and you have few filters on your disposal that will help you to add even more elements and options.


Filters

Available filters are:
add_аction( 'tf_add_option', 'function-callback', 10, 1 ); // adding option fields
add_action( 'tf_elements_reg_fields', 'function-callback', 10, 2 ); // add custom element field inside number
add_filter( 'tf_custom_styles', 'function-callback' );  // adding custom styles that will apply values from above fields
add_filter( 'tf_layouts_order',  'function-callback' ); // order the display of the numbers section
add_filter( 'tf_add_options', 'function-callback' ); // DEPRICATED , use tf_add_option action instead
add_filter( 'tf_add_element', 'function-callback' ); // DEPRICATED use tf_elements_reg_fields action


Adding Option Fields

add_аction('tf_add_option', 'function-callback', 10, 1 );

To add custom option field to TF Random Numbers, you need to follow simple markup (same as for cmb2 field):

<?php

  function tf_add_custom_ops($options)
  {
    $options->add_field( array(
            'name'  => 'Option Name',
            'id'    => '_op_id',
            'type'  => 'text'
      ) );
  }

  add_аction('tf_add_option', 'tf_add_custom_ops', 10, 1 );
?>

For more information on how to add field, read more in cmb2 metaboxes documentation.

Applyng New Options

add_filter( 'tf_custom_styles', 'function-callback' );

Now, after you have added new option fields, it's time to apply them.
You will need to include arrays that will hold following values:

  • selector - css class, or id of the element to which styles will be applied
  • values - An array that will hold following values:
    • property - CSS property that will be applied (like color, background, font-size, etc.)
    • and id - Now this is the id of the field from which value will be used. This is the id of your field you previously created.

Example:
<?php

    function tf_apply_custom_ops()
    {
        $user_style =  array(
            0 => array( // array per selector, I will be using only one selector here, but you can add as many as you like
                'selector' => '.count-title',
                'values' => array( 
                    0 => array(
                      'property' => 'text-transform',
                      'id' => 'nov_id'
                    ),
                    1 => array(
                      'property' => 'text-decoration',
                      'id' => 'dec_id'
                    )
                )
             )
          );

          return $user_style; //return created array
    }

    add_filter( 'tf_custom_styles', 'tf_apply_custom_ops' );

 ?>
   

Add Custom Elements

add_action( 'tf_elements_reg_fields', 'function-callback', 10, 2 );

You can also add new elements directly into number counter section. Mainly, you can include additional fields along with Icon, Title and Number.
This also consists in 2 parts:

  • Creating new element field in Add New Number Panel
  • And then ordering all elements, including the custom HTML markup of your new field.

You can perhaps include new field, and then add custom option to apply some styles to it. It can be done using the provided filters and action.
New element field uses same logic as option field :

 <?php

    function tf_add_element_curr($el, $el_group) {
       $el->add_group_field( $el_group, array(
            'name'  => 'Additional Value',
             'id'    => 'new_id',
             'type'  => 'text',
       ));
    }

    add_action( 'tf_elements_reg_fields', 'tf_add_custom_element', 10, 2 );

  ?>

Numbers Section Elements Ordering

add_filter( 'tf_layouts_order',  'function-callback' );

You can re-order the elements in random numbers section, and doing that is extremly easy:

 <?php

       $order = array(
             0 => 'icon',
             1 => 'title',
             2 => 'number'
        );

  ?>

Now, if you have created a new custom element field, and you want to include it into this section, just include it in the ordering you like and assign it a custom HTML markup and pass it an id of newely created field in the place where added value will show. To include that value just insert you field id in between the [val] tags. Example - [val]field_id[val]


Example inclusion:

 <?php

    function tf_order_the_elements()
    {
       $order =  array(
             0 => 'number',
             1 => 'icon',
             2 => 'title',
             3 => "<strong> [val]new_id[val] </strong>" // our new custom element
          );  

        return $order; // return array
    }

    add_filter( 'tf_layouts_order', 'tf_order_the_elements' );

    ?>

Credits

List of the resources used in the demo