wordpresswordpress-themingwordpress-shortcode

add_ux_builder_shortcode: How to create a custom container element with Flatsome theme (UX Builder) in Wordpress?


How can I create a custom container element with Flatsome theme (UX Builder) in Wordpress?

The following adds an element:

    // Add a new custom container to UX Builder
    add_ux_builder_shortcode('custom_container', array(
        'name' => __('Custom Container'),
        'category' => __('Content'),
        'wrap' => false, // to prevent UX Builder from adding additional div around our container
        'options' => array(
            'image2' => array(
                'type' => 'image',
                'heading' => __('Image'),
                'group' => 'General'
            ),
        ),
    ));

    // Function to handle the output of the custom container
    function shortcode_custom_container($atts, $content = null) {
        extract(shortcode_atts(array(
            'background' => '#fff',
        ), $atts));

        // The do_shortcode function will process any nested shortcodes
        return '<div class="custom-container" style="background-color:' . $background . '">' . do_shortcode($content) . '</div>';
    }

    // Register the shortcode
    add_shortcode('custom_container', 'shortcode_custom_container');

However,

Why can't the custom_container element contain child elements?

Thank you for the support!


Solution

  • Found my answer...

    add_ux_builder_shortcode('custom_container', array(
    
        // [...]
    
        'type' => 'container',
    
        // [...]