Creating a custom elementor widget with PHP and Javascript

This is a relative quick (1 hour) tutorial in which I try to explain in clear language how you can write your own custom Elementor widgets. I’m tackling a somewhat complex example in which we use both PHP for the back-end and Javascript for the front-end.

The most interesting part of the entire tutorial is where we start using our custom set Elementor settings to instruct our Javascript frontend what to do.

If you have any questions, drop them in the comment section below.
If you have enjoyed the video and would like to see more, feel free to leave a like & subscribe!

Pastebins:
CSS - https://pastebin.com/sdL2DNQc
NPM Scripts - https://pastebin.com/q0TWY2bz

Chapters:
0:00 Introduction & example
2:27 [PHP] Creating a custom Elementor category
4:57 [PHP] Creating the plugin Class – Start
9:20 [PHP] Creating the plugin Class – Loading widgets
14:30 [PHP] Creating the plugin Class – Widget scripts
17:10 [PHP] Creating the widget Class – Start
19:27 [PHP] Fix – Run main plugin
20:21 [PHP] Creating the widget Class – Widget controls
26:36 [JS] Setting up the world
29:15 [PHP] Fix – typo: \Elementor\Controls_Manager
30:06 [PHP] Creating the widget Class – writing the renders functions
31:08 [JS] Creating the frontend Class
35:16 [JS] Hook our Class into the “window” object of the browser
37:02 [PHP] Fix – Widget styles enqueue
37:27 [JS] Fix – 2 typos: “elementsHandler” and “this.getID()”
38:05 [JS] Writing fetch amount of slides function
43:12 [JS] Writing setTimeout function
47:27 [JS] Fix – typo: “frontend_available”
49:18 [JS] Printing the bullets
51:39 [JS] Allow the bullets to be clicked
53:23 [JS] Bullets active state
55:27 [JS] Making the bullets reactive to the swiper instance
57:56 Outro