 Welcome back to the channel. In today's video, I'm going to show you how we'll move to make our menu into something more usable other than just having this handle widget right here. And we're going to use some native stuff coming from WordPress and just passing them in. We shall do some PHP, we'll enqueue some scripts and we shall enqueue some styles. If this is something you're looking at doing, then stick around for the video. Watch it till the end. Share it with a friend. Don't forget to hit the like if it impresses you. And if it's not what you're looking at, then check out all the other videos that I've made about Elementor or the other topics on this channel. So right now, when we drag and drop this widget, all we get is a hello widget and that is because in our code, so I'll remove these comments that we don't need anymore. First and foremost, I'll save that. And the next thing that we're going to do is of course we're going to be using this render method and we're going to use this content template as well. So first things first, so I'm going to go to the WordPress codex, codex.wordpress.org. And then what we're going to be looking for is how to use a menu that's coming from WordPress itself. We'll get this wpinup menu and that's the function that we are going to use in our own plugin. And that will allow us to use the default navigations menu that we get from WordPress. So if you look in here, you will see all the different parameters that you need to work with the WordPress Nav menu. For example, you need anything before the text of the link. You need to add a class to the container. You need a container itself. You need to have a menu ID, a menu class and all of that. So we shall be able to use all those things. And then you're given what kind of styles you can use for your particular menu right here. So I'm just going to get the WP Nav menu and I'll use it to say we need to get maybe a theme location or we can use ABCD. But for now, we just need to get the WP Nav menu, which I'm going to come back in here and say, let us just get the WP Nav menu and I will say echo. And we're also going to do the same thing for our renderer in here. Remember that this is for the backend. We use that on the backend and then this renderer is the one that appears on the front end of the widget. Wherever we place the widget, that's what will be shown on the front end. We're going to be running the echo nav menu. So I'll save this. Let's come back here. And then we're going to reload this. And you'll see that we actually just have the default menu coming in. I'll delete this, go and look for our menu again. Take a press menu, drop it here. And you'll see that it just has this sample page menu and that's because that's what's coming by default. So I'll go back to my YouTube. I'm going to go into the dashboard. I'll go to appearances and then go to menu. And you'll see that there's no particular menu being shown. And I'm going to say, let's have this as the primary menu. And I'm going to hook it up into the primary menu location. I'll click create menu. And then I'm going to add a number of items. So home, sample page, add those. Go to our posts, add the hello world. And then I'll click save. If we come back to our sample page and click reload, you're going to see that our menu has home page and hello world. And it still has the hello widget in here. So I'm going to just remove those because I don't need them. I'll save that. On reload, you will see we still have our menu. Even in our Elementor, you will see that we have our menu right here. Now, I should be able to, let's say when I click on this menu, I should be able to have an option for me to select a particular menu that I want to use. I don't want to depend on the massi of WordPress to show me which menu I should be using at that particular time. So in the menus right now, we have chosen the location of the primary menu right here. But we can create our own location if we want to. But that can limit. Let's imagine someone wants to create one menu using a widget that is primary location. Then in another location, they want to use a footer location. We don't want to limit them. So in that particular case, it would be good to just have something here as a content tab and then have a choice of menu picking up that we can choose a particular menu from right here. So that's something that we are going to deal with. But before we do that, I just want to be able to actually enqueue some styles to our menu. And what do I mean by that? So that when I inspect this element and we go to this menu that we have here with all of this, we should be able to have a particular style added to this. So in our code right here, I can actually use the WordPress given examples where we're going to have a container class or a menu class. So I'll call this menu class. I'll come back here inside the menu. I'll add a menu class. We'll tag there and say the menu class we want to give this is going to be take a press menu. I'll copy this so that we also put it down inside our content template. I'll save this because this needs comas to just keep the WordPress standard. And the only challenge we have here is that we are supposed to make sure this is an array. So I'll add array in here and then I'll push this down, push this up, save it. And now you'll see that my editor stops screaming at me because I have made the corrections to the error. I'll save this and you'll see that that works out. So I'm going to come back here, go to my sample page, I'll reload this. And then you'll see that actually our menu in here has a take a press menu for a class. So that can allow us to actually target and do style it in the way that we want to. So I can even strip using this WordPress I can actually strip and say this should not have a container. I'm going to copy this and then I will add this here and then I'll just add empty strings and say we don't need a container for this. I'll do the same here, save this. Come back here in our font page. If you look at this structure right now we had a menu primary container. If I reload this and inspect this particular element you're going to see that we no longer have that container. We just have our UL or our one ordered list with that take a press menu showing up right here. So now we can add our scripts and our styles to that. What do I mean in our plugin here? We're going to come back and create a new folder which we shall call assets. And inside assets, I'm going to create a menu.css which I can create inside a folder as well. Maybe we shall have some JavaScript. So I'll move our menu inside there.css I'll create a new folder which I'll call JavaScript and then just I'll create a new file which I'll call menu.js Maybe we'll be running some things on the menu.js So inside our menu here I'm just going to say console.log and I'll say our menu is running Of course I need to put this in quotations since it's a string put a semicolon at the end so that we can run that. I'll save that. And then inside our menu here we're going to target that take a press dash menu and then I'm going to just say let this have a background color of let's red it will have a color of white after doing that we need to get all of this I'll duplicate this and say our take a press menu should actually be with a display of inline block and then maybe I'll pass that on also to the list items and say let's get there I'll just say let this have a margin of zero, top and bottom and then we shall have 20 pixels left and right so I'll save this and if I come back and reload you'll see no change and that is because we've not yet loaded our scripts and our styles to our particular plugin or our particular widget now if you come back to the code there are methods that you can chain to this so you can have a public method in this particular widget public function and we're going to say get and you'll actually see that we have a number of methods being shown to us right here and in here we shall use the get style depends which is a function that we shall use and we can also use the public function or public method which says get scripts script depends now these expect you to return something like this right here so copy this and paste it in here and we're just going to have take a press dash javascript for the javascript depends and then I'm going to clean this out and just say take a press dash menu dash css just to make these ideas a little bit more legible so we're going to have that but this is not the end of the story when we come back to our class here we can actually instantiate the construct method and say the public function we're going to have our construct method and inside our construct method we are going to pass in two items we're going to pass in the data and we're going to pass in the arguments as well this data will actually have to equal to an empty array so you can write that as an array and then you would say the arguments can actually equal to null as a data type and you can actually write this in short because we're using the PHP of 5.6 and above and just say the data will equal to that and inside that we're going to tap the parent class inside the parent class we're also going to just copy this method and say we are tapping the parent class construct we're going to use the data and we're going to use the args as well and I'll put a semi colon now the next thing we need to do is use the wp nq script and then we also need to use the wp nq style these two methods will allow us to pass in our particular files and scripts and those will get to be used here as dependencies so for starters let me use the css I'll copy this id that we used here and that's the id that should be used here let me first comment out this script and say our style will have this id and then we need to pass in this css style right here we need to pass in the path to this css file here so what I'm going to do is say plug in directory path ideally we would pass in the file but what's going to happen is that this is going to give us something strange it's going to take us to this particular file right here so it's going to take us to this file but we need to go a few steps backwards and that means levels backwards so I'm going to put two dots slash that will take us back to the level and say assets and then I'm going to put css slash menu dot css and I'll put a semicolon at the end because that's the css we want to use so I'll save that I'll come back to our front page I'm going to reload this page here I'll go to my console we've got the right plugin assets we've gone to css we've gone to menu dot css which is telling us that it cannot find this because we've used an absolute path so all I need to do is just change this to plug in directory URL and then when I come back here and reload this you'll see that we have our style working out very well it's red the colors are this and we can actually see our style is the same that we have here and what we have in our menu dot css so I just need to move this down so that I'm writing proper css and when we reload this you'll actually see that our menu is actually now stacking in the right order it's going horizontally and we can add a lot more of styles to this right here and make it cleaner and reload on the back end you'll see that our script is actually getting the same kind of treatment as on our front end now that is simply because we have the same kind of work going in the render here and also in the content template methods right here so we have the same thing running altogether in the next video because this video is getting so long I'm going to have to stop here but in the next video we're going to be able to add some settings to our menu right here so that we can be able to choose the menu we want add a couple of settings and just have them lining up all here now I'm just going to enq my javascript as well and we're going to sort of do the same thing that we have here so I'm going to uncomment this at the semicolon I will get our ID that we used here in the javascript depends I'll come and put it here paste it I'll copy this what we have here because this worked out very well and then I'm just going to change this to assets JS and I'm going to change this to menu JS right here I'm going to save this I'll come back and then I will reload this page and I'm going to go in our console and you'll see that it's saying menu is running because this is where our menu is showing and that widget is actually showing up here so that's how you enq styles inside a widget and using what press we've been able to actually add a menu into our widget and we're having things running smoothly so if you enjoyed enqing these scripts and adding them into the widget please give this video a thumbs up don't forget to subscribe to the channel if you're new here I'll be making more of these videos for sharing with you and don't forget to share it with a friend now the code sample is actually in the description of this video you can check it out and see where you go wrong or make improvements or make this your own kind of thing otherwise thank you for watching and enjoy whatever you're coding peace