LTD Voxel Theme Black Friday Deals

Guides and tutorials to help you learn the Voxel WordPress Theme

Master the Voxel WordPress Theme with our step-by-step Guides

Recent Articles

As a business directory owner using the Voxel Theme, you may want to allow users and business owners to format their content using the WYSIWYG editor without worrying about external links.

Often, these users add links in their descriptions that create SEO challenges—whether they’re follow or no-follow links—when your primary focus is on maintaining a clean, well-structured directory.

The “Remove < a href > Links” modifier is a great solution for controlling how content appears on your site. This Voxel Mod allows you to automatically strip out any links added through the WYSIWYG editor while keeping the rest of the text intact.

It ensures that the editor is used purely for formatting purposes, without affecting your site’s SEO or diluting your link equity with follow or no-follow links that you don’t want to give out.

With this modifier, you can maintain full control over your site’s content, making sure that business listings stay professional and clean, without external links cluttering the page or influencing your search engine rankings.

Plus, the added security measures, such as input sanitization and output escaping, ensure that user-generated content is safe and doesn’t introduce vulnerabilities like Cross-Site Scripting (XSS).

The Code: Voxel Theme Modifier – Remove Links from Users Content

Add to your functions.php file.

add_filter( 'voxel/dynamic-tags/modifiers', function( $modifiers ) {
    class Remove_Ahref_Links extends \Voxel\Dynamic_Tags\Base_Modifier {

        // Label for the modifier
        public function get_label(): string {
            return 'Remove ahref Links';
        }

        // Unique key for the modifier
        public function get_key(): string {
            return 'remove_ahref_links';
        }

        // No input arguments are needed for this function
        public function get_arguments(): array {
            return [];
        }

        // Apply the function to remove <a href> tags while keeping the text
        public function apply( $value, $args, $group ) {
            // Check if the value is a string
            if ( !is_string( $value ) ) {
                return htmlspecialchars( $value ); // Escape and return if not a string
            }

            // Allow all HTML tags except for <a> tags
            $allowed_tags = [
                'b' => [],
                'strong' => [],
                'i' => [],
                'em' => [],
                'u' => [],
                'p' => [],
                'br' => [],
                'ul' => [],
                'ol' => [],
                'li' => [],
                'div' => [],
                'span' => [],
                'img' => [ 'src' => true, 'alt' => true, 'class' => true ],
                'h1' => [],
                'h2' => [],
                'h3' => [],
                'h4' => [],
                'h5' => [],
                'h6' => [],
                // Add any other tags you want to allow here
            ];

            // Sanitize the input, keeping all allowed HTML but removing <a> tags
            $sanitized_value = wp_kses( $value, $allowed_tags );

            // Use regex to remove <a href> tags but preserve the text inside the links
            $modified_value = preg_replace( '#<a.*?>(.*?)</a>#is', '$1', $sanitized_value );

            // Return the modified value without escaping, so allowed HTML is preserved
            return $modified_value;
        }
    }

    // Add the custom modifier to the list of available modifiers
    $modifiers['remove_ahref_links'] = \Remove_Ahref_Links::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 the Post Content dynamic tag or other text field as required.

When working with dynamic data in WordPress using the Voxel Theme, having control over how numbers are displayed can be crucial for certain tasks. One common need is converting measurements, such as switching from inches to centimetres.

This Voxel Math Mod – Multiply by Number, allows you to multiply your dynamic numeric data by a static value you set.

Imagine you have a dataset that displays product dimensions in inches, but your audience prefers metric units. With the Multiply by Number modifier, you can seamlessly convert these values by multiplying each number by 2.54 — the conversion factor from inches to centimetres.

In just a few steps, your product data will be automatically converted and displayed in the preferred measurement system, making it more accessible to a global audience.

This simple yet powerful tool opens up possibilities for automatically adjusting numeric data, whether you’re converting measurements, adjusting currency, or scaling values in any other way.

The Code: Voxel Theme Modifier: Multiply by Number

Add to your functions.php file.

add_filter( 'voxel/dynamic-tags/modifiers', function( $modifiers ) {
    class Multiply_By_Number extends \Voxel\Dynamic_Tags\Base_Modifier {

        // Label for the modifier
        public function get_label(): string {
            return 'Multiply by Number';
        }

        // Unique key for the modifier
        public function get_key(): string {
            return 'multiply_by_number';
        }

        // Define input fields for the multiplier
        public function get_arguments(): array {
            return [
                'multiplier' => [
                    'type' => \Voxel\Form_Models\Number_Model::class,
                    'label' => _x( 'Multiplier', 'modifiers', 'voxel-backend' ),
                    'description' => 'Enter the value to multiply by.',
                    'classes' => 'x-col-12',
                ],
            ];
        }

        // Apply the multiplication
        public function apply( $value, $args, $group ) {
            // Ensure the value is numeric
            if ( !is_numeric( $value ) ) {
                return $value; // Return the original value if it's not numeric
            }

            // Get the multiplier, default to 1 if not provided
            $multiplier = isset( $args[0] ) ? floatval( $args[0] ) : 1;

            // Perform multiplication, allowing negative numbers and removing any upper limit
            $result = $value * $multiplier;

            // Return the result
            return $result;
        }
    }

    // Add the custom modifier to the list of available modifiers
    $modifiers['multiply_by_number'] = \Multiply_By_Number::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 number element.

Voxel Mods Multiplication

Presenting data in a readable and user-friendly way is crucial. Whether you’re dealing with large numbers or organizing text strings, properly formatted outputs can significantly enhance the user experience.

The “Format with Separator” Voxel Theme Modifier is designed to give you the power to format both numerical and text data using custom separators and grouping options.

Imagine you’re working with financial figures, and you want to display large numbers like 2400000 as 2,400,000 for better readability, or you’re handling text and need to insert a separator every few characters, like turning “HelloWorld” into “Hel-loW-orl-d”. This modifier allows you to define the separator (commas, periods, or even custom characters), and decide exactly how many digits or characters should appear before the separator is applied.

This can be combined with regular Voxel Mods such as Prepend and Append to format numbers and currency just the way you need it.

Example Scenarios:

  • Numeric Input:
    Input: 1250000
    Separator: ,
    Grouping: 3
    Decimals: 2
    Decimals Separator: .

    Output: 1,250,000.00

  • Numeric Input + Prepend $ + Append USD:

    Input: 1250000
    Separator: ,
    Grouping: 3
    Decimal:
    Decimals Separator:

    Output: $ 1,250,000 USD
  • Text Input:

    Input: abcdefg
    Separator: –
    Grouping: 2
    Output: ab-cd-ef-g

The Code: Voxel Theme Modifier: Format Text and Numbers with Custom Separators

Add to your functions.php file.

add_filter( 'voxel/dynamic-tags/modifiers', function( $modifiers ) {
    class Format_With_Separator extends \Voxel\Dynamic_Tags\Base_Modifier {

        // Label for the modifier
        public function get_label(): string {
            return 'Format with Separator';
        }

        // Unique key for the modifier
        public function get_key(): string {
            return 'format_with_separator';
        }

        // Define input fields for separator and grouping
        public function get_arguments(): array {
            return [
                'separator' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Separator (e.g., , or .)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'grouping' => [
                    'type' => \Voxel\Form_Models\Number_Model::class,
                    'label' => _x( 'Grouping (number of characters e.g. 3)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'decimals' => [
                    'type' => \Voxel\Form_Models\Number_Model::class,
                    'label' => _x( 'Decimals (for numbers only)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'decimal_separator' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Decimal Separator (e.g., . or ,)', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
            ];
        }

        // Apply the format functionality
        public function apply( $value, $args, $group ) {
            // Get the user-defined options
            $separator = isset($args[0]) ? sanitize_text_field( $args[0] ) : ',';
            $grouping = isset($args[1]) ? absint( $args[1] ) : 3; // Default grouping every 3 characters
            $decimals = isset($args[2]) ? absint( $args[2] ) : 0;
            $decimal_separator = isset($args[3]) ? sanitize_text_field( $args[3] ) : '.';

            // Check if the input is numeric or text
            if ( is_numeric( $value ) ) {
                // If the value is a number, format it using number_format()
                $formatted_value = number_format(
                    (float) $value,
                    $decimals,
                    $decimal_separator,
                    $separator
                );
            } else {
                // If the value is text, insert separators at specified group intervals
                $formatted_value = $this->insert_separator($value, $separator, $grouping);
            }

            // Return the formatted value with HTML escaping to prevent XSS attacks
            return htmlspecialchars( $formatted_value );
        }

        /**
         * Helper function to insert separator into a text string at defined intervals
         */
        private function insert_separator( $text, $separator, $grouping ) {
            // Remove any existing separators to avoid duplication
            $text = str_replace($separator, '', $text);

            // Split the text into an array of characters
            $characters = str_split($text);

            // Insert separators every $grouping characters
            $formatted_array = array_chunk($characters, $grouping);
            $formatted_text = array_map(function($chunk) {
                return implode('', $chunk);
            }, $formatted_array);

            // Join the chunks with the separator
            return implode($separator, $formatted_text);
        }
    }

    // Add the custom modifier to the list of available modifiers
    $modifiers['format_with_separator'] = \Format_With_Separator::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 number or text element.

Embedding YouTube Shorts videos in Elementor and the Voxel Theme requires editing the URL to replace the text ‘shorts’ with ’embed’.

  • YouTube Shorts URLs typically look like this:
    youtube.com/shorts/your-video-id
  • But for embedding YouTube Shorts in your website using Elementor’s video widget, the correct format is:
    youtube.com/embed/your-video-id

But what happens when you’re trying to embed a YouTube Shorts video and the URL format submitted by your users isn’t compatible with the embed requirements?

Using Voxel Theme’s dynamic tag and this custom modifier, you can easily find and replace text in a URL, ensuring your YouTube Shorts URLs are in the proper embed format. This eliminates the need for manual editing of each URL, streamlining your workflow and ensuring that videos display correctly on your site.

In this article, we’ll introduce a new Voxel Mod, Find and Replace URL Modifier that finds your text match and replaces it with your given data.

The Code: Voxel Theme URL Modifier: Find and Replace Text in URL Path

Add to your functions.php file.

add_filter( 'voxel/dynamic-tags/modifiers', function( $modifiers ) {
    class Find_And_Replace_In_URL extends \Voxel\Dynamic_Tags\Base_Modifier {
        
        // Label for the modifier
        public function get_label(): string {
            return 'Find and Replace in URL';
        }

        // Unique key for the modifier
        public function get_key(): string {
            return 'find_replace_in_url';
        }

        // Define input fields for find and replace text
        public function get_arguments(): array {
            return [
                'find_text' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Text to find', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
                'replace_text' => [
                    'type' => \Voxel\Form_Models\Text_Model::class,
                    'label' => _x( 'Text to replace with', 'modifiers', 'voxel-backend' ),
                    'classes' => 'x-col-12',
                ],
            ];
        }

        // Apply the find-and-replace functionality with security enhancements
        public function apply( $value, $args, $group ) {
            // Validate that the value is a valid URL
            if ( filter_var( $value, FILTER_VALIDATE_URL ) === false ) {
                return htmlspecialchars( $value ); // Escape output if not a valid URL
            }

            // Get the text to find and replace, sanitize them to prevent harmful input
            $find_text = isset($args[0]) ? sanitize_text_field( $args[0] ) : '';
            $replace_text = isset($args[1]) ? sanitize_text_field( $args[1] ) : '';

            // If find_text is empty, return the original URL
            if ( empty( $find_text ) ) {
                return htmlspecialchars( $value ); // Escape output before returning
            }

            // Perform the find-and-replace on the URL
            $modified_value = str_replace( $find_text, $replace_text, $value );

            // Return the modified URL with HTML escaping to prevent XSS attacks
            return htmlspecialchars( $modified_value );
        }
    }

    // Add the custom modifier to the list of available modifiers
    $modifiers['find_replace_in_url'] = \Find_And_Replace_In_URL::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 Video widget in Elementor for the proper embed URL, or apply it to any text or heading widget to display the correct URL path.

Youtube shorts embed URL issues

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.

eg. 270,000 Instagram followers –> 207k Instagram followers

Voxel WordPress Theme number Mods

This guide outlines how to implement Rank Math SEO schema markup within the Voxel WordPress Theme using the free version of Rank Math, enhancing search engine understanding and visibility of your content.

Step 1: Generate Schema Markup
Use an online schema generator to create your schema markup structure.

Step 2: Adjust Rank Math Settings
Disable the Rank Math Title & Meta Schema Type for your custom post type:

  • Navigate to wp-admin > Rank Math > Titles & Meta > Your Post Type
  • Set Schema Type to “None”

Step 3: Integrate Dynamic Tags
Replace static data in your schema markup with Voxel dynamic tags.

Step 4: Insert Schema Markup
Add the generated schema markup into a HTML element in your single post template, wrapped in a script tag.

Step 5: Test Schema Markup
Verify your schema markup using Google’s Rich Results Test tool at Google Rich Results Test.

Example Event Schema using Dynamic HTML in the Voxel Theme


{
  "Event": {
    "@context": "https://www.schema.org",
    "@type": "Event",
    "name": "@post(:title)",
    "startDate": "@post(event_date.upcoming.start)",
    "endDate": "@post(event_date.upcoming.end)",
    "eventStatus": "https://schema.org/EventScheduled",
    "eventAttendanceMode": "OfflineEventAttendanceMode",
    "image": "@post(_thumbnail_id.url)",
    "organizer": {
      "@type": "Organization",
      "name": "@post(post-relation.:title)",
      "url": "@post(:url)",
      "sameAs": "@post(website), @post(email)"
    },
    "offers": {
      "@type": "Offer",
      "url": "@post(:url)",
      "priceCurrency": "USD",
      "price": "@post(event-price)",
      "maximumAttendeeCapacity": "@post(event-capacity)",
      "availability": "https://schema.org/LimitedAvailability"
    },
    "location": {
      "@type": "Place",
      "address": "@post(location.address)",
      "hasMap": "https://www.google.com/maps/@@post(location.lat),@post(location.lng),12z"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "@post(location.lat)",
      "longitude": "@post(location.lng)"
    }
  }
}

Example Local Business Schema using Dynamic HTML in the Voxel Theme

rank math seo schema markup guide for the voxel theme

Voxel Theme Frequently Asked Questions

How do you make an entire preview card clickable in Voxel?

The best and most accessible way to achieve this is by using a pseudo element on the link and expanding the clickable area over the entire card.

You need to apply two classes: clickable-card: applied to the card container and clickable-link: applied to the heading that contains the link.

Then copy the CSS from here.

Code Snippets
CSS
Elementor

What's the difference between Voxel Elements vs Elementor?

Voxel Elements is faster, while the official Elementor plugin has better compatibility with 3rd party addons.

Voxel Elements is a custom version of the free Elementor page builder plugin, optimized for better performance.

These performance benefits are gained by making changes to the page rendering algorithm, speeding up page loading.
VXE does not make changes to the assets loaded or DOM output.

Elementor
Speed

What are the features of the Voxel WordPress Theme?

The Voxel WordPress Theme is an all-in-one framework used for dynamic content, conditional logic, content restrictions, membership, booking, directory and multi-vendor split payments.
See a detailed breakdown here.

If I have custom post types in another theme, can I switch to Voxel Theme?

Yes. Any custom post types, Elementor data, or any other functionality provided by another theme that follows WordPress standards will keep working when switching to Voxel.

Custom Post Types

Useful Resources to help you build

Sometimes you need custom CSS. This CSS reference table demonstrates the different selectors and will help you style your content.

LTD Voxel Theme Black Friday Deals

Support me

Coffee is my fuel

All guides are available for FREE.

If this saved you time, please support my work by checking out the recommended tools or buying me a coffee.