 Welcome back to this video. We are going to continue building on our plugin and building our widgets from this very setup and I hope that you learned something from our action hooks and filters video that was previously shared. We are now going to get this particular class which I am now going to call widgets, take-a-press-elemental widgets because we want to build a number of them and even here I'll correct this so that we have the right class and this class is using this method of getInstance. Now this getInstance method is just getting a unique version, it's just getting this particular class and calling it once. The only issue we have is that we have not returned the self instance right here of this particular class and I'm going to go into this sample page, it's the one that we're going to use to edit in Elementor, of course it opens up with Gutenberg but I'm going to click edit with Elementor and that will allow us to go into Elementor itself. Now you'll see that we have a number of widgets that are here like in the basic, we have the pro versions and this these are not active, I cannot actually drag them because I don't have the pro and you'll see that one of these menus that I would really like to use in my page as the nav menu are actually not available for me to use so I'm going to build my own custom nav menu from this onset so that will allow us to drag and drop that widget let's say from our panel right here and drop it in here so let me go back to the code and this is what we're going to do so for now we're going to ignore these rules that we are supposed to work with and try to just build something basic and then you'll see how eventually we get to build our plugin and make it a little bit bigger and do a couple of things so the first thing that I'm going to do is that I'm going to come here in our plugin and I'm going to create a folder which I'm going to call widgets for now okay and inside these widgets we're going to create a new widget file which is going to be a PHP file and we're going to call it the nav and dash menu dot PHP that would be our file that will store our widget for our menu so in here we have the widget code for the Elementor nav menu so I'll even say Elementor or custom Elementor nav menu I'll save this that's just a comment to tell us what the file is about and inside that file we're going to have a new class which we're going to call nav menu and what it will do is that it's going to extend the widget base class and this widget base class actually comes from Elementor and it will give us a number of things that we are going to see and use inside this very file that we are working and you will see that on line three my editor has actually added the nav space for me automatically so the first thing that we are going to do inside this class is that we're going to have a public function and the function which is going to be get nav and you will see from my editor that's telling me that inside the Elementor controls stack there's something called get nav it's an abstracted method that we are using here so we're going to add that right here and then I'll add of course my brackets and in here we're just going to return and say the name of our particular widget and we shall call it custom menu or to make things a little bit nicer we shall say take a press shall call it take a press menu that's the first thing we need to do we are naming our particular widget now as we extend this widget class you will see that my editor has already pulled in this class from it had said we need to use the Elementor widget base which is basically saying we need to go into this nav space of Elementor and we're going to get this class called widget base so this is a modern way of working with PHP it's called using namespaces and I have made a video about this if you want to see what namespaces are you can check out the video that is in the description right below and you'll be able to understand how namespaces work in fact we can also add our own namespace right here in our plugin so that we don't have things that are conflicting so I'm going to add a namespace and I'm going to say take a press and I will say we are going to be making take a press Elementor widgets so that will be our own namespace in case we want to use this particular file in any other place so let's go back to creating the nav menu so we have now a name for our widget the next thing that we need to do is we need to get a title so we get a title and say public function and we're going to say get underscore title and inside that we're going to say we need to return and here I'll just get the same thing and say let's get the take a press menu paste it there we can actually use the internationalization at this point because we want people to maybe we want to change the take a press menu into a different language and we want to see people in France having this in French want to see people in Italy have this in Italian we can do this and then we can namespace it with our particular text domain that we already announced here in our first file so I'm going to copy that and I'm going to paste it here and you'll see that I actually made a mistake here when I was returning the get name this is supposed to be more of an ID so I'm just going to put everything in lowercase and put a dash and correct that so that we don't have this breaking now the next thing that we need to do after getting the title because this title is what will be shown when we come here you'll be seeing that name there the next thing we need to do is if you look at this widget is that we have things like icons right here now I'll come back in here and I'm going to say public function and I'll say get icon which is a method coming from Elementor as well from the widget base you'll see that that's available for us to use now Elementor has a number of libraries inside it for example we can use font awesome we can use things like the icon library and that will allow us to have icons that are linear in nature that just more like line art like this or we can actually use something like font awesome so in here we're going to return and you can return something like FAA menu and that will allow it to use font awesome and use a font awesome menu so I'm going to comment this out and we shall see in the near future once we are done we'll be able to compare the two and see which one looks better so in here I'm going to use something like icon nav dash menu and that will give us something that is similar to what we have here in the pro version of the nav menu and I am picking that from Elementor itself now after adding our icon the next thing we're going to do is we're going to go and make a public function and inside there we're going to use the get categories which is a function also coming from this widget base class and we are going to add the name of the category that we want so in here we return of course and here when we are returning we return an array and inside this array we have a number of options we have something like basic we have things like general and that is coming all from Elementor we have basic we have the pro we have the general we have things like site wukamas and wordpress so for now I'm going to choose the basic because I want it to appear right here so I'll choose the basic we can later on just check this out to see what it will look like in the general or in all the other sections of categories that we do have and we can actually be able to make our own category like you will see all these other six options we have here let's say we have a bunch of widgets we can make our own take a press category right here and then we'll be able to add our each widget right there and I will be able to show you that so let me leave here a little to do comment and say to do add our own category in Elementor so for now we leave it in the basic and then the next thing we are going to do is we need to go and tap into the next method so say public function underscore register control it will allow us to register the controls of the particular of the particular widget for example if I go back in here and drag and drop this right here you will see that we have these particular things like content width box columns gaps height and so on so these are controls that we can add to our particular widget and we're going to leave that method there so that when we have our own widget we'll be able to add a number of controls in there and then finally I'm going to just use a protected method here and say we're going have a function we're going to say we're going to call this the render method and that render method will allow us to output the widget on the front end so that's what this method is for and then similarly if we have this on the front end we're going to have another method which is actually called the content underscore content template this particular method allows us to render the widget on the back end inside our elemental right here so for example in the drag and drop this image you'll see that this is being rendered right here and that is because of the content template method that is passed on inside this widget best class now that we have all these things put together what is needed right here I'm just going to make sure that we have this file being called inside our main file so I'm going to come back here to the init widgets class and there are two things that I need to do one is I need to require widget class that we've created then I need to register the widget with elemental so those are the two tasks that we need to do inside this particular file and then we shall pass this method inside our init plugins inside the widget classes we can do all of this inside one function but it will become gigantic so that's why we actually just get this little method and will break out so that we can separate concerns so at the end of the day I will say this class let me pass in this method right here and that will allow me to do the different things that we have here and then pass them to this method so the last thing that I will do is that I'm I'm now going to add our own namespace in this file because we already had this namespace here starting for our plugin I'm going to add the namespace right here as well so I'll add this take a press elemental widgets and then inside that I'm going to use the psr for convention and I'm going to say we are going to go into the file called widgets and inside widgets is what we're going to find this nav menu class so I'll save that and then I am going to just copy this I'll clean this a bit and then I'll come back here into my space and then I'll say we need to use and what we want to use is this namespace of take a press elemental widgets widgets and we're going to be looking for the nav menu class so I'll save that and then you're going to say that when we come down to our init widgets right here we're actually going to use that particular method first things first is now I'm going to require the widget class and I'm going to say let's require once which is a php function and then what we're going to do is we're going to say let's get this directory that we are in and we are going to add quotations and a slash since we are in the root folder we're going to go inside the widgets folder and inside the widgets folder we're going to get the nav dash menu dot dot php file so once we've required that file I'm going to save this let me come back and reload just to make sure we've not broken anything and you'll see it's telling us and code class we have elemental widget base not found in our file so one of the things that we need to do is just go a little bit ahead and we'll be able to clear this so I'll come back here and I'm going to go to register the widget with elemental now the first thing that I need to do is I need to go to the root and I'm going to find the elemental class and then inside that I'm going to look for the plugin class and inside that we're going to get an instance we shall use the instance method on the elemental plugin and inside that we're going to say let us get the widgets manager which is a function which is a method and we shall chain on and say let us also get the register widget type and inside the register widget type we're going to create a new instance of our nav menu class and once we do that and hit the semicolon right here we shall have registered this widget with elemental so let's go back to our front end I'll reload this and this issue actually comes in from a very simple hook that we've not added in so inside my construct method right here we're going to come here and add an action and inside this we're going to need to add a hook which is elemental slash widgets slash widgets registered and that's the hook we need to have and we're going to pass in the we're going to pass in that very method I'll copy this paste it here and the method we need to have is init widgets and that means we just need to remove this line right here because we are calling that particular class right here so I'll save this and then I'll come back here and I'll reload and you'll see we have line 33 we need to close this with a semicolon we'll save go back to our webpage and reload we reload here and you will see that now our widget is actually coming out and you will see that we have our take a press menu showing up right here we can drag and drop in the instance here it has nothing to it nothing in the advance but we have our widget and it's showing up so that's what's really important right now and now that we have our widget showing up here I'm going to just click update and then I'll try to preview this and you'll see that we have nothing showing up here because we don't have anything rendered out at all so I'll come back to my editor right here I'm going to go back into our nav menu and then I'm going to go inside the render here and I'm going to escape the php and open up php again I'll copy this as well and just paste it here and we're just going to have something very simple which is a div and that div will say hello widget hello widget copy the same thing paste it here tab it in to just look nice and then I'll come back and reload this as well as reload this and you'll see we have our hello widget here not editable in any case but also we have a hello widget on the front end so I'll come back in here and start doing stuff that is really necessary but before we go to do that I just want to clear out some of the things that we talked about earlier for example when we talked about the categories right now when we go back to the widget section you will see that we have our widget showing up right here but if I change that to the general hit save I'll reload this page I'll scroll down to the general section and you're going to see that we have it here and we can actually drag and drop it here so you can add it to any of these sections and we can have our widget stored in any of these categories by going to our code and changing categories option through the different IDs that have been given to us like we can say pro dash elements we can use the wukamas elements or general or basic and you can be able to do that and by using any of these right here let's say you change this to pro elements and paste it here and save you should be able to get it inside the pro elements category so I'll reload this just for us to see what's happening and when you're going to the pro category section you'll see that we have our widget right there we can try it in the watpress section save this come back and reload we'll scroll down to the watpress section and then we shall scroll down and you'll see that we have it right here and we can drag and drop it so you can add your widget to any of the categories that are available and rather you could even make your own and that's what we're going to do in the next video if you found this video very helpful don't forget to give it a like subscribe to the channel or even share it with your friends I'll be continuing this series to make sure that we can complete it and this is going to take us maybe the next few weeks so I'll be releasing one elemental video every week so that we can complete this series otherwise thank you for watching and enjoy whatever you're developing