How To Make Custom Elementor Dynamic Tags

Summary

Highlights

• Opting for plugin creation rather than placing dynamic tags in themes enhances flexibility across websites. 🖥️
• Essentials for creating a plugin: a main file, plugin.php, and dynamic tag files. 📄
• Introduce custom dynamics by registering and categorizing tags. 🏷️
• The example tag demonstrated adds two inputs, illustrating the basics. ➕
• Testing on Elementor involves activating the plugin and checking its functionality on pages. 📝

Key Takeaways

• Choose plugin creation over theme integration for flexibility. 🔧
• Ensure Elementor is activated before proceeding. ✅
• Create custom groups for better organization of dynamic tags. 📂
• Dynamic tags can be simple or complex, depending on the needs. 🎛️
• Testing is crucial—activate and verify on a test page. 🔍

Overview

Chapters

• 00:00 - 00:30: Introduction and Setup In this chapter titled 'Introduction and Setup', the video begins with the presenter greeting the viewers and introducing the main topic: creating a custom dynamic tag for Elementor. The process is described as simple, and the intent is to keep the tutorial brief while covering the basic steps. The first step involves deciding whether to integrate the dynamic tag into an existing theme or create it as a standalone plugin. A potential disadvantage of choosing to include it within a theme is noted: if the theme is changed, the files would need to be transferred to the new theme.
• 00:30 - 01:00: Creating a Plugin The chapter discusses the process of creating a custom plugin called 'custom dynamic tag.' It explores the main plugin file and suggests installing it on any website for better functionality.
• 01:00 - 01:30: Main Plugin File The chapter titled 'Main Plugin File' discusses various elements related to a plugin, such as its name, description, version, author, and website. It emphasizes the importance of checking whether the Elementor plugin is installed and activated. If Elementor is not present, an error is thrown. The chapter outlines that the primary function of the main file is to include another file, specifically plugin.php, which is crucial for further operations.
• 01:30 - 02:00: Registering Dynamic Tags The chapter, titled 'Registering Dynamic Tags,' discusses the process of implementing and registering custom dynamic tags. The author explains the approach by which they hook into a particular action to facilitate this registration. They illustrate by creating a custom group named 'my custom dynamic tags.' After establishing the group, they include a pre-made dynamic tag file, concluding with the registration of the tags. The focus is on the technical steps and methodology used to integrate dynamic tags effectively.
• 02:00 - 02:30: Example Dynamic Tag The chapter discusses the creation of a dynamic tag. It explains that the primary function of the tag is to take two inputs and add them together. The speaker emphasizes the simplicity of the tag's functionality for demonstration purposes.
• 02:30 - 03:00: Activating and Testing the Plugin This chapter provides a detailed guide on activating and testing a plugin. It begins with navigating to the plugins section to find the desired plugin and clicking on the activate button. After activation, the user is directed to a testing page. On the test page, the chapter illustrates the process of grabbing text and adding a custom dynamic tag, showcasing the creation and application of dynamic tags within a testing environment.
• 03:00 - 04:00: Inputs and Render Function The chapter titled 'Inputs and Render Function' introduces the concept of using tags and inputs within a control structure. It emphasizes the example of using a tag to perform a simple addition operation. The chapter explains that with two input controls, you can execute an arithmetic operation like 5 plus 10 to render the output 15, highlighting the functionality provided by the input tags and control structure. This example underscores the chapter's focus on practical implementation of tags and input handling.
• 04:00 - 05:00: Conclusion The chapter titled 'Conclusion' provides an overview of specific functions related to tags. It emphasizes the unique name, which serves as the tag's identifier. The next element discussed is the title, visible in Elementor. The final component is the group, with a focus on a custom dynamic tag group created by the narrator. This chapter emphasizes how each element—name, title, and group—functions and their integration into the custom group.

How To Make Custom Elementor Dynamic Tags Transcription

• 00:00 - 00:30 hello guys in this video we'll be making a custom dynamic tag for elementor it's very simple to do i will be trying to keep this short and just cover the basics here so let's get started the first thing you need to do is uh decide whether you want to have this in your theme or create it as a plugin the downside of having it in your theme is uh in case you want to change the theme then you would have to move the files
• 00:30 - 01:00 around and do everything all over the better way to go about this i would say is to create your own plugin and just install it on any website you have so that's what we're doing here we have created a plugin here called custom dynamic tag so let's get into it and see what we have the main file we have here is the custom dynamic tag file and this is the main plugin file this is
• 01:00 - 01:30 uh what holds the plugin name description version author website and whatnot so what we're doing here is uh we're checking if elementor is installed and activated and if it's not then we we will be throwing an error um but once we've done that the main thing that this uh file does is uh include another file which is the plugin.php file we have
• 01:30 - 02:00 here so um here what we're doing is um we're hooking on to this uh action here um and we're registering our own dynamic tags so here i've made my own group which is called my custom dynamic tags and after that i've just included the dynamic tag file that i've that have already made and then finally we just register the
• 02:00 - 02:30 tag this is all you need to do everything else is just in the dynamic tag itself and how you want it to function so here i've made an example tag and what it does it it takes two inputs input one and input two and then just adds them together and this is everything the the tag does i'm trying to keep it uh simple for the sake of this video so um yeah let's see how this looks once we
• 02:30 - 03:00 activate the plugin and uh run the tag so we go to plugins we should see our plugin we click activate and then we go to a page where we can test this i have my test page here okay so now i'll be grabbing a text here and adding a custom dynamic tag here as you can see i have my custom dynamic tags um
• 03:00 - 03:30 this is what we had here and here is my tag example tag and this is the tag that we have here so as you can see we have two inputs here add control and here are the inputs so we can do like 5 plus 10 and that should output 15. that's everything this tag does
• 03:30 - 04:00 so let's just go over it and see what we have here in terms of functions so the first thing we have is the name this is the actual unique name for the tag and the second thing is the title and this is what we see in elementor the third thing is the group and this is the custom group that i've made here again this is my custom dynamic tag group so this tells it to add it to that group
• 04:00 - 04:30 the fourth thing here is uh the category where this tag should show up so in this case we're in a text field so that's just what we need here we have the controls we have two of them here input one and input two both of them are numbers and we're not doing anything complicated here the final thing is the render function here which actually outputs everything you see so
• 04:30 - 05:00 we're actually getting the input 1 setting from this control and input 2 from this control and we're just checking if they're not empty then we're adding them together and echoing that out it's very simple you could do really really complicated things with this i'm just trying to keep it simple for the sake of this video i will be providing all of this code in my github so i will leave a link to that and thank you for watching