Replacing Visual Composer Gallery with Kadence Gallery

When transitioning from one WordPress page builder to another, maintaining functionality and ensuring content displays correctly can be a daunting task. Recently, I implemented a custom solution for converting Visual Composer (VC) galleries into Kadence Blocks’ Advanced Gallery while simultaneously cleaning up redundant shortcodes left behind by Visual Composer. Here’s how it works and how you can achieve similar results.

What Does the Code Do?

1. Replacing [vc_gallery] Shortcode with Kadence Advanced Gallery

The [vc_gallery] shortcode from Visual Composer is repurposed to dynamically generate Kadence Blocks’ Advanced Gallery. The process includes:

• Extracting the attributes (like images and interval) from the [vc_gallery] shortcode.
• Using the images attribute to fetch image details (URLs, dimensions, alt text, captions) from WordPress using wp_get_attachment_image_src.
• Structuring this data into the JSON format required by Kadence Blocks.
• Rendering the block using do_blocks to output the Advanced Gallery.

This ensures seamless compatibility with Kadence Blocks without requiring any manual updates to the content.

2. Removing Redundant Visual Composer Shortcodes

Visual Composer often leaves behind shortcodes like [vc_row], [vc_column], and [vc_column_text], which can clutter the frontend if the builder is no longer active. The script:

• Defines these shortcodes as “disabled” using an array (DISABLED_SHORTCODES).
• Uses regular expressions to strip the shortcode tags while retaining their inner content.
• Supports both opening/closing and self-closing variants of these shortcodes.

This cleanup ensures the content remains readable and functional without unnecessary VC-specific markup.

Why Is This Useful?

• Seamless Transition: It enables the migration from Visual Composer to Kadence Blocks without breaking the content.
• Cleaner Frontend: Removes redundant shortcodes that no longer serve any purpose.
• Automated Workflow: The script handles the conversion and cleanup automatically, saving time and effort.

The Result

By combining these two functionalities, my WordPress site now:

1. Automatically converts [vc_gallery] into Kadence Advanced Gallery blocks, ensuring a modern and visually appealing output.
2. Removes leftover [vc_row], [vc_column], and [vc_column_text] shortcodes, keeping the content clean and readable.

How to Use It

Here’s how you can apply this solution to your site:

1. Add the provided PHP code to your theme’s functions.php file or a custom plugin.
2. Ensure the Kadence Blocks plugin is installed and active.
3. Test the frontend to confirm that:
   • [vc_gallery] shortcodes render as Kadence Advanced Galleries.
   • Redundant Visual Composer shortcodes are removed, leaving only the inner content.

Conclusion

Migrating between page builders doesn’t have to be a hassle. With this PHP script, you can keep your site looking fresh and functional while transitioning to Kadence Blocks. If you’re dealing with a similar issue, give this approach a try, and streamline your WordPress workflow!

This code replaces the vc_gallery shortcode with the kadence gallery

<?php

// Override [vc_gallery] shortcode handler
function render_kadence_gallery_from_vc_shortcode($atts) {
    // Extract attributes from the shortcode
    $attributes = shortcode_atts([
        'interval' => '',
        'images' => '',
        'img_size' => 'large',
        'css' => ''
    ], $atts);

    if (empty($attributes['images'])) {
        return 'Error: No images found in the shortcode.';
    }

    // Parse image IDs
    $image_ids = explode(',', $attributes['images']);
    $gallery_items = [];

    foreach ($image_ids as $image_id) {
        $image_id = intval($image_id);
        $full_image = wp_get_attachment_image_src($image_id, 'full');
        $thumb_image = wp_get_attachment_image_src($image_id, 'thumbnail');
        $large_image = wp_get_attachment_image_src($image_id, 'large');

        if ($full_image) {
            $gallery_items[] = [
                'url' => $full_image[0],
                'thumbUrl' => $thumb_image ? $thumb_image[0] : $full_image[0],
                'lightUrl' => $large_image ? $large_image[0] : $full_image[0],
                'id' => $image_id,
                'width' => $full_image[1],
                'height' => $full_image[2],
                'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
                'caption' => wp_get_attachment_caption($image_id) ?: '',
            ];
        }
    }

    if (empty($gallery_items)) {
        return 'Error: No valid images found for the given IDs.';
    }

    // Build the Kadence block JSON
    $kadence_block = [
        'uniqueID' => uniqid(),
        'ids' => array_map('intval', $image_ids),
        'type' => 'slider',
        'linkTo' => 'media',
        'lightbox' => 'magnific',
        'imagesDynamic' => $gallery_items,
        'kbVersion' => 2,
        'align' => 'none',
    ];

    // Generate the Kadence block
    $kadence_block_html = '<!-- wp:kadence/advancedgallery ' . json_encode($kadence_block, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) . ' /-->';

    // Render the block
    return do_blocks($kadence_block_html);
}

// Register the handler for [vc_gallery]
add_shortcode('vc_gallery', 'render_kadence_gallery_from_vc_shortcode');

This code removes specific VC shortcodes but keeps the inner content

<?php

// Function to disable specific [vc_row] shortcodes but retain their inner content
define('DISABLED_SHORTCODES', ['vc_row', 'vc_column', 'vc_column_text']);

function disable_specific_vc_shortcodes($content) {
    foreach (DISABLED_SHORTCODES as $shortcode) {
        // Pattern to match opening and closing shortcode tags and their content
        $pattern = '/\[' . $shortcode . '(?:\s+[^\]]+)?\](.*?)\[\/' . $shortcode . '\]/is';
        // Replace matched shortcodes with their inner content
        $content = preg_replace($pattern, '$1', $content);

        // Handle self-closing tags (e.g., [vc_column_text /])
        $self_closing_pattern = '/\[' . $shortcode . '(?:\s+[^\]]+)?\/\]/is';
        $content = preg_replace($self_closing_pattern, '', $content);
    }
    return $content;
}

add_filter('the_content', 'disable_specific_vc_shortcodes');