Voxel Theme Number Modifier: Convert Thousands and Millions to 'k' and 'M'

A version of this Mod is now included natively in the Voxel WordPress Theme. It is functional but has no customisation options. Called: Abbreviate number.

This Mod: Advanced Abbreviate Number offers more options for specifying the abbreviation letter and choosing the number of decimal places shown.

Working with large numbers in their raw format can clutter designs and make it harder to communicate data at a glance.

A common practice is to shorten big numbers: turning 15,000 into “15k” and 2,500,000 into “2.5M”. This post adds a new Voxel Theme Modifier or Mod for changing number values from Thousands and Millions to ‘k’ and ‘M’.

For a recent Voxel Theme project I needed the output to display numbers in the thousands as ‘k’ and in the millions as ‘M,’ but I had to ensure the data remained numeric rather than converting it to text.

This was crucial, as these numbers would be filtered and sorted based on their value, especially for features like social media follower counts, where precise numbers are important for filters and reporting.

To solve this problem, I created a flexible solution in PHP, allowing me to dynamically convert large numbers into a shorter format while keeping the underlying data numeric for further use. Moreover, I added customizable options to tweak the output according to preferences, such as choosing the letter for thousands, or millions, and setting the number of decimal places displayed.

The Code: Voxel Theme Mods – Advanced Abbreviate Number

*** Disclaimer – Use at your own risk. Always make a backup. ***

Add to your Child theme’s functions.php file.

add_filter( 'voxel/dynamic-data/modifiers', function( $modifiers ) {
    class Advanced_Abbreviate_Number_Modifier extends \Voxel\Dynamic_Data\Modifiers\Base_Modifier {
        public function get_label(): string {
            return 'Advanced Abbreviate Number';
        }

        public function get_key(): string {
            return 'advanced_abbreviate_number';
        }

        protected function define_args(): void {
            $this->define_arg( [
                'type' => 'text',
                'label' => _x( 'Suffix for Thousands (e.g., k)', 'modifiers', 'voxel-backend' ),
                'default' => 'k',
            ] );

            $this->define_arg( [
                'type' => 'text',
                'label' => _x( 'Suffix for Millions (e.g., M)', 'modifiers', 'voxel-backend' ),
                'default' => 'M',
            ] );

            $this->define_arg( [
                'type' => 'number',
                'label' => _x( 'Decimal Places for Thousands', 'modifiers', 'voxel-backend' ),
                'default' => 1,
            ] );

            $this->define_arg( [
                'type' => 'number',
                'label' => _x( 'Decimal Places for Millions', 'modifiers', 'voxel-backend' ),
                'default' => 1,
            ] );
        }

        public function apply( string $value ) {
            // Ensure the value is numeric and sanitize it
            if ( !is_numeric( $value ) ) {
                return esc_html( $value ); // Escape non-numeric values
            }

            // Cast the value to a float for processing
            $number = (float) $value;

            // Get user-defined settings (use defaults if not provided)
            $thousands_suffix = $this->get_arg(0) ?: 'k';
            $millions_suffix = $this->get_arg(1) ?: 'M';

            // Use default if no value is explicitly provided
            $decimal_places_thousands = isset($this->args[2]) ? absint( $this->get_arg(2) ) : 1;
            $decimal_places_millions = isset($this->args[3]) ? absint( $this->get_arg(3) ) : 1;

            // Abbreviate the number
            if ( $number >= 1000000 ) {
                $number = number_format( $number / 1000000, $decimal_places_millions );
                return esc_html( $number . $millions_suffix );
            } elseif ( $number >= 1000 ) {
                $number = number_format( $number / 1000, $decimal_places_thousands );
                return esc_html( $number . $thousands_suffix );
            }

            // Return the original number if less than 1000
            return esc_html( (string) $number );
        }
    }

    $modifiers['advanced_abbreviate_number'] = \Advanced_Abbreviate_Number_Modifier::class;
    return $modifiers;
} );

To implement this solution, you’ll need to add the code to your WordPress site. You have two options for where to place this code:

• Child Theme’s functions.php File:

  If you’re already using a child theme (recommended for customization), simply add the PHP code to your functions.php file. This will ensure your changes are preserved even if the main Voxel theme is updated.

• Code Snippets Plugin:

  If you prefer not to edit theme files directly, or if you want to manage your custom code more easily, you can use the Code Snippets plugin. This plugin allows you to add custom PHP code without touching your theme files. Just create a new snippet, paste the code, and activate it.

Then apply this Voxel Mod to any text or heading widget in Elementor.