Log In
Elementor Dynamic Tags
Elementor dynamic tags are a powerful tool for adding custom content to your website pages and templates. They allow you to display custom fields, post information, and other dynamic data in your designs, making your pages more dynamic and engaging. With Elementor dynamic tags, you can bring your designs to life and create truly custom experiences for your users.
Our AI-powered tool takes this to the next level by offering an effortless way to generate the code for custom Elementor dynamic tags. With our tool, you don't need to have any coding knowledge or experience. Simply input the information you want to display and our tool will generate the code for you. This saves you time and allows you to focus on designing the best user experience possible.
Our tool is designed with ease of use and functionality in mind. It's user-friendly and intuitive, making it accessible to users of all skill levels. It also integrates seamlessly with Elementor, so you can use the dynamic tags immediately after generating the code. With our tool, you can create custom dynamic tags with just a few clicks, giving you more time to focus on designing and optimizing your website.
Create your prompt. Dynamic tags are intended to show data, so start off with "Display XYZ". You can also ask for settings, like a list of options, the ability to input something (ie, if you were to render a random number, you could have the user input the min and max number to use), and more.
The code output will consist of 2 snippets in one generation.
🚨 For complete installation instructions, refer to the Elementor documentation page - "Dynamic Tags".
To install the custom coded dynamic tags in Elementor, follow these steps:
- Create a new plugin folder in the WordPress plugins directory (you cannot use a snippet plugin for this as it's required to point to a .php file).
- Copy the contents of the first PHP file, starting with "//FILE 1", into the new plugin folder and save it.
- Create a new folder inside the plugin folder called "dynamic-tags".
- Copy the contents of the second PHP file, starting with "//FILE 2", into the "dynamic-tags" folder and save it.
- Go to the WordPress admin area and activate the new plugin from the plugins page.
- Once activated, the custom post field dynamic tag should now be available for use in Elementor.
Note: Make sure the code in the PHP files follows WordPress coding standards and does not contain any syntax errors before activating the plugin.
You may also use the Explain Mode in the CodeWP AI editor to ask about file structure and installation best practices.
Snippet Examples
//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-google-places-tag.php' );
$dynamic_tags_manager->register( new \CWPAI_EL_google_places_tag );
}
add_action( 'elementor/dynamic_tags/register', 'cwpai_register_tags' );
//FILE 2 - DYNAMIC TAG - dynamic-tags/cwpai-google-places-tag.php
class CWPAI_EL_google_places_tag extends \Elementor\Core\DynamicTags\Tag {
public function get_name() {
return 'cwpai-google-places-tag';
}
public function get_title() {
return __( 'Google Places Tag', 'cwpai_dynamic_tag' );
}
public function get_group() {
return ['cwpai-dynamic-tag'];
}
public function get_categories() {
return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
}
protected function register_controls() {
$this->add_control(
'api_key',
[
'type' => \Elementor\Controls_Manager::TEXT,
'label' => __( 'API Key', 'cwpai_dynamic_tag' ),
'description' => __( 'Enter your Google Places API key', 'cwpai_dynamic_tag' ),
]
);
$this->add_control(
'place_type',
[
'type' => \Elementor\Controls_Manager::SELECT,
'label' => __( 'Place Type', 'cwpai_dynamic_tag' ),
'description' => __( 'Choose the type of place information to display', 'cwpai_dynamic_tag' ),
'options' => [
'rating' => __( 'Rating', 'cwpai_dynamic_tag' ),
'address' => __( 'Address', 'cwpai_dynamic_tag' ),
'hours' => __( 'Hours', 'cwpai_dynamic_tag' ),
'website' => __( 'Website', 'cwpai_dynamic_tag' ),
],
'default' => 'rating',
]
);
}
public function render() {
$api_key = $this->get_settings( 'api_key' );
$place_type = $this->get_settings( 'place_type' );
$fallback_key = 'YOUR_FALLBACK_API_KEY';
if ( empty( $api_key ) ) {
$api_key = $fallback_key;
}
$url = 'https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=CODEWP&inputtype=textquery&fields=' . $place_type . '&key=' . $api_key;
$response = wp_remote_get( $url );
if ( is_wp_error( $response ) ) {
return;
}
$body = wp_remote_retrieve_body( $response );
$data = json_decode( $body );
if ( empty( $data ) ) {
return;
}
switch ( $place_type ) {
case 'rating':
echo $data->candidates[0]->rating;
break;
case 'address':
echo $data->candidates[0]->formatted_address;
break;
case 'hours':
echo $data->candidates[0]->opening_hours->weekday_text[0];
break;
case 'website':
echo $data->candidates[0]->website;
break;
}
}
}//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';
}
}