 After learning all the basics of our Elementor and how it works, I feel like we are 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 are 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 which I'll call this the TechiePress DonateButton Widget. 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're going to notice about writing widgets in Elementa 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 altogether. 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 going to start creating our classes inside our Elementa. First of all we shall add some security and say if it is not defined, if abs path 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 a final and we'll call it a take a press Elementa 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 a zero one as we listed here inside our plugin we 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 Elementa 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 we are doing the Elementa plugin 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 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 way to 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 would be methods so we shall use them in the methods that are going to come to test and throw messages or error messages in the backend 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 singoton now to explain what singotons 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 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 fun 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 I'll call public function and we're going to call this get instance and inside here we're going to run particular pieces over 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 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 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 take you press elementa 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 we shall call internationalization i18 I miss the word function here now that our method is proper we are going to use an inbuilt method of wordpress which is called a 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 a need 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 that 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 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 in it 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 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 are 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 are 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