CodeWP Releases A New "Elementor Dynamic Tag" Mode
By James LePage, CodeWP Founder
March 8, 2023
Contents
Elementor is the most popular page builder for WordPress, powering over 10 million active websites. It’s great for beginners and developers alike, offering powerful ways to extend the Editor interface by adding custom components, like Widgets and Dynamic Tags.
Today, we release a new AI mode to generate the PHP code required to register a custom dynamic tag for Elementor. Due to the complexity of the mode, we're launching it as a beta which is available to all users, free and pro. Once stable, this will only be available to pro subscribers.
Dynamic tags insert custom data from various sources. Elementor Pro adds dynamic data based on page and site parameters including Post Title, Post Excerpt, Author Info, Site Name, Site Logo, and more. They're a great way to replace heavy plugins or addon packs, if you only want to insert specific data.
CodeWP takes your language prompt, and converts it to the two PHP files required to register a new tag on the site. It’s a robust, powerful, and quick mode, leveraging recent platform wide updates which allow for better prompt synthesis, and quicker, more accurate code generations.
Here’s the process of creating and installing new dynamic tag:
Now let’s take a look at a few prompt→generation ideas for Dynamic Tags.
You can really populate any data you have access to; custom field values, information from other plugins, or even data from 3rd party APIs. Note - all of these examples are functional and can be installed/extended to your liking 😁.
Basic Example: Easy Access To Custom Fields
Prompt:// I've added a custom field to my posts called "my_custom_field", make a tag called "CWPAI Demo Field" and return the value of that field, if it exist. If no value, return "DNE". No user controls.
//FILE 1 - REGISTER - cwpai-register-tag.php
//Read - https://developers.elementor.com/docs/dynamic-tags/dynamic-tags-structure/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
function cwpai_register_groups( $dynamic_tags_manager ) {
$dynamic_tags_manager->register_group(
'cwpai-dynamic-tag',
[
'title' => esc_html__('CodeWP Dynamic Tag', 'cwpai_dynamic_tag')
]
);
}
add_action( 'elementor/dynamic_tags/register', 'register_request_variables_dynamic_tag_group' );
function cwpai_register_tags( $dynamic_tags_manager ) {
require_once( __DIR__ . '/dynamic-tags/cwpai-demo-field-tag.php' );
$dynamic_tags_manager->register( new \CWPAI_EL_dynamic_tag_demo_field );
}
add_action( 'elementor/dynamic_tags/register', 'cwpai_register_tags' );
//FILE 2 - DYNAMIC TAG - dynamic-tags/cwpai-demo-field-tag.php
class CWPAI_EL_dynamic_tag_demo_field extends \Elementor\Core\DynamicTags\Tag {
public function get_name() {
return 'cwpai-demo-field';
}
public function get_title() {
return 'CWPAI Demo Field';
}
public function get_group() {
return ['cwpai-dynamic-tag'];
}
public function get_categories() {
return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
}
protected function register_controls() {}
public function render() {
global $post;
$value = get_post_meta( $post->ID, 'my_custom_field', true );
echo $value ? $value : 'DNE';
}
}Generation ID:chatcmpl-6rVpFAssLzUP84WC2zVqKhVHqAAxQ
Intermediate Example: WooCommerce Total Sales Badge
Prompt:// Show the total sales over a date range for WooCommerce. Start date default is 1/01/1970, end date default is today. Add 24hr cache for performance.
Note: I iterated on this prompt, regenerating and adding the "Add 24hr cache for performance." to make the tag more efficient.
API Example 1: Pull In Realtime Stock Data
Where this mode really shines is pulling in third party data directly into Elementor. Let’s look at an example where we get the realtime value of a stock. We enter the ticker and our API key as part of the dynamic tag user controls:
Prompt:// tag that shows the current stock price of a ticker. User selects nyse or nasdaq and adds the ticker to a text field. Use Alpha Vantage API, user adds API key in the tag controls.
API Example 2: Get Google Paces Info like Rating or Address
Prompt:// Google places info - User chooses to show either rating, formatted phone number, or website. Add api key to tag controls as well as place id.
With the new "Elementor Dynamic Tags" mode, developers can quickly and easily add custom dynamic tags to their Elementor-powered websites. The mode uses AI to generate the PHP code required to register a new tag, making the process quicker and more accurate than ever before. Whether you're looking to access custom fields, display sales data, or pull in third-party API data, the "Elementor Dynamic Tags" mode has got you covered.
We’ll be adding additional AI modes, several related to Elementor, in the near future. Any thoughts or requests? Leave them on our feature requests page here: https://codewp.canny.io/feature-requests
