Summary of "How to Build Elementor Custom Widget | Elementor Custom Widget 2023"

Tutorial Overview

This tutorial walks through building an Elementor (2023) custom widget for WordPress using Elementor’s official developer documentation. It demonstrates the typical plugin + widget registration + widget controls + render + styling workflow.

Prerequisites / Setup

Install WordPress (free) on localhost.
Install Elementor (free).
Use Elementor’s official developer documentation:
- Go to Getting Started → Components → Widgets.
- Use provided step-by-step examples (e.g., “Simple Example”).

Create the Custom Widget Plugin (folder + main plugin file)

In the WordPress directory, create a plugin folder under: Elementor/content/plugins/<plugin-folder-name>
Example plugin naming: Elementor team widget (folder and plugin naming shown as customizable).
Create the main plugin PHP file (e.g., index.php) and fill in:
- Plugin name
- Description
- Version
- Author name
- plugin URI
- author URI
Activate the plugin in WordPress:
- Dashboard → Plugins

Register the Widget + Load Required Class Files

Create a widget registration handler file containing a security check (e.g., “exit if accessed directly”).
Register the widget class using Elementor’s widget registration hook.
Add/adjust a separate required file (conceptually like):
- includes/<widget-file>.php
- or .../functions/includes/...

The tutorial highlights:

Class name alignment (the widget class name is copied into the correct places)
Setting widget metadata such as:
- Widget name
- Object title
- Widget icon (using Elementor icon search / icon links such as from eicons)
- Help URL
- Categories (e.g., “General”)
- Keywords (used for searching within the Elementor editor)

Add the Widget to a Page

Create a WordPress page and open it with “Edit with Elementor”.
After refreshing the editor, the widget becomes searchable (e.g., search for “team”).

Widget Controls (Content tab)

The tutorial demonstrates building the widget UI using Elementor’s controls system:

Add a Content section using controls like:
- Controls_Media for an image control
  - Includes an important “ID” field that ties settings to the render output.
- Text controls for:
  - Team member name
  - Team member designation (text or textarea)
Use a Separator control between fields.
Emphasize that control IDs (e.g., team_image, team_name, team_designation) must match what the render() function reads.

Render Function (output the frontend HTML)

In the widget class, implement the render() function.
Read values from:
- $settings (control values)

The tutorial shows outputting HTML elements such as:

<img> using settings['team_image']['url']
<h4> using settings['team_name']
<p> using settings['team_designation']

It also demonstrates interacting with Elementor:

Drag/drop the widget into the page editor
Select an image from the media library

Styling (Style tab with typography, color, alignment)

The tutorial adds a Style section so Elementor’s editor can control appearance:

Style controls include:
- Title color
- Title typography (font size, font weight, line height, text transform, etc.)
- Designation color and designation typography
- Separator/spacing (partially shown)
- Alignment (using an alignment control such as left/center/right with default values)

It also demonstrates:

Using Elementor group control patterns for typography (e.g., Group_Control_Typography)
Updating the widget preview as you change color, typography, and alignment

Outcome / What the Tutorial Claims

The widget will display a team member block in Elementor with:

Configurable image
Configurable name
Configurable designation
Adjustable colors, typography, and alignment via the Style tab

The tutorial also notes plans to create a more complex widget design in a future video.

Main Sources / Speakers

Video tutorial speaker: the instructor presenting the steps.
Elementor Official Developer Documentation: accessed via “Elementor developer” site → Widgets → Getting Started → examples.