skip to Main Content

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!

2

Answers


  1. Chosen as BEST ANSWER

    Found my answer...

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

  2. oh wow… now you gotta help me here @Luc Laverdure! i was looking exactly for this, i only need a div.. like a block div.. where do i add this custom function!?!?! this could be a life saver, i am really new to flatsome!
    thanks in advance!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search