How to Create a Custom Widget in Elementor
Elementor is a versatile page builder for WordPress with a lot of widgets straight out of the box. Not only that, but it also has a simple developer API that helps you to expand its features and make custom Elementor widgets. We’ll go into how to build an Elementor widget in this post.
With this easy-to-follow, detailed guide, you can build an Elementor widget and expand its features. Find a long list of available tabs, sections, and fields — the only limit is your imagination.
1. Setup a custom plugin.
Use a separate plugin to store your custom Elementor widgets. This enables you to monitor and upgrade it without being reliant on the theme in which it is used.
2. Define the plugin.
You must identify every WordPress plugin so that WordPress can recognize it and enable it in the admin dashboard.
3. Initialize the plugin.
This is where you’ll verify that the PHP, WordPress, and Elementor versions follow the plugin’s minimum specifications.
4. Register a custom category
Register a custom category. Also, in this step we will register the scripts and the files for the widgets.
5. Build the custom widget.
In this step, you’ll add the coding that will make the widget available in both the editor and the tab it’s on. This is where you’ll set up the tabs, sections, and fields for the widget.
Step 1: Setup a custom plugin
Let’s begin by configuring the custom plugin, let’s call it “projects-engine“.
- Create a directory called “projects-engine” in “wp-content/plugins“.
- In the plugin directory, create the following files & directories:
Step 2: Define the plugin
We’ll describe the plugin in the “projects-engine.php” file so WordPress knows it and enables you to use it in the admin dashboard.
Step 3: Initialize the plugin
We’ll configure the plugin and ensure that PHP, WordPress, and Elementor version specifications are fulfilled in the “class-elementor.php” format.
Step 4: Register a custom category
In this step, we will create a custom widgets category for the Elementor Dashboard. Here will be visible all of our widgets
Step 5: Build the custom widget
We’ll build the custom Elementor widget in the “widgets/class-widget-name.php” file. It will show the six latest published posts.
Available widget field options
Elementor is extremely powerful, allowing you to add custom tabs, fields, style settings, and even responsiveness with ease. We’ve already added a few fields for title, and content in the “_register_controls” method of the code above, but what if you need more? Check out the samples below to make your plugin even more awesome.
Tabbed sections may be added to Elementor widgets. The Content, Style, and Advanced tabs, for example, are present in many Elementor core widgets. You may add custom fields and other content to each widget instance on a page using the tabbed sections.
Widget Content Tab
$this->start_controls_section( 'content_section', [ 'label' => esc_html__( 'Latest Posts', PE_PLUGIN_DOMAIN ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->end_controls_section();
Widget Image Field
$this->add_control( 'mask_image', [ 'label' => __( 'Mask Image', PE_PLUGIN_DOMAIN ), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => Utils::get_placeholder_image_src(), ] ] );
Widget Select Dropdown
$this->add_control( 'border_style', array 'label' => __( 'Border Style', PE_PLUGIN_DOMAIN ), 'type' => \Elementor\Controls_Manager::SELECT, 'default' => 'solid', 'options' => array( 'solid' => __( 'Solid', PE_PLUGIN_DOMAIN ), 'dashed' => __( 'Dashed', PE_PLUGIN_DOMAIN ), 'dotted' => __( 'Dotted', PE_PLUGIN_DOMAIN ), 'double' => __( 'Double', PE_PLUGIN_DOMAIN ), 'none' => __( 'None', PE_PLUGIN_DOMAIN ), ), ) );
List of Available Elementor Fields
The following is a list of all Elementor field controls:
- Text – text field.
- Number – number field.
- Textarea – Textarea field.
- WYSIWYG – WordPress rich-text editor (TinyMCE).
- Code – Textarea based on Ace editor.
- Hidden – hidden input field in the panel
- Switcher – fancy representation of checkbox.
- Popover Toggle – toggle button
- Select – select box field.
- Select2 – based on the Select2 plugin.
- Choose – radio buttons
- Color – color picker field.
- Font – based on Google Fonts library
- Date-Time – date/time picker field
- Entrance Animation — animation select box field
- Hover Animation – hover animation select box field
- Gallery – media library
- Repeater – repeatable blocks of fields
get_name()– returns id that will be used in the code.
get_title()– title that will be displayed as the widget label
get_icon()– Return the widget icon, you can use font awesome icons as well
get_categories()– where you would like your widget to appear
_register_controls()– define controls (setting fields)
Frequently Asked Questions
How can you create a custom Elementor widget?
Using the Elementor Developer API, you can quickly build a custom Elementor widget. This article is great option to start building your own custom widget.
Where should Elementor widgets be created?
In the scope of a plugin. Elementor widgets can never be created inside a theme. They can be self-contained and stand-alone modules that can be used independently of the theme.
Your creativity is the only limit on what you can do with Elementor. What kind of cool widgets have you made? Let us know how you’ve used custom Elementor widgets on your site in the comments section below.
you might like
WordPress Shortcodes: The Complete Guide
WordPress shortcodes are a versatile feature that allows you to do fun things with little effort. You can do about anything with them.read more