Below, you’ll find a detailed guide on how to add the Tf Numbers Number Counter Animaton Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Tf Numbers Number Counter Animaton Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Tf Numbers Number Counter Animaton Plugin and the shortcodes it provides:
"Themeflection Numbers – Number Counter and Animated Numbers is a dynamic WordPress plugin. It offers interactive counters and animated numbers, enhancing visual appeal and user engagement on your site."
- [tf_numbers]
Tf Numbers Number Counter Animaton [tf_numbers] Shortcode
The tf-numbers-number-counter-animation shortcode is a feature of the plugin that allows you to display dynamic number counters on your website. The shortcode retrieves specific posts, extracts data, and applies various styles to generate a visually appealing statistics section. It supports customizable attributes like border type, color, size, and more. It’s perfect for showcasing stats, achievements, or milestones.
Shortcode: [tf_numbers]
Parameters
Here is a list of all possible tf_numbers shortcode parameters and attributes:
tf_numbers– The shortcode name used to call the number counter animation.name– The name attribute used to specify the post type.
Examples and Usage
The tf-numbers-number-counter-animation plugin uses shortcodes to display statistics on your website. The shortcode [tf_numbers] can be used to dynamically fetch and display these statistics. The shortcode can take two attributes: ‘name’ and ‘tf_numbers’. The ‘name’ attribute is used to specify the name of the post from which the statistics are to be fetched, while ‘tf_numbers’ can be used to specify the number of statistics to be fetched.
Basic example: Displaying statistics from a post named ‘sales’.
[tf_numbers name="sales"]This shortcode will fetch and display the statistics from the post named ‘sales’. Note that the name should match exactly with the name of the post from which you want to fetch the statistics.
Advanced examples:
Displaying a specific number of statistics from a post.
[tf_numbers name="sales" tf_numbers="5"]This shortcode will fetch and display the first 5 statistics from the post named ‘sales’. If the post contains less than 5 statistics, all of them will be displayed.
Displaying statistics from multiple posts.
[tf_numbers name="sales"]
[tf_numbers name="inventory"]
[tf_numbers name="revenue"]This example demonstrates how you can use multiple shortcodes to display statistics from different posts. The first shortcode will fetch statistics from the post named ‘sales’, the second one from ‘inventory’, and the third one from ‘revenue’.
PHP Function Code
In case you have difficulties debugging what causing issues with [tf_numbers] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'tf_numbers', array( $this, 'tf_numbers_shortcode' ) );Shortcode PHP function:
function tf_numbers_shortcode( $atts ) {
/**
* Call post by name extracting the $name
* from the shortcode previously created
* in custom post column
*/
$default_attributes = array(
'tf_numbers' => '',
'name' => '',
);
$attributes = shortcode_atts( $default_attributes, $atts );
$name = $attributes['name'];
$tf_numbers = $attributes['tf_numbers'];
$args = array(
'post_type' => 'tf_stats',
'name' => $name,
);
$numbers = get_posts( $args );
$html = '';
if ( $numbers ) {
foreach ( $numbers as $number ) {
setup_postdata( $number );
$ID = 'tf-stat-' . $number->ID;
$vals = get_post_meta( $number->ID, '_tf_stat', true );
$image = get_post_meta( $number->ID, '_tf_bg', true );
$bgc = get_post_meta( $number->ID, '_tf_bgc', true );
$bgct = get_post_meta( $number->ID, '_tf_bgct', true );
if ( !$image ) {
$image = esc_url( $bgc );
} else {
$image = 'url(' . esc_url( $image ) . ')';
}
$user_style = '';
$addon_style = '';
$tc = get_post_meta( $number->ID, '_tf_tc', true );
$ic = get_post_meta( $number->ID, '_tf_ic', true );
$ctc = get_post_meta( $number->ID, '_tf_ctc', true );
$nc = get_post_meta( $number->ID, '_tf_nc', true );
$ics = get_post_meta( $number->ID, '_tf_ics', true );
$border_type = get_post_meta( $number->ID, '_tf_border_type', true );
$border_color = get_post_meta( $number->ID, '_tf_boc', true );
$border_size = get_post_meta( $number->ID, '_tf_border', true );
$tts = get_post_meta( $number->ID, '_tf_tts', true );
$nbs = get_post_meta( $number->ID, '_tf_nbs', true );
$layout = get_post_meta( $number->ID, '_tf_layout', true );
$nmh = get_post_meta( $number->ID, '_tf_nmh', true ) ? get_post_meta( $number->ID, '_tf_nmh', true ) : '';
$sp = get_post_meta( $number->ID, '_tf_sp', true ) ? get_post_meta( $number->ID, '_tf_sp', true ) : 80;
$nmt = get_post_meta( $number->ID, '_tf_nmt', true ) ? 'data-nmt="' . get_post_meta( $number->ID, '_tf_nmt', true ) . '"' : '';
$nmtd = get_post_meta( $number->ID, '_tf_nmtd', true ) ? ' data-nmtd="' . get_post_meta( $number->ID, '_tf_nmtd', true ) . '"' : '';
$nma = get_post_meta( $number->ID, '_tf_nma', true ) ? 'data-nma="' . get_post_meta( $number->ID, '_tf_nma', true ) . '"' : '';
$nmad = get_post_meta( $number->ID, '_tf_nmad', true ) ? ' data-nmad="' . get_post_meta( $number->ID, '_tf_nmad', true ) . '"' : '';
$cm = get_post_meta( $number->ID, '_tf_cm', true ) ? 'data-cm="' . get_post_meta( $number->ID, '_tf_cm', true ) . '"' : '';
$cmo = get_post_meta( $number->ID, '_tf_cmo', true ) ? 'data-cmo="' . get_post_meta( $number->ID, '_tf_cmo', true ) . '"' : '';
$tvm = get_post_meta( $number->ID, '_tf_tvm', true ) ? get_post_meta( $number->ID, '_tf_tvm', true ) : '';
$stats = $this->apply_layout( $number->ID );
$atts = apply_filters( 'tf_numbers_atts', '', $number->ID );
//css
$css = '#' . esc_attr( $ID ) . '{background: ' . esc_attr( $image ) . '; background-size: cover} @media only screen and (max-width: 860px){ #' . esc_attr( $ID ) . '{background-size: cover} }';
if ( strpos( $image, 'url' ) !== false ) {
$css .= '#' . esc_attr( $ID ) . ':after{content: " ";display: block;background: rgba(0,0,0,0.57);width: 100%;height: 100%;position: absolute;top:0;left:0}';
}
if ( 'on' == $nmh ) {
$css .= '#' . esc_attr( $ID ) . ' .stat, #' . esc_attr( $ID ) . '{opacity: 0}';
$css .= '#' . esc_attr( $ID ) . ' .stat[data-nm="none"], #' . esc_attr( $ID ) . '[data-nma="none"]{opacity: 1}';
}
if ( 'on' == $bgct ) {
$css .= '#' . esc_attr( $ID ) . '{background: transparent} #' . esc_attr( $ID ) . ':after{display: none}';
}
if ( ! empty( $border_size ) && ! empty( $border_color ) && ! empty( $border_type ) ) {
$css .= '#' . esc_attr( $ID ) . '{border: ' . esc_attr( $border_size ) . 'px ' . esc_attr( $border_type ) . ' ' . esc_attr( $border_color ) . '}';
}
$css .= '#' . esc_attr( $ID ) . ' .stat .fa{color: ' . esc_attr( $ic ) . '; font-size: ' . esc_attr( $ics ) . 'em} ';
$css .= '#' . esc_attr( $ID ) . ' .stat .number{color: ' . esc_attr( $nc ) . '; font-size: ' . esc_attr( $nbs ) . 'em} ';
$css .= '#' . esc_attr( $ID ) . ' .stat .count-title{color: ' . esc_attr( $ctc ) . '; font-size: ' . esc_attr( $tts ) . 'em; margin-bottom: 0} .stat .count-subtitle{display: block;}';
$css .= '#' . esc_attr( $ID ) . ' h3{color: ' . esc_attr( $tc ) . '; margin: ' . esc_attr( (int)$tvm ) . 'em 0;}';
$user_style = apply_filters( 'tf_custom_styles', $user_style );
if ( $user_style ) {
foreach ( $user_style as $style ) {
$selector = $style['selector'];
$values = $style['values'];
$css .= '#' . esc_attr( $ID ) . ' ' . esc_attr( $selector ) . '{';
foreach ( $values as $value ) {
$val = get_post_meta( $number->ID, '_tf_' . esc_attr( $value['id'] ), true );
$prop = $value['property'];
$css .= esc_attr( $prop ) . ':' . esc_attr( $val ) . ';';
}
$css .= '}';
}
}
$css .= apply_filters( 'tf_numbers_after_style', '', $ID, $number->ID );
$addon_style = apply_filters( 'tf_addon_styles', $addon_style );
if ( $addon_style ) {
foreach ( $addon_style as $style ) {
$selector = $style['selector'];
$values = $style['values'];
$css .= '#' . esc_attr( $ID ) . ' ' . esc_attr( $selector ) . '{';
foreach ( $values as $value ) {
$val = get_post_meta( $number->ID, '_tf_' . esc_attr( $value['id'] ), true );
$prop = $value['property'];
$css .= esc_attr( $prop ) . ':' . esc_attr( $val ) . ';';
}
$css .= '}';
}
}
$this->css[ $ID ] = $css;
$html .= '<section id="' . esc_attr( $ID ) . '" class="statistics ' . esc_attr( $layout ) . '" ' . $nma . $nmad . $cmo . ' data-sp="' . esc_attr( $sp ) . '" ' . $cm . $atts . '>';
if ( isset( $number->post_title ) && $number->post_title ) {
$html .='<h3 ' . $nmt . $nmtd . '>' . apply_filters( 'the_title', $number->post_title ) . '</h3>';
}
$html .= '<div class="statistics-inner">';
if ( is_array( $vals ) || is_object( $vals ) ) {
foreach ( $vals as $key => $value ) {
$nm = isset( $value['_tf_nm'] ) ? 'data-nm="' . esc_attr( $value['_tf_nm'] ) . '"' : '';
$nd = isset( $value['_tf_nd'] ) ? ' data-nd="' . esc_attr( $value['_tf_nd'] ) . '"' : '';
$nl = isset( $value['_tf_nl'] ) ? ' data-nl="' . esc_attr( $value['_tf_nl'] ) . '"' : '';
$tfnumber = isset( $value['_tf_number'] ) ? $value['_tf_number'] : 0;
$dynamic = isset( $value['_tf_dynamic_nmb'] ) ? $value['_tf_dynamic_nmb'] : 0;
$number_orignal = $this->get_number( $tfnumber, $dynamic );
$number = filter_var($number_orignal, FILTER_VALIDATE_FLOAT, FILTER_FLAG_ALLOW_THOUSAND);
$attts = apply_filters( 'tf_numbers_number_data', '', $value );
//echo $number;die;
$html .= sprintf( '<div class="stat" %s data-count="%s" data-orignal_count="%s">', $nm . $nd . $nl . $attts, esc_attr( $number ),esc_attr( $tfnumber ) );
$html .= $this->list_stats( $stats, $value,$ics );
$html .= '</div>';
}
}
$html .= '</div></section>';
}
}
return $html;
}
Code file location:
tf-numbers-number-counter-animaton/tf-numbers-number-counter-animaton/inc/shortcode.phpConclusion
Now that you’ve learned how to embed the Tf Numbers Number Counter Animaton Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply