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

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.