Feed data to Elementor widget controls using Dynamic Tags.

Elementor is one of the most widely used third-party web builder for WordPress. If you’ve been using it for a while, you have likely wished to populate widget controls dynamically from data in a custom field. for example, to render an image or display a video. Elementor’s Dynamic Tags are a great way to bridge that gap and insert customized data into a website.

For instance, you can use Dynamic Tags to:

1. Insert or factor in data from outside sources via an API or other app integrations.
2. Calculate or adjust product pricing based on user location, user role, seasonal discounts, or promotions.
3. Display customized content for your visitors such as their name, location, or other data you have gathered from them.
4. Show or hide content based on specific criteria.
5. Generate dynamic links that direct users to specific pages or sections based on conditional logic.
6. Improve SEO and UX by dynamically generating meta titles, descriptions, and other meta tags.

How to use Dynamic Tags to feed data to Elementor widget controls

Elementor recently introduced loop widgets, allowing developers to display post content in pretty much any way they want. Dynamic Tags, in turn, add the possibility of inserting customized data. These two features alone allow you to build any website you want. However, Elementor default Dynamic Tags limit the content sources to standard WordPress and a handful of supported plugins’ features.

If you’re working with custom fields or app integrations, a custom Dynamic Tag will allow you to bridge these data sources to your website and display content using Elementor.

Adding a new Dynamic Tag is rather straightforward. However, Elementor’s documentation leaves some things out because you likely don’t need them (if you’re reading this, you probably disagree). One such thing is the Data_Tag parent class.

To pass data to URL, Image, Media, and Gallery Elementor widget controls you must create a custom dynamic tag extending the Data_Tag parent class.

class MyDynamicTag extends \Elementor\Core\DynamicTags\Data_Tag 

The Data_Tag parent class provides a get_value() function instead of the render() function, allowing you to return data values to Elementor widgets.

Additionally, you must declare the data type categories. This will allow Elementor to display dynamic tags that return the type of data accepted by a widget. For example, an image from the media library.

Dynamic tags use the public function get_categories() to inform an Elementor widget which type of data it returns. Dynamic tags can return more than one data type.

public function get_categories() { 
    return [
        \Elementor\Modules\DynamicTags\Module::IMAGE_CATEGORY,             
    ];
}

Using the same example as before, your custom dynamic tag code would look like this:

class MyDynamicTag extends \Elementor\Core\DynamicTags\Data_Tag {
    public function get_name() { 
        return 'custom-tag'; 
    }
    public function get_title() { 
        return 'Custom Title'; 
    }
    public function get_group() { 
        return 'custom-group'; 
    }
    public function get_categories() { 
        return [
            \Elementor\Modules\DynamicTags\Module::IMAGE_CATEGORY,             
        ];
    }
    public function get_value( array $options = [] ) {
        $myVar1 = myFunction();
        $myVar2 = otherFunction();
        // Return image data
        return [
            'id'    =>  $myVar1,
            'url'   =>  $myVar2,
        ]; 
    }
}

Once created, Elementor will display the new Dynamic Tag as an option in those fields that are compatible with the data type it returns.

As you can see, Elementor Dynamic Tags can open the door to a wide range of possibilities. You can pair Elementor Dynamic Tags with Meta Box, for example, to create all sorts of customized content.