 Welcome back to the channel. This is my favorite code editor, which is a VS code, Visual Studio code for short. And one of the things that I love about it is that you're able to extend whatever functionality you want in here. For example, if I wanted to do short codes that I all use over and over from different computers, and I find that sometimes it's useful. So I don't keep those snippets to myself. So I write actual extensions for them. So you're able to go to your extension spanner here, and you can quickly install a particular extension and then use it for your daily work. For example, these are some of the extensions that I use every day. Now today, we're going to write an extension for Elementor, which is one of the biggest page builders in WordPress land. And that's a project I've been working on and then Nintendo and growing and making it bigger and adding more short codes. But I want to show you how you can write your own extension using this as a start point. So the first thing that you need is you will go to the docs of a Visual Studio code and we see that we're not doing Visual Studio, we're doing Visual Studio code. So you go to the docs of a Visual Studio code and you will go to the API. Under the API, you're able to see requirements that you need to start writing your extensions. So the first line of code that we need is actually we're going to use Node.js. That's why we have the npm here. And then we're going to use your, which is packaged for npm node. And then we are going to use the generator code, which is for the VS code extension generator. So everything is automated in a way to make this really easy for you. So we'll need Node.js, we'll need your man, and then we'll need to have a VS code extension generator. So the first thing that I need to do is test for Node. So I go for Node, dash V, and I have Node installed here, but if you don't have it, you just need to go to Node.js.org, download the version that's suitable for your operating system, and then install it like any other program to have it installed. So after installing Node, we're going to install your man and the VS code generator on our computer. So the first thing that I need to do here is just type npm install dash G to have it global. And then I'll add the extension of your that I want to install. Then we need the generator dash code. We need generator dash code to install it. And then we'll run this. So this will take a little bit of time. I'm just going to move to the end of the progress. This should be automated. So you don't have to worry about getting any errors. Unless you do, then you run them by Node.js to see why you're having those issues. So I'll wait for the end of this. So you can develop a number of extensions, and we have some code samples here for us to see. Some will be in a JavaScript or TypeScript, and others will just be short snippets of what we are going to actually build. So in this particular case, I want to build an extension that has snippets so that when people type them in their PHP files or JavaScript, I about to just get a code block that they will edit and reuse over and over and over again, sort of make templates of code. So after everything, our npm packages are installed and we are ready to actually go. So the next thing that we're going to do is go into our folder here. So for example, I just want to store my files in this file called VS extensions because I want to keep them centered. So I'll change directory inside those. So while I'm inside there, I'm now going to begin working on my extension. So the first thing that I need to do is type your code, which will give me the bootstrap of writing an extension. So I'm going to answer just a couple of questions to help me get through this whole process. So I don't want to share any anonymous reports. That's why I chose no. Now we're going to do a code snippet. You could do a color theme or language support, but we're going to go for a code snippet. So that's what I'll use down here. And since it's new, we'll not add anything. We leave it blank. And then the name of our extension is going to be Elementor snippets. And that will be the identifier. Adds code snippets. Go building Elementor widgets. And then the language I'll add PHP and that will allow us to create everything that we need. So we just need to go into Elementor dash snippets, which is our folder. And then we can open it in VS code. So we type code dot. So in here, we're presented with a number of files that we don't really need to edit. Some will do edit later. But for this, we don't need to edit now. We have a file open for us to add our snippets. The change log, where we can write all our changes, our package of JSON. For now, I'm going to change this to 1.18 as the engine that I want to run. We'll add a couple of other things as we get to publish the whole package. But for now, let's just head into Elementor. And we'll just see what let's say something that we need to add as a widget. So I'll go to Elementor. And I'm going to look at widgets. And I'll go to the controls. So in the developer panel, the one thing that we probably wanted to add is how to add controls. So I'll just copy this. And then when I come here to my Elementor, I'm going to go into the snippets codes here. And I'm going to add the first thing that I need is a name for this. And I'm going to call this add text widget, add an EL to it for Elementor for short. So we add the ID for our snippet. And then we're going to add these calling brackets here after. We shall need a prefix. So we need to add a prefix to this. And the prefix in most cases, I'll just duplicate this because it's about the same thing like the ID. Then the next thing that I'm going to add is we need a body. And in here, you can see it's already telling us what it's expecting. But we saw a number of things here. We saw something like a description which we can add. So we can say add a control for our text widget item. I can just call that there. And then the next thing that we need if we can add a scope, if we want to and say this will only be in PHP. But we can also add the scope directly inside our package to JSON where we add language PHP. We can have others for JavaScript and so on, depending on the particular snippet that we're bringing in. So I'll not add the scope at this place, but rather I'm going to add the body. Go back to Elementor. We're going to copy our text field here. And then I'm just going to come and paste it inside the body at this point. So I'm just going to use my VS code to help me fix this really quickly. So I'll select this, use control shift L to go to the end, add the first bracket with a comma. And then I'll go to the beginning and add the opening bracket. And this works out well. The only issue we have is these brackets that are not well closed. This is a namespace for Elementor that's needed. So we need to escape this slash that we actually see here. We need to also add a slash at the end for this to make sure it is well escaped. So we have our body, we have our description, we have our prefix, and everything is going on well. So let me test this. Now for us to test this, we just need to press F5. And this will open for us another instance of VS code. And we are going to first save this file as PHP. So I'll call it index PHP to allow us to test this because our new extension will only work in a PHP environment. So in here, if I type EL, you will see that we have EL underscore. And as we add text widget, we see the description we gave this, and we have our code. So when I just type that, we're able to get all our code showing up here. So we'll edit this and just make the changes that we need to make. So this is working out beautifully for now. Let me just go back here and I'm going to add a few things that will help us to change. Let's say if we need to change the name here for the plugin and the text widget. So what we do in this case is we add a dollar sign and we add two curly brackets. And then what I'm going to do here is add a one for it to be the first item we'll edit. We're going to call it a control name. And we're going to just copy this again here, change it here in the plugin name. I'm going to give it a position of two. And this is what is usually our text domain. So I'm going to change this and call this text domain. So we have this set up going to just press F5 again. So when we open that and let's say we are working in our PHP and we need to add our add text widget when we add it. You'll see that this is already highlighted for control name. And I'll just say text control. And then the text domain is going to be taking place. So that's how we save all our instances of snippets. So if I want to add another snippet, I'll just duplicate this, add a comma at the end here, then I'll come back to what we have here as our base. And I can even just get the whole text control class or even just get a selection control, I choose control. We can add all these classes inside our snippet so that we can always have them whenever we need to. So I'll just add this control here, which is for a slider. So come back, go into the body, check this out to make sure it's clean. And then we'll just change a few of these pieces and say this is slider underscore. And then I'll come back, check my code, go to the end and our closing bracket with a comma at the beginning, add our opening quotations. We didn't add this to this point. So I'll add our quotations here to the comma, go home, and then add the opening quotations. And for this last piece, I'll remove that dash, I'll remove this dash here as well. Come back and escape this as well as this and save. So we have a couple of problems that we need to flick. That is because in our body here, we opened and then closed this wrongfully. So I'll save this after making those changes, press my F5 to test. We can test again and then say we'll add slider and then we'll get the full code edited here. So we can this dynamic and this dynamic. And you'll see at the part where we escaped our strings, we still have our slash coming in. So we don't affect the namespace of Elementor. Now, this is just a sample to show you what's happening. I have the full code of working on this on my GitHub, which is here. So we got Bahira Elementor snippets, and you can make a PR suggesting any new snippets that you want to have in that Elementor snippets. The reason why I would ask for PR is because I'm just starting this project and I just have few hooks and controls and categories that I've added and main classes. So those would be helpful. The next thing we are actually going to do is actually publish our snippets. So we'll close this off, open our snippets. We're going to package our extension for publishing on the Microsoft website. So we'll come back into our snippets folder here. I'm going to overwrite all of this by testing. Then I'll explain what everything does. So we have our name here. We have a display name that usually shows in the extensions part. So if I go to this, this is the display name that we're talking about. We have the description which shows up or is here at the bottom. Then we have a version number that will show all that helps VS Code to track whether they should update the package or they should ignore it because you have the current one. The engine I've chosen for VS Code to be 1.8, which is a good version. Then you add the publisher name. Now this publisher name, you get it as you register one account with Microsoft. So you're going to go to the extensions. You're going to go to markettests.visualstudio.com slash VS Code. And then you're going to actually sign up. But in my case, I'll be signing in two into my account. So you can sign in even with your GitHub. I can now always open this with my GitHub easily. So in here, we shall publish our extension. But let's first go and finish up. So we add our author name, which is my full names, but the publisher name, we actually get it when we set up our account. So we add a license for which we are releasing this. We add a home page for our site so that people can always click and go to see where they can file issues. That's why this bugs is here. We see also the repository. So I just set up everything on GitHub to make it easy and manage. Then we add an icon. This could be a PNG or whatever it is. And you will see that inside here, I need to create a new folder called images and add this particular logo in here. Then for the keywords, this help for the person searching for the extension to find it. So you put things that are as close as possible to your particular extension. So you add the keywords here and separate them with comas. The category is that it's a snippet. So you leave that fine. And then you can always add extra files of snippets by just duplicating this and then adding a comma, rename this, and then add those other files inside your snippets here with a different name, of course, at the end here. Or you could group them depending on how you want to do your file structure. So undo that and save. So this is what you need all in all. Now the next thing that you need to do is come back to the docs here and say, I am now ready. My snippets are working well. I've tested them with pressing F5. Now I am ready to release that extension. So you come to publishing your extension. The first thing that you need to do is again to install using NPM, you install VSE, which is going to help you to register your Excel. Come back NPM install dash G, VSE. This takes a while. So I'll fast forward to the end. And then that is done. When we come back here, we are already logged into the directory of our snippet. The next thing that we are going to do is we're going to type VSE package to generate a file for. So I'll do the VSE package. So you always do this whenever you're making a release of your package. So just change the version. If you update something, either it's a minor change, a major change, just a simple versioning. So you make the changes here and then you come and do VSE package. Once you hit enter, you'll see that they ask you to make an edit of your readme because by default, they have scanned and see it's the same. So my readme is still the same. It's default. I'm just going to paste some things here that I had worked with, save this, then come back and do the same thing, VSE package, click package. And we'll see they're telling us, of course, this is not there. The extension dash images is not there. So for now, I'm going to need that to be working. So come back here, copy this, come back and create a new file, press 13, press enter. And let's assume that is working fine. You can put a PNG file in there. So I'll hit enter. And you will see that we have a release of our file here. So I'll open this in my folder. I'll win it in the Explorer. And then come back to our Microsoft and we'll click publish extension. And when we come in here, we have an option to add our new extension or to actually update. So we'll click new extension, click Visual Studio Code. Then we're going to grab this drag and drop our file in here. And once we are done, we click upload. So when that is uploaded, we'll see that our extension is actually showing up here. And then the public is ready to consume this particular extension that we do have. So when we go to the marketplace and research for Elementor, just searching like that, we'll actually see this showing up and it will show us the number of people who are using it. When click on it, we'll see what we saved in our readme file. We're able to see what reporter issues, where the repository is found. We can download this direct. Everything is set up for us and it's that easy to install. The other way you could find this like extension is by going to the extensions panel inside your VS Code, search for Elementor. If it is the one that you want, and then you'll just click and install the plugin right there. And then this will be ready for use. And you can use it to develop your Elementor widgets. So thank you for watching this video. I hope to see people make more widgets that are helpful to others. And check this out, download the Elementor snippets. If you're a WordPress developer, like I am, you can just check out the classic press. I've loved a classic press snippet that allows you to just have WordPress snippets there for you so you can have the auto completions. Like for example, if you want to start up a new plugin, this gives you the small starter that you need to go right ahead. So let me know if you're using these extensions, if you're developing your own and share with your friends the video. Give a thumbs up if you found the video very helpful and leave a comment if you have any questions.