Elementor dynamic tags are used to insert customized data based on various sources. basically it is part Elementor Premium version. it is not available Elementor Free version but in this blog we will learn how to create it in Elementor Free version.
- Plugin Structure
- Registering Dynamic Tags
- Extending Dynamic Tags
- Dynamic Tags Methods
- Data Methods
- Create plugin
- Download Full Code
Plugin Structure
We will create custom Elementor module to add following dynamic tags -:
1. Post Custom Field
2. Post Title
3. Post Date
4. Post Featured Image
elementor-dynamic-tag-module/ | ├─ dynamic-tags/ | ├─ post-custom-field-dynamic-tag.php | └─ post-title-dynamic-tag | └─ post-date-dynamic-tag.php | └─ post-featured-image-tag.php | └─ elementor-dynamic-tag-module.php
Registering Dynamic Tags
To register new dynamic tags use the following code:
function register_post_title_dynamic_tag( $dynamic_tags_manager ) {
require_once( __DIR__ . '/dynamic-tags/post-custom-field-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-title-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-date-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-featured-image-tag.php' );
$dynamic_tags_manager->register( new \Elementor_Dynamic_Tag_Post_Custom_Field );
$dynamic_tags_manager->register( new \Elementor_Post_Title_Tag_Variable );
$dynamic_tags_manager->register( new \Elementor_Post_Date_Tag_Variable );
$dynamic_tags_manager->register( new \Elementor_Post_Featured_Image_Tag_Variable );
}
add_action( 'elementor/dynamic_tags/register', 'register_post_title_dynamic_tag' );
Extending Dynamic Tags
To create your own control, you need to extend the dynamic tags control to inherit its methods:
class Elementor_Dynamic_Tag_Post_Custom_Field extends \Elementor\Core\DynamicTags\Tag {
}
class Elementor_Post_Title_Tag_Variable extends \Elementor\Core\DynamicTags\Tag
{
}
class Elementor_Post_Date_Tag_Variable extends \Elementor\Core\DynamicTags\Tag
{
}
class Elementor_Post_Featured_Image_Tag_Variable extends \Elementor\Core\DynamicTags\Data_Tag
{
}
Dynamic Tags Methods
A simple dynamic tag skeleton will look like this:
class Elementor_Test_Tag extends \Elementor\Core\DynamicTags\Tag {
public function get_name() {}
public function get_title() {}
public function get_group() {}
public function get_categories() {}
protected function register_controls() {}
public function render() {}
public function get_value(){}
}
Data Methods
Dynamic tags data is “returned” by these methods:
class Elementor_Test_Tag extends \Elementor\Core\DynamicTags\Tag {
public function get_name() {
return 'tag-name';
}
public function get_title() {
return esc_html__( 'Dynamic Tag Name', 'textdomain' );
}
public function get_group() {
return [ 'group-name' ];
}
public function get_categories() {
return [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ];
}
}
Create plugin
Create folder “elementor-dynamic-tag-module” in folder plugins in wordpress. next create file “elementor-dynamic-tag-module.php” in folder “elementor-dynamic-tag-module” and add below code.
plugins/elementor-dynamic-tag-module/elementor-dynamic-tag-module.php
<?php
/**
* Plugin Name: Elementor Custom Dynamic Tag
* Description: Add custom dynamic tags in Elementor Free version.
* Plugin URI: https://webdav.in/
* Version: 1.0.0
* Author: WebDav Developer
* Author URI: https://webdav.in/
* Text Domain: elementor-custom-dynamic-tag
*
* Requires Plugins: elementor
* Elementor tested up to: 3.20.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
function register_request_variables_dynamic_tag_group( $dynamic_tags_manager ) {
$dynamic_tags_manager->register_group(
'request-post',
[
'title' => esc_html__( 'Post', 'elementor-custom-dynamic-tag' )
]
);
$dynamic_tags_manager->register_group(
'request-media',
[
'title' => esc_html__( 'Media', 'elementor-custom-dynamic-tag' )
]
);
}
add_action( 'elementor/dynamic_tags/register', 'register_request_variables_dynamic_tag_group' );
function register_post_title_dynamic_tag( $dynamic_tags_manager ) {
require_once( __DIR__ . '/dynamic-tags/post-custom-field-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-title-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-date-dynamic-tag.php' );
require_once( __DIR__ . '/dynamic-tags/post-featured-image-tag.php' );
$dynamic_tags_manager->register( new \Elementor_Dynamic_Tag_Post_Custom_Field );
$dynamic_tags_manager->register( new \Elementor_Post_Title_Tag_Variable );
$dynamic_tags_manager->register( new \Elementor_Post_Date_Tag_Variable );
$dynamic_tags_manager->register( new \Elementor_Post_Featured_Image_Tag_Variable );
}
add_action( 'elementor/dynamic_tags/register', 'register_post_title_dynamic_tag' );
Post Custom Field dynamic tag
Create folder “dynamic-tags” in folder “elementor-dynamic-tag-module” and create file “post-custom-field-dynamic-tag.php” and add below code
plugins/elementor-dynamic-tag-module/dynamic-tags/post-custom-field-dynamic-tag.php
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class Elementor_Dynamic_Tag_Post_Custom_Field extends \Elementor\Core\DynamicTags\Tag {
public function get_name() {
return 'post-custom-field';
}
public function get_title() {
return esc_html__( 'Post Custom Field', 'elementor-custom-dynamic-tag' );
}
public function get_group() {
return [ 'request-post' ];
}
public function get_categories() {
return [ \Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY ];
}
protected function register_controls() {
$variables = [];
$myvals = get_post_meta(get_the_ID());
foreach ($myvals as $key => $val) {
$variables[$key]=$key;
}
$this->add_control(
'user_selected_key',
[
'type' => \Elementor\Controls_Manager::SELECT,
'label' => esc_html__( 'Key', 'elementor-custom-dynamic-tag' ),
'options' => $variables,
]
);
}
public function render() {
$user_selected_key = $this->get_settings('user_selected_key');
if(!empty(get_post_meta(get_the_ID() , $user_selected_key, true))) {
if(!is_array(get_post_meta(get_the_ID() , $user_selected_key, true))) {
print_r(get_post_meta(get_the_ID() , $user_selected_key, true));
}
}
}
}
Post Title dynamic tag
Create file “post-title-dynamic-tag.php” in folder “dynamic-tags” and add below code
plugins/elementor-dynamic-tag-module/dynamic-tags/post-title-dynamic-tag.php
<?php
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
class Elementor_Post_Title_Tag_Variable extends \Elementor\Core\DynamicTags\Tag
{
public function get_name()
{
return 'post-title';
}
public function get_title()
{
return esc_html__('Post Title', 'elementor-custom-dynamic-tag');
}
public function get_group()
{
return ['request-post'];
}
public function get_categories()
{
return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
}
protected function register_controls()
{
}
public function render()
{
echo esc_html( get_the_title() );
}
}
Post Date dynamic tag
Create file “post-date-dynamic-tag.php” in folder “dynamic-tags” and add below code
plugins/elementor-dynamic-tag-module/dynamic-tags/post-date-dynamic-tag.php
<?php
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
class Elementor_Post_Date_Tag_Variable extends \Elementor\Core\DynamicTags\Tag
{
public function get_name()
{
return 'post-date';
}
public function get_title()
{
return esc_html__('Post Date', 'elementor-custom-dynamic-tag');
}
public function get_group()
{
return ['request-post'];
}
public function get_categories()
{
return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
}
protected function register_controls()
{
}
public function render()
{
echo esc_html( get_the_date() );
}
}
Post Featured Image dynamic tag
Create file “post-featured-image-tag.php” in folder “dynamic-tags” and add below code
plugins/elementor-dynamic-tag-module/dynamic-tags/post-featured-image-tag.php
<?php
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
class Elementor_Post_Featured_Image_Tag_Variable extends \Elementor\Core\DynamicTags\Data_Tag
{
public function get_name()
{
return 'post-featured-image';
}
public function get_title()
{
return esc_html__('Post Featured Image', 'elementor-custom-dynamic-tag');
}
public function get_group()
{
return ['request-media'];
}
public function get_categories()
{
return [
\Elementor\Modules\DynamicTags\Module::IMAGE_CATEGORY,
];
}
public function get_value( array $options = [] ) {
global $post;
$post_thumbnail_id = get_post_meta( $post->ID, '_thumbnail_id', true );
return [
'id' => $post_thumbnail_id,
'url' => wp_get_attachment_image_url($post_thumbnail_id),
];
}
}
Set featured image in post or page
Choose image module from elementor sidebar
Choose options
