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

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 – Number To Short Hand

Add to your functions.php file.

add_filter( 'voxel/dynamic-tags/modifiers', function( $modifiers ) {
    class Convert_Number_To_Short_Hand extends \Voxel\Dynamic_Tags\Base_Modifier {
        public function get_label(): string {
            return 'Convert number to shorthand';
        }

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

        public function get_arguments(): array {
            return [
                'thousands_letter' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Letter for thousands (example: k)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'millions_letter' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Letter for millions (example: M)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'thousands_decimals' => [
                    'type' => \Voxel\Form_Models\Number_Model::class,
                    'label' => _x( 'Decimals for thousands (example: 0)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'millions_decimals' => [
                    'type' => \Voxel\Form_Models\Number_Model::class,
                    'label' => _x( 'Decimals for millions (example: 1)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
            ];
        }

        public function apply( $value, $args, $group ) {
            // Ensure the value is numeric
            if ( !is_numeric( $value ) ) {
                return $value;
            }

            // Set default values for the options
            $thousands_letter = $args[0] ?? ' k';
            $millions_letter = $args[1] ?? ' M';
            $thousands_decimals = absint( $args[2] ?? 0 );
            $millions_decimals = absint( $args[3] ?? 1 );

            // Convert the number to shorthand format based on value
            if ( $value >= 1000000 ) {
                return number_format( $value / 1000000, $millions_decimals ) . $millions_letter; // Millions
            } elseif ( $value >= 1000 ) {
                return number_format( $value / 1000, $thousands_decimals ) . $thousands_letter; // Thousands
            }

            return $value; // Return the original value if less than 1000
        }
    }

    $modifiers['convert_number_to_shorthand'] = \Convert_Number_To_Short_Hand::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.