Elementor Custom Widget Tutorial

Elementor is a Website Builder that allows WordPress users to create and edit websites using drag and drop technique and built-in responsive mode.

The plugin has a free (Elementor) and a paid (Elementor Pro) version. They differ in the number of available functions. Let’s explain how this page builder works.

Its main feature is that the constructor immediately displays the changes that you make. That’s why Elementor is called a visual editor.

Elementor arranged on the principle of Drag-and-drop. To add an element to the page, you need to grab it with the mouse and drag it to the editing area. The page is literally assembled from elements. They are called widgets. The process of creating a page consists of several steps.

Elementor is packed with various elements or widgets. Widgets allow us to create websites and display related content. But sometimes we need specific functionality for our site. And for this, we need to create a new widget or element.

A widget or element is a section in a graphical user interface (GUI) that allows us to display information that we want to showcase to users.

The Elementor widget is a combination of PHP, JavaScript, HTML, and CSS codes that generate custom output for us.

Each widget has customizable controls such as input, fields, buttons, and more. With these controls, we can set our user settings and see the preview in the editor and render the final HTML code in the frontend.

To create a new widget, we must extend the abstract class Widget_Base. This class has several methods that we need to override first.

With get_name () method, we can set the widget name and return the name of the widget.

With the get_title () method, we can set the label of the widget.

The get_icon () method sets the icon for our widget, which is displayed on the panel.

The get_categories () method sets the category in which our widget should be placed in the panel categories. There are several categories by default, including the following:

• Basic
• Pro-elements
• General
• Woocommerce-elements
• WordPress
• etc.

We can also create our own categories using the elementor / elements / categories_registered action.

With the _register_controls () method, we can set important sections and controls for the widget.

There are several controls that we can use to customize the widget, such as the following:

User interface controls:

1. UI Controls
   • Button
   • Divider
   • Heading
   • Raw Html
2. Data Controls
   • Text
   • Select
   • Choose
   • Gallery
   • Slider
   • Typography
   • And so on.
3. Multiple Controls
   • Url
   • Media
   • Image Dimensions
4. Unit Controls
   • Slider
   • Dimensions
5. Group Controls
   • Typography
   • Text Shadow
   • Box Shadow
   • Border
   • Background

The render () method allows you to create front-end HTML using PHP.

The _content_template () method generates a live preview of the widget in the editor using the Backbone JavaScript library.

In case of opt-out, there are three tabs in the Fakir panel, which are Content Tab, Tab Style, and Advanced Tab. To add controls to our widget, we must first create a section and assign it to one of the tabs. We can then add our favorite controls to the section. As mentioned above, we have to put our code in the _register_controls () method.

To create a section, we need to set the following basic parameters.

Section title

• Section Name
• Section Settings(label ,tab)

We have to set the following parameters for each control as shown below:

• Control Name
• Control Setting(label,type)

Use the following control to add a regular control.

This type of control includes various parameter values for desktop computers, tablets, and mobile devices.

This control combines several common controls into one, such as typography.

Create a tab area to add various controls.

Create a tab area to add various controls.

Creating a pop-up window will allow you to display various controls.

Sometimes you may want to hide some sections or controls in your widget, but using if / else in your code is a problem. Fortunately, now it can be done easily with the help of condition (condition) in the settings sections or controls.

Let’s say we have one control named Choose_Layout with two values – first and second. After adding the code below to any section or control, our section or control will be displayed if the return value of the Choose_Layout control is first. And it will be hidden if the return value of the Choose_Layout control is second.

One of the great features of Elementor is the ability to easily change the display style of a widget using CSS code and selectors. For example, if we want to change the height of the output images, we first have to assign a class attribute to our HTML tag. Then use this class with a selector in control settings.

To generate the final Html code in the render() method and the live preview in _content_template (), we will need to inject a parameter from the widget controls like height, width, font size, and more. In Elementor, the input parameter is called Settings. Using this method, we can change the settings in render().

For the _content_template () method, the Elementor settings are stored in the settings variable.

One important point to keep in mind is that settings are stored in a multidimensional array. We can get the internal setup with the following code.

With this knowledge, you can now easily create your own Elementor widget.

We thank our developer Alexander Antonyan for sharing with us his experience in creating a custom widget in Elementor.