Dynamic Content for Elementor Opens the Door on Dynamic Data
Introduction
I have been looking at the Dynamic Content for Elementor (DCE) addon pack. There are three things I see right off:
- Many of the widgets and extension are unique and very powerful.
- Because they are powerful they are power tools. In other words, they are not drag, drop, and forget. You need to figure out how to configure them. Also, the documentation isn’t always thorough.
- Consequently, there isn’t much value in a walk-through of the entire suite, because I wouldn’t be able to go into depth enough in any one area to make it useful. You could see that there are many powerful features, but there wouldn’t be any help in using them.
So, I’m going to do a few walk-throughs instead, looking at particular areas of the plugin pack. That way I hope to give some help and clues for making the best use of the widgets and extensions.
In this post I’m looking at the dynamic data / token features. It makes sense to do that first because “dynamic data” is at the core of many of the widgets and extensions and because that is the main feature from which the addon takes its name.
Video Version
What Is Dynamic Data?
The best way to think of dynamic data is in relation to its opposite – static data. Static data doesn’t change. Dynamic data, on the other hand, is based on variables that may be different in different contexts. Using variables allows for the very powerful template feature used in themes and content templates. In WordPress we have a number of variables used in templates. For example, the post title for any individual post is static and doesn’t usually change, but the theme template for displaying posts treats the post title like a variable, so you can use the same layout and design for every post, without needing to recreate the layout and design every single time. In addition to theme templates, WordPress itself uses variables, like the site title, so that the same WordPress software can be used on multiple websites.
There is a ton of dynamic data available in WordPress. It is usually “programmer stuff,” but one of the powerful features of Elementor Pro and other premium page builders is that they make this variable data available for creating pages and theme templates. For a long time dynamic data for Elementor was only available in the Pro version and only some of the many variables were exposed for use. To be clear, these variables are available in WordPress anyway, they were just not exposed for use.
The Dynamic Content for Elementor suite unlocks dynamic data for use in both the free and pro versions of Elementor. It also unlocks dynamic data for the many widgets in the Dynamic suite. Further, it unlocks dynamic data for many Elementor widgets, even those not originally designed to offer dynamic data. This is big.
Installation and Settings
You install Dynamic Content for Elementor the same way you manually install other plugins — upload and activate. Once activated, you get a new menu set under the Elementor Admin menu.
The first tab is for assigning templates. DCE allows you to create templates for the content area. That process will be discussed in another post.
On the Widgets Settings tab there is a long list of 68 widgets. You can turn on only the ones you want to use to avoid fulling up the Elementor editor. One thing to notice is that there are a large number of Advanced Custom Fields (ACF) related widgets, but also support for Pods and Toolset.
The Extension settings tab lets you enable the extensions you want to use. In our case, it is the “Tokens” extension, which provides support for all of the dynamic variables.
The Documents tab is a page effect that adds various navigation options to sections and pages. The APIs tab is for your Google Maps key, and the License tab is where you enter the DCE license.
What the Dynamic Tokens Extension Provides
To illustrate what the Dynamic Tokens extension gives us, I’ll show a few side by side images of widget settings. The images on the left are Elementor Free widgets with Dynamic Content disabled and on the right where the DCE plugin is enabled:
Elementor Widgets Have Dynamic Data Options Added
PowerPack Elements Info Widget
DCE adds dynamic options to third party widgets also. For example, here is the PowerPack Info Box widget.
DCE Adds 7 Types of Dynamic Data – With Examples
The Dynamic Content for Elementor addon provides access to seven types of variable data:
- The Post being viewed – This type of data might be used when creating content templates.
- User information – This type of data would be useful for creating custom user-centric pages, such as a profile or customer page.
- A Taxonomy Term – This would also be useful when creating content templates to include the category and tag information.
- A WordPress Option Settings Value – This is an interesting one. You know all of the settings under the Admin Settings menu? This object gives you access to that information.
- WP_Query Data – WP_Query is the internal class that WordPress uses for querying the database. This object exposes the data that is returned from the query.
- Date Information – This gives you access to various date functions for formatting and manipulating dates.
- Specific System Variables Available on the Page – For example, the PHP GET and POST variables.
Actually accessing the dynamic data is where it gets fun. You either need to know WordPress inside out, use the WordPress Codex and Google, or … use the dynamic data wizard that DCE provides for help in finding the data you need.
When you click the Dynamic Data link you see an interface where you then need to click the “Token” link.
You then get an interface where you enter a “token” for the variable you need. A token is kind of like a shortcode that is specially formatted.
If you know what to enter then you can just type the token into the text field. Otherwise, you can enable the Wizard mode by toggling it on. The next thing to do is to pick the type of data you want from the list. The icons under the “Object” label correspond to the list above.
Unfortunately, you will need to have an idea of the variable name to type it in. For some of the fields you can type in a letter or two and it will do a type-ahead lookup.
There is an option to show the tag in the editor, so you can see what the wizard produces. What you can see there is that there is a prefix “post” that corresponds to the Object type. This token outputs the post title.
The documentation has some token examples and some information on how the syntax / format to use. I spent several hours playing around with the various types of tokens. Here are some examples I came up with. The line in gray is the token I typed in and the value beneath it is the result. Some things to point out are:
- The first user variable example takes the user ID from the page. The second user variable example has a “|” filter that provides the user ID after that filter.
- The taxonomy variable example has a “?”, which indicates a default to use if nothing is found. If you don’t include a default and nothing is found then it doesn’t output anything.
- The date variable example uses a “|” filter to pass in the date format. In this case it is a lower case “l” which in PHP means the day name. The prefix “Yesterday was: ” was added using the Advanced tab where you can enter the before and after text.
Text Editor With Tokens Widget
In all of the examples above I use the regular Elementor Text widget. DCE comes with a special version of the Text widget that allows you to use tokens inside of longer text content.
I tried this out also. You have the same tokens available. I found that you need to manually type the tokens into the text box, because if you use the link for Dynamic then the text box is hidden and I didn’t see how to get back to it, and have the token drop into the text box, after selecting one.
Summary and Conclusion
In this post I have only looked at one of the extensions / features of DCE and there is a lot more to explore. I imagine the tokens feature will be most useful when creating content templates. Because DCE adds the token option to other 3rd party widgets, it means you can use those in your templates also. The token feature could be useful in other circumstances also. For example, if you can use GET and POST variables in subscription forms it would be helpful as it is not uncommon to pass that type of information on the URL.
I had the feeling when using the tokens that this is programmer, or at least power user, territory. The functionality is very powerful, but you are going to have to go digging for advanced usage. The Post and User objects were easier to use than some of the others. The documentation on the Dynamic Content for Elementor website is helpful, but it is not extensive and I had plenty of questions. I had the hardest time trying to get values (other than the most basic) from the WP_Query object. I also tried unsuccessfully to get the URL of the user avatar or author avatar to use as the URL for the Image widget. Some examples in the docs for accessing values in arrays might have helped.
The token functionality is pretty cool but there were a few minor interface issues that I hope are smoothed over in the future. For example, once you toggle on the wizard interface you can see links for dynamic data on the text fields, but those don’t work and only close the dialog. They should probably be removed.
I’m kind of a gear-head and very much into dynamic data, so I enjoyed taking a look at the token features and can see that the other widgets use these tokens to make them more flexible … so this was a good first step for exploring the Dynamic Content for Elementor plugin. I plan to look at some of the individual widgets and extensions, and at creating content templates, in later posts. I hope you have found this post useful.
I’ve been trying to get a section to hide when stock is 0, but I haven’t been unsuccessful. Can you help me?
Maybe try matching with or without quotes around the number: 0 or “0”.
Great overview! Need some more tutorial about this amazing plugin! Thank you for useful content!
You’re welcome and thanks for the positive feedback.
Hello, can this work in a scenario where I have a list of cities pages I need to publish. They all have the same content but the city name within the content changes for each page. Can you shed some light on how I can set this up? Thanks.
I think you want to use a Custom Post Type and custom fields. If you are using Dynamic Content for Elementor then look at https://e360.co/creating-theme-templates-with-dynamic-content-for-elementor/
There is a tutorial on this site about using Meta Box. On my other website https://www.webtng.com I have some tutorials on using Advanced Custom Fields and Toolset. So you add your custom fields and then use a template to pull them dynamically.