Home / Blog / How to Create a Custom Widget in Elementor

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.

Instructions Step-by-Step

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“.

  1. Create a directory called “projects-engine” in “wp-content/plugins“.
  2. In the plugin directory, create the following files & directories:
  • projects-engine.php
  • elementor/class-elementor.php
  • elementor/cllass-widgets.php
  • elementor/widgets/class-widget-name.php
  • elementor/assets/js/projects-engine.js
  • elementor/assets/css/projects-engine.css

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.

Widget Tabs

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

In conclusion

  • 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)
  • render() – output

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.

Was this article helpful?
Yes No
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
WordPress Shortcodes The Complete Guide

Leave a comment

Your email address will not be published. Required fields are marked *




you might like

Must-Have WordPress Plugins for Business Websites

There are over 60,000 plugins that are available in the official WordPress plugin registry and on the internet.

read more
Projects Engine

It’s harder to read code than to write it.

- Joel Spolsky