codewizard13 / ehw-tutwrk-ele-oembed-widget

Tutorial Name	Custom Elementor Widget: Simple Example
File Name	README.md
Date Created	12/28/23
Date Modified	--
Platform	Website
Channel	Elementor Developers
Version	0.0.1
Programmer / Student	Eric Hepperle

• Tutorial URL: https://developers.elementor.com/docs/widgets/simple-example/

TECHNOLOGIES

Instructor Info

Elementor Developers

Elementor is packed with dozens of useful widgets in the widgets panel. These widgets are divided into categories. Each widget has a set of custom controls (input fields) allowing end-users to enter data.

TAGS

WordPress Elementor Widgets Custom Widgets Code From Scratch WP Plugins Elementor Developers Custom Plugins oEmbed

Purpose

Tutorial Work: Learn how to build a custom Elementor widget plugins for WordPress.

Requires

• WordPress installed
• Login to WordPress dashboard
• IDE like VSCode

Description:

Complete working example custom Elementor widget plugin identified as "Simple Example":

Putting all these pieces together, we're going to create a simple Elementor widget which will use the native oEmbed functionality (opens new window)of WordPress to auto-embed content from external sites using simple URLs.

TIP: the settings.json in .vscode/ folder is key to getting the SASS -> CSS compile to work.

Folder Structure

elementor-oembed-widget/
|
├─ widgets/
|  └─ oembed-widget.php
|
└─ elementor-oembed-widget.php