Elementor created a strong presence in the WordPress ecosystem. Millions of websites are created with the Elementor page builder. From my experience, it gives the ultimate power to create any layout amongst the existing page builders. To enhance its power, we might need to develop some addons that make our lives easier because your client may need something that does not exist in the Elementor. However, it is pretty easy to create your addon.
In this article, I am going to demonstrate how you can create an Elementor addon. We will build an FAQ addon where you can add FAQs as much as you want using the repeater field, and can change the title colour, and title background colour but you can add more control or even create anything if you get the idea.
Folder structure
Let’s name our plugin folder elementor-faq. So inside this folder, there are two more folders called assets and widgets and one file elementor-faq.php. assets folder contains our css and js files, widgets folder contains ttd-faq.php.
Now lets describe each of the files one by one.
Main plugin files
elementor-faq.php contains the code below.
In the first few commented lines we declared plugin header fields. We name our plugin Elementor FAQ addon. Then added plugin description, version, author name, author uri and text domain.
First few lines of php code are the most basic requirements for a plugin. Then we registered register_ttd_faq_widget function with elementor/widgets/register action hook. elementor/widgets/register hook tells the WordPress; hey, a new widget is coming.
ttd_faq.php file contains all important methods for our addon.
Note: A method and a function are same thing. When a function is declared inside a class, it is called method otherwise function.
Let’s explain each methods.
get_name: assigns the slug for the widget
get_title: assigns the title of the widget
get_icon: assigns the icon of the widget
get_categories: assigns the widget in a category
get_keywords: assigns keywords to the widget so that we can find that widget by typing those keywords in the search box.
__construct, get_style_depends, get_script_depends: In __construct method we registered our necessary css and js files. In get_style_depends we enqueued the css files and get_script_depends used for enqueuing the js files. It is the same way how WordPress enqueues styles and scripts but the Elementor way. I described here in details how enqueuing works in WordPress
Widget controls
Next method is register_controls. Inside this method we should add all of the widget controls. A set of controls go to “Content” tab and another set of controls belongs to “style” tab. Each set starts with start_controls_section statement and ends with end_controls_section.
add_control is used to add input, textarea, wysiwyg, radio fields etc. You can learn more about controls in Elementor’s official documentation.
Displaying in the frontend
render() method is responsible for displaying the frontend stuffs in the frontend (i.e FAQ title, description, colour etc.)
First we initialized a variable named $settings where we stored all settings. We run a foreach loop to get the FAQ titles, descriptions.
Live preview in the editor
content_template() method is written in JS. It has everything we did in the render() method. It helps to render contents in live preview at the right hand side in Elementor editor.
Adding CSS and JS code
Let’s add the CSS code to design FAQs.
It’s time to add some JS code
You can change the css and js code as you want according to your need.
