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)

1. In the WordPress directory, create a plugin folder under: Elementor/content/plugins/<plugin-folder-name>

2. Example plugin naming: Elementor team widget (folder and plugin naming shown as customizable).

3. Create the main plugin PHP file (e.g., index.php) and fill in:

   • Plugin name
   • Description
   • Version
   • Author name
   • plugin URI
   • author URI

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

1. Create a WordPress page and open it with “Edit with Elementor”.
2. 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.