TF Numbers Documentation

This documentation page has two sections: YouTube Tutorials & Developers API.

The rest of the documentation is available on product pages TF Numbers & TF Numbers AddOns Bundle.

YouTube Tutorials

Developers API

TF Shortcodes is easy to extend, and you have a few filters on your disposal that will help you add 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 a 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 a field, read more in cmb2 metaboxes documentation.

Applying New Options

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

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

• selector – css class, or id of the element to which styles will be applied
• values – An array that will hold the 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 the random numbers section, and doing that is extremely 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.  Pass id of the newly created field in the place where added value will show. To include value, insert field id 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' );

    ?>