#1 Structure - Build Custom Elementor Donation or Payment widget

After learning all the basics of our Elementor and how it works, I feel like we’re in the position to actually make our own widget that we shall add here so that when someone picks it and drags and drops it in here, they should be able to get a button, they should be able to get a little box here that maybe they could fill in their phone number if it’s a mobile payment, it could be paypal payment or whatever, so that when they click on that button they are able to initiate a payment going straight into your account. Let’s say if you’re an organization like an NGO, or you’re looking to raise funds for whatever goal it is you have in mind, or it could simply be buy me a coffee for reading my blog. So if you’re interested in learning how to create your own widgets, this will definitely be the series for you. We shall be integrating our button to work with an external API, and that will be the difference with the button that we do have here. So let’s jump into the code for that. So I’m going to open up my plugins folder inside my WordPress install, we shall call this the “techiepress donate button widget”.

01:17 - We’ll drag this folder, drop it inside our editor, and then once we’re done with that we’re going to open up our file, we’ll give it the same name because WordPress plugins usually do that, it’s the best practice, and then we’ll create that file which is in php, and then we’ll start off with our php writing in here. So the first thing that we are going to notice about writing widgets in Elementor is that you write them in OOP or Object Oriented Programming. Now this allows you to have multiple files inside your plugin but each one doing a different widget all together. So this series might be a bit long but it’s going to explain the nitty-gritties, so that you can be able to do so many other things without asking so many questions, or when you run through the documentation it will actually be clear for you. We’ll start off by writing our plugin comments that will allow us to add our plugin to WordPress, and that will be good for us to begin with.

So once we are done with this we’re 02:25 - going to start creating our classes inside our Elementor. First of all we shall add some security and say, if it is not defined, if ABSPATH is not defined, so we are basically saying if someone tries to hack this page directly, we should just exit. So this will be the security that we are adding in. So now we’re going to begin coding in OOP and our first class we shall add the keyword final, just to show that there is no other class that is above this level, this will be our last class that we’ll add, and we’ll have it called final, and we’ll call it our “Techiepress Elementor Widget”, and that will be the class, and then open the brackets here to add our content. And the first thing that we shall do is we shall add a constant which we shall call version, and this will allow us to name our version and we’ll say this is 0.

1 as we listed here inside our plugin, we 03:35 - want to make sure that we are at the same page here. So the next thing that we need to do is also add another constant, and we shall add the Elementor minimum version, and then that version will be of course we can choose, right now it is 3.0 which is the latest that we do have, but we can choose to have something else, maybe 2.9 depending on how we are programming or what code we shall be using inside, because while while we’re doing the Elementor plug-in we adopt code from the core of the plugin. So it’s important for us not to have things breaking when someone uses it.

And the last one I’m just going to 04:19 - duplicate this code and I’ll add the “php minimum version”. So you might want to use different code that’s compatible only with particular versions of php, and it is good for us to declare our minimum version of php. Right now WordPress supports all the weight 5.6 which is the minimum of php, but you could go with the core of WordPress, or you could bump yours up and say I’m only going to support up to 7.0. We’ll save these constants and then we shall use them in the incoming methods or functions.

In object oriented programming there 05:00 - will be methods, so we shall use them in the methods that are going to come, test and throw messages or error messages in the back end of our site. So this being a class we shall have methods in here that are very important. For example I’ll use a public function which is going to take in the construct that will be called whenever we initialize our class, and in here we’re going to have our initialization of the plugin, and then we shall have another function which we’re going to call “init controls”, and that will allow us to work with the controls, we shall bring in all the controls that we need in our plugin. And then we’re going to also have a public function “init widgets”, and init widgets will allow us to bring in all the code inside our class right here. But right now I just want to make this a class that provides only one instance, it has to be what we call a singleton.

Now to explain 06:05 - what singletons are I’ll use Microsoft excel as a program. So every time we open Microsoft word, we realize that there are resources that are repeatedly used over and over and over again. So it would only make sense to have those resources always available, and then call in the particular pieces that you need to come in once in a while. So what does that mean? We have this menu bar that is here right at the top and it has all those functions that are used over and over again in different worksheets and workbooks, so making them available will reduce on the load that the computer has to do in terms of calling those pieces that are the same. So you’re only calling them once and then they’ll be repeated all over through the whole software.

So 06:56 - whether I open an old document these pieces will be available, and if I open a new document you’ll still see that these pieces of the software are still recurring and are open for us. So if I close all those pieces you’ll see that these resources are still available, and our computer is not running the fan and the processor in overload. So similarly when we are writing code that’s what we are expected to do. Now we also want to have only one initialization of this particular class. We don’t want this class to be called every other time that it is needed, we want it to give us the same version, the same php minimum, it has to give us these same methods without having to be initiated over and over again.

So with this in mind, I’m going to introduce another function which 07:52 - I’ll call “public function”, and we’re going to call this “get instance”, and inside here we’re going to run particular pieces of our code. So I’m going to first initialize our class, and then we’ll have to make this a public static, so that I can quickly just use these two dots, then add get instance and then we shall run this piece of code. So in here we shall have a private static variable, which we’re going to call instance and it will be equal to null as a value. Now we’re going to reference this inside our particular get instance class and we’re going to use it right here. Now what do we have to do inside this method? So we are going to say if this single instance is actually null, so we’ll say equal to null, so if it is equal to null, and we’ll have to call this inside the self, so we’re saying inside this class, this instance here that we’ve called, if it is equal to null, then what we are going to do is we are going to reset it, so we’ll say self of the instance is actually going to equal to a new object.

So we’re going to open a 09:12 - new object of this particular class and set it as the instance that we have here. So after setting this instance as the call of this class we’re going to return the current variable of the instance, and at that point it’s actually going to be this class that we are calling all over again. I’m going to save this, I’ll go to plugins, and I’m going to see that we have our Techiepress Elementor widgets here, and I’m going to activate it, and that will show us that nothing is broken we are on the correct path to make sure that all our code is actually going on well. So let’s go back into the code and do some more coding. So now we are going to actually have our plugin translatable, so let’s do this from the onset.

So we shall have a public method which 10:02 - we shall call internationalization “i18n”, I missed the word function here, now that our method is proper, we are going to use an inbuilt method of WordPress, which is called load plugin text domain, and the thing that we shall pass in here, we need to pass in this text domain that we have here. So I’m going to copy this and then bring it and add this to our code right here. Now in order for this to work, we need to go to our construct so that when we open up this instance of our class we’re going to just add action, so on init of WordPress, we are going to call this particular function. So we add it in an array, since this is object oriented programming and we’re going to use the “this” keyword and then we’re going to make mention of our method. Now if you’re using php that is modern you don’t need to have this word as array, since we have said we’re going to have php 7 as our minimum, I’m going to just change this, and then we shall just have the square brackets right here. This will also work in php 5.

6, 11:17 - that’s why I wanted to have the correct version of php so that it matches the code that we shall be using. So that’s it for adding internationalization or allowing for our plugin to be translated into different languages. We’re going to duplicate this line of code, and I’m going to check, when the plugins are actually loaded, so this is the hook that we are using down here, when the plugins are loaded, then we should initialize our plugin, so we can say init plugin. So we shall have this method that I’m going to actually add down here. So I’ll duplicate this piece of code, and then I’ll rename this particular method.

And we say what 12:02 - do we want to have here? we want to check if we have the correct version of php, we’re also going to check if we have Elementor installed, and then the next thing that we need to do right here is we’re going to bring in the widgets classes, and then the other thing that we need to do is also bring in the controls. So this is what we’re going to do next. Now that we’re at a point where we have to work with the core of Elementor to bring in different functionality, I want to explain the concept of hooks and classes that give us much more in terms of resources that are well written from the core of Elementor. So I want us to pick those, use them in our plugin, so that we don’t have a lot of redundant code where we are reinventing the wheel, and at the end causing our client to suffer from slow plugins, and also just using code that is not dry. So in our next video let’s see what hooks and classes are. .