Creating a custom elementor widget with PHP and Javascript

In this tutorial, I'll show you how to create a custom Elementor widget using PHP and JavaScript. In just under an hour, you'll learn how to create a fully functional widget that you can use on any Elementor page. I'll explain the steps in clear and simple language, so even if you're new to web development, you can follow along with ease.
One of the most interesting parts of this tutorial is when we use custom Elementor settings to control our JavaScript frontend. This technique can be used in a variety of ways to create dynamic and engaging web elements that will impress your visitors.
If you have any questions or suggestions for future videos, please leave them in the comments section below. And if you found this tutorial helpful, please consider leaving a like and subscribing to my channel for more web development content. Thanks for watching!
Pastebins:
CSS - pastebin.com/sdL2DNQc
NPM Scripts - pastebin.com/q0TWY2bz
Source Code - github.com/ArneDeBelser/stand...
Chapters:
0:00 Introduction & Example
2:27 Creating a Custom Elementor Category with PHP
4:57 Building the Plugin Class: Getting Started
9:20 Loading Widgets with the Plugin Class
14:30 Adding Widget Scripts with the Plugin Class
17:10 Creating the Widget Class: Getting Started
19:27 Fixing Issues: Running the Main Plugin
20:21 Adding Widget Controls with the Widget Class
26:36 Setting Up the World with JavaScript
29:15 Fixing Issues: Correcting a Typo "\Elementor\Controls_Manager"
30:06 Writing Render Functions with the Widget Class
31:08 Creating the Frontend Class with JavaScript
35:16 Hooking the Class into the Window Object of the Browser
37:02 Fixing Issues: Enqueuing Widget Styles
37:27 Fixing Issues: Correcting Typos in JavaScript
38:05 Writing a Function to Fetch the Amount of Slides
43:12 Writing a Function for SetTimeout
47:27 Fixing Issues: Correcting a Typo in JavaScript
49:18 Printing the Bullets with JavaScript
51:39 Allowing the Bullets to Be Clicked
53:23 Adding Active States to the Bullets
55:27 Making the Bullets Reactive to the Swiper Instance
57:56 Outro
55:27 [JS] Making the bullets reactive to the swiper instance
57:56 Outro
#ElementorWidget #CustomWidget #PHP #JavaScript #WebDevelopment #DynamicWebElements #ElementorSettings #EngagingWebDesign #Tutorial #WebDevelopmentTutorial #LearnToCode #WebDesignTips #CodeNewbie #WebDevelopmentForBeginners #LikeAndSubscribe

[@gnbtamusic]

this is super helpful! thank you for this tutorial

[@debelserarne]

Glad it was helpful!

[@AidanJoyce]

WOW - superb video. how on earth do you only have 103 subscribers !!
Top quality explanations and presentation of what it says on the tin (YT thumbnail) wish more did this.
thank you for sharing, will have a look through your entire channel now - cheers

[@debelserarne]

Love that, thanks man! The reason my sub count is so low is because this is a niche, not so many people to reach & my uploads are not to frequent :D

[@jaceweyant7418]

Hi! Thanks for the amazing video! I’m having a problem where my code editor is not recognizing the wordpress functions and classes like add_action() and such. Any tips?

[@jaceweyant7418]

it seems like i did successfully install @wordpress/scripts but its still not finding the functions

[@debelserarne]

Hey there,
You might find the answer to your problem here, by using the WordPress stub, VScode will recognize all internal WordPress functions; stackoverflow.com/questions/59890854/vs-code-highlighted-all-my-wordpress-function-name

[@samikammoun2158]

thanks for the tutoriel . where can i find the source code please

[@debelserarne]

Hello Sami,
Per your request, the source code: github.com/ArneDeBelser/standalone-slideshow-nav
I will also add this to the description.
Thank you

[@salahaoued7985]

Hello awesome tutoriel. can you drop us your website or email

[@debelserarne]

Hello, thanks, my website: arnedebelser.be