Custom Elementor Widget: Minimal widget for beginners

[ez-toc]

Introduction

The “Custom Elementor Widget” is a powerful option that allows you to create stunning and dynamic widget with ease, all within the popular Elementor page builder. Whether you’re a web developer or a non-technical user, this custom widget provides a seamless and intuitive way to incorporate sleek and minimalistic option into your Elementor-powered websites.

With this custom widget, you have full control over the design, functionality, and behavior of your UI. It empowers you to showcase your content in an engaging and visually appealing manner, enhancing the user experience and capturing your visitors’ attention.

Lets jump in!!!

Creating a custom Elementor widget

Creating a custom Elementor widget involves several steps. Here’s the step by step guide to create a custom Elementor widget using PHP. We will use only 2 fields in this example.

  • Title
  • Description

The title will be textbox and the description will be textarea but you can choose any fields from the list of provided controls by Elementor plugin.

Certainly! Let’s go through the code step by step to understand each part:

Defining the Class and Extending the Widget_Base Class

This code defines a class named Custom_Elementor_Widget that extends the Widget_Base class provided by Elementor. This class serves as the foundation for creating custom widgets in Elementor.

Defining the Widget Name,  Title, Icon, and Categories

Defining the widget name, title, icon and category is an important step.

Note: All the steps till step 8 will go inside the class we defined in step 1.

Defining the Widget Name

Defining the Widget Title

Below code will create the title for the widget which will be the name of the widget you will see in the list of all available Elemetor widget inside editor.

Defining the Widget Icon

Now is the time to provide an icon for your widget which will show along with the title of the custom elementor widget. Below is the code for widget icon.

Defining the Widget Categories

This is another very important function while creating the elementor widget. If you ever noticed that the widgets in the elementor are separated into different Labels like “General”, “Basic” etc. like the screenshot below:

elementor categories

In order to add your elementor widget into one of these categories/group, you have to add the following function:

With this, your Custom-built Elementor Widget will show under the general tab.

Registering Widget Controls

This method is used to register the widget controls (fields) that will appear in the Elementor editor. Inside this method, you can define the different controls such as text inputs, text areas, select dropdowns, etc., using the add_control method.

In the provided code, two controls are registered: title and description. The title control is a text input field, and the description control is a text area field.

Rendering Widget Output on the Frontend

This method is responsible for rendering the output of the widget on the frontend when the page is viewed. It retrieves the settings using the get_settings_for_display method and then outputs the HTML markup based on those settings.

In the provided code, it outputs an <h2> tag with the widget title and a <p> tag with the widget description.

Rendering Widget Output in the Editor

This method is responsible for rendering the output of the widget in the Elementor editor itself. It uses a combination of HTML and JavaScript-like syntax (using <# and #>) to define the structure and dynamic attributes of the widget output.

In the provided code, it renders an <h2> tag and a <p> tag with inline editing attributes that allow the title and description to be edited directly in the Elementor editor.

Registering the Custom Elementor Widget

This function is responsible for registering the custom Elementor widget. It uses the widgets_manager property of the Elementor Plugin instance to register the widget type by creating a new instance of the Custom_Elementor_Widget class.

Hooking the Widget Registration

This line of code hooks the register_custom_elementor_widget function to the elementor/widgets/widgets_registered action. It ensures that the custom widget is registered when the widgets are being initialized by Elementor.

Make sure to save this code in a file within your WordPress theme or custom plugin to create a custom Elementor widget.

Complete code for custom elementor widget

Creating a custom Elementor widget involves several steps. Here’s an example of a complete code to create a custom Elementor widget using PHP.

In the code above, you need to replace text-domain with your own text domain, which represents the unique identifier for translations. Additionally, you can customize the widget controls (fields) to suit your specific needs by adding or modifying the control options within the _register_controls method.

Make sure to save this code in a file within your WordPress theme or custom plugin, and it will create a custom Elementor widget named “Custom Widget” that can be added and configured using the Elementor page builder interface.

Conclusion

The article provides a step-by-step guide on creating a custom Elementor widget. It explains how to extend the Widget_Base class and defines the widget’s name, title, icon, and categories. The process of registering widget controls is demonstrated, allowing for the customization of fields in the Elementor editor. The rendering of the widget’s output on the frontend and within the editor is covered, along with the necessary code for registering the custom widget. Overall, the article offers a comprehensive overview of the process involved in creating a custom Elementor widget.

Loading