Add Custom Dynamic Elementor Menu Widget from the WordPress Menu Editor Screen

now in the background I have two menus stacked up in my WordPress menu section and you can actually see that these are two different menus so I want to be able to choose a particular menu at my will inside here so that's the next part that we're going to deal with inside our development welcome back to the channel in this video I want us to continue building our project where we're making a custom Elemental widget that displays Dynamic menus from inside our WordPress install now right now you can see that this is a bit painful to see but we shall fix that because we use demo colors for this but we shall be able to fix that and have it look a little better now a few things have changed since the last time we looked at this and that is I've gone inside my plugin section and I've updated to the latest element so that we make our Plugin or addon and extension compatible with the latest versions of elementa and as you can see in the edit page right now the elemental screen looks much cleaner and still we are able to get our widget working when we reload when we update it's all working well now the next step to this is we are going to change so that we don't have a static menu showing up but we have different menus showing up so we're going to add here another option that will allow us to choose the particular menu that we want want to have if this is a video of interest to you please stick around and if it isn't then look around the rest of the catalog to see if something interests you let's go back to our code and then let's clean up before we continue any kind of development so the first thing that I'm going to is look through my code to make sure that everything is looking good but our editor is starting to catch up on some issues here where we have a deprecated method from our class now in here we are extending this particular class which is the widgets manager but as you can see the method that we were calling the register widget type is now actually deprecated and if you have good documented code this is a place where you can find some of the help that will help you fix this now in this particular case we're going to have to use the register method instead of the register widget type and it will still give us the right call that we need so I'm going to change this and just take away the underscore widget type and you will see that when I H over this we still get the widget base as a class which we are extending inside our nav menu if we go to our nav menu class you're going to see that we're actually extending widget base and that is the same thing that we wanted to get in here so this is going to work well I'm going to save this let us reload load our page so that we can test it out and you'll see that in the edit part we're actually good I can drop a new menu update and reload and we don't have any errors and even on the front page we're going to be able to see our two menus showing up so that's the first step of cleanup and if you're having some issues fixing your widget in the previous video I showed you how you can also deal with the other aspects of upgrading your widget if there are changes in element itself I'm going to go to our editor and I'm going to look for the wp config file which should be at the root or at the base of your WordPress install and I'm going to turn on three different constants one is the WPD buug log and the other is the display to show me if there are any issues and I'm going to change all of these to true so that if we get any errors they should be able to show up inside our WP content folder and then we shall see a new file which is going to be called the debug log so if I quickly go back to look at this and I reload this page and reload this one if we go back into our editor we should be able to see no debug log showing up because we don't have any issues whatsoever which is good so let's continue developing our extension our I'll go inside our assets and I'm going to just do a quick clean up to make sure that we don't have an ISO I'm going to make this a light blue and then I'll change this color to a black and I'll hit save right here so that when we go to preview our demo we can actually see that things are a little bit easier to see not so hard as it was before now let's go and add some controls and settings inside our Elemental widget I'm going to close this because we don't need it anymore so that when we click on our widget to edit it we actually have more options like what you see here with our widget right now we have the advanced which comes by default with any new custom widget if you're developing in the newer versions and we need to add one of content and we shall add another one of style if we think that's the best way to go about this but as you can see you can pretty much do a lot of styling with these controls that are here so I'll show you how to plug in with those as well in the near future but first let's add our content setting right here so that we can be able to change and have different menus now in the background I have two menus stacked up in my WordPress menu section and you can actually see that these are two different menus so I want to be able to choose a particular menu at my will inside here in order to have the menu change we need to go back to our code so I'm going to go back to my editor and inside our editor I'm going to go to our widgets and I'll look for the nav Dash menu in here and the part that we're looking for is this WP nav menu that we have here inside this array we can add a menu item that requires us to have let's say the menu ID or the slag in any particular case so let's say I use the top menu in the section I'm going to copy this of course adding a comma so that we don't have an error and I'll paste it here so if I save this come back to review and reload you'll see that we have this menu it's the one now that's showing up but if we were to go and look for the demo two menu so let me go back to our editor and I'm going to change from Tap menu to the demo dash 22 which is I I I'll then open up our site and I reload this you'll see that now we have demo to starting up then the home and so on just like what we have here so when we are making that part that should be editable in our content area here we need to have the different menus showing up so let me go back to our editor and in this section I'm going to go go to the register control in the recent changes this is no longer underscore register control but it is register controls as the new method and when you hover over this in your editor you'll see it says it's used to add new controls of any type for example external developers can use this method register controls so you can have your own particular controls that you want to have let's say you've created a new one or you can register the ones that come by default to Elemental in our particular case I want us to use the select but before we start using the select element we're going to do this first we're going to say we are calling this class and because I have GitHub copilot showing up here it's giving us all the different hints it's a nice thing to have but I'm going to skip all of that I'm going to say let's start using the Start Control section so in the Start Control section we're going to register a new control section and we are going to call this the menu selection and inside this after adding our ID for that unique section we can then now add an array that will require us to have a label and then it's also going to require us to add the kind of control manager that we want to have so I'm just going to allow this to work with GitHub co-pilot so that we can see this so we have a label which is called the menu selection and the tab is going to be the tab content type so let's save this let's go and preview uh what we have so far so if I come back and reload this we're going to click on this edit and now you see we have this new section showing up to have the menu selection and we have no kind of controls settings in here because we haven't added them yet but you can actually see that there are other options that we can have so I'm going to go back to the code and show you that we can actually have another control but before before we start a new control like this we have to actually end so we're going to say this end control section because at that point we want to stop that section and we want to create a new one so I'll duplicate what we have here and then instead of the tab content tabore style which will allow us to have like a styling kind of thing menu selection style will be its ID because IDs are unique wherever we need to have them and these should be registered with underscores to make it unique in PHP and then we can say menu style I'll save this and then when we come back to preview I'll reload this and when we click on our editor you'll see that now we have content style and Advance similar to like any other widget that we can have so let's say we dropped the heading in here you'll see we have our cont content we have our style and then we have our Advanced section so now we are ready to do more stuff with what we want to have here so I'm going to just take this away CU it's now becoming a distraction and we shall continue building for the content section of our menu widget so let's go back to our code and I'll comment this out because we don't need it yet and I'll say if we need to add a style section and comment this now let's go back to this section and in between our starting of the control section and our ending we want to add a select type of control and you will see that GitHub copilot is telling me so this is a nice way to use AI to help you with what you're do and it will help us fix that immediately so basically we say let's call this class which is extending the widget base and we want to add a control now inside the control we need to have an ID and then we need to pass an array of arguments the array of arguments we have we have the label we have the type and then we have the options whereby the options that we're going to give this control menu are going to to be passed by a new method which we're calling get menus this particular method I need to register right now because my editor is screaming that it doesn't exist so let's just do that quickly and I'll say this is going to be a private function or a private method because we don't want it escaping and being used outside and again GitHub copilot is doing very crazy things for me but right now I'm going to hope you go through the code so in this particular method we shall get our menus by using the wp get nav menus and we instantiate an empty array of a menu kind of list and after having this ma we return this mail list before we do anything to it okay so we have this we have this mail list and we have this empty list so what I'm going to do here is I'm going to first add some quick things so I'm going to say the ID we're going to say let's have demo I I which is going to give us our demo to I I and then we also going to have the top menu which will give us our top menu um menu right now so this is not dynamic in nature I'm just adding it because I already know know the IDS if I go here you'll see that this method is now available for use and if I go back to the preview section and I reload this if I click on the editor you're going to see that now we have a select menu here and we have two options we have the demo two and we have the top menu now it's not helpful for us to actually have these menus when they are just added what if this widget is used on another site where we don't know the IDS what if we want to change the IDS in the back end then we need to have this dynamically generated so if we go back to our editor I'm going to remove this and I want to see what we have in the menus so the first thing that I'm going to do is I'm going to error log this and inside the error log I want us to print underscore R we should print the menus and we'll add true as an argument so that when we reload this actually gets registered in our debug log right here so I'm going to clean all of this out and I'll come back here I'm going to hit update and if we go back to our error log you'll see that we have two items in our array so we have the first item which is an object and whereby we can get the name or the slag that we need so we basically have to Loop through this array of items and then inside that we can get the slag so I'm going to come back to our nav Dash menu comment this out and we'll say every time we get the menus so for each one of those menus let's get each array to become just one object that we need so we are saying get this item from this array get this item from the array and then what I need to get at this particular moment is I'm going to get the slag and I'm also going to get the name which is more friendly to the eye so the first thing here is add the slag and you can see AI has its own faults um sometimes it doesn't give you what you exactly need but you can be able to read it helps you code faster and you can see what you need so I'm going to stop error logging and then we shall pass in our slag We Shall Pass in our name let me go back to the preview right now we had top menu and demo menu I'll reload this and you see when we come to our edit we have our top menu and we have our demo so let me update this so that when we reload here you will see that we have our demo showing up and even here what is saved is our demo so brilliant we have this actually working right the way we need it to I'll change this to top menu I'll update and on reload you're actually going to see that when we click edit we have the top menu showing up and the demo two menu is still showing up because we have not fixed some of those things in the back end and if I reload the homepage you'll see that's the same thing that's showing up so back to our code again after we get our menus these are going to be the options you might ask me how I'm getting all this information and that is simply because I am able to read the developers documentation so I'm going to take you to the documentation in elementa and I'm going to open up this page which is basically for the addons and you can get this from developers. element.com slocs SL addons and in here we want to be able to get some controls so I'll click on the controls area and in here you can see how you can create a control or how you can use it and there are some examples that you can actually see that are helpful for you to learn this a little better but right now I want to search for the select control and when I click on the select control you'll see that they give us an example here of how we can actually use it so we have a type we have a label we have a disc description we can also show the label so let's basically go through each one of these to see what it looks like so we have the label we have the type we have the options if we are to compare with what we have we have the label we have the type and we have the options right here which is requiring us to pass an array we need to add a default so I'm going to go back to our code and add a default we don't want to code this in here so for our default we actually want to be able to get what we get from this get menus but we want to get the first item and only get its key now that can be tricky if you want to use the same function but I'm going to say let's get a default so I'll say let's add a private method and say get default slag and what we're going to do is call this function which is get menus so we'll just use the same thing we'll say menu is going to equal to this and we want to get our get menus the thing we want to do is return the key of the menu the key function is something that you can find in PHP if you want to understand what it does you can see that it was in PHP 4 5 7 and 8 and all it does is return the index element of the current array position so in our example here you see that when we have an array and we just want to return the key you're going to see it's going to give us fruit one and that is what we actually need so I'll go back to our code I'm going to open up our editor save this and say we need our default slag and we need to pass it here so we'll say this Dash default slag save this let's come back to our preview and I'm going to reload this I'll delete this so that we can be able to see the new item hit update reload again let's drag and drop our widget in here and you'll see that it gives us demo to as the first item and that means it's default so this is different from before where we had to First click and select something now we have a default item showing up so I'll hit save on this and we can now compare to see more options that we have here we can have the label block whereby we display the label in a separate line so essentially that means we'll have this on top and then we'll have this at the bottom and I'll just show you this so we'll have a label block I'll add this and say let this be true add a comma so that that doesn't break and and when we come back to review this and reload you'll see that every time we go to edit this we have this on top and we have this at the bottom so if you have longer menu names then it would be easy for you to just use that kind of thing and right now for me this doesn't look so great so I can actually go back and just pass in the default which is false and keep that the way it's supposed to be the next part of our task is to make sure that when we editing our menu and we change to top menu then this should be top menu we don't want it to remain static like what we have here so I'll come back to our code I'll scroll down to our render part and our template now in our code here we can get the settings and the settings we can get at this get settings for display method this method is already available for us we can use it by passing a key to it but before we do that I just want us to error log we want to error log and print the settings I'll clean up my debug log so that we have something new to start with and essentially just go back to the page reload it and then all we need to do is come here and then choose demo click top menu and let's go and see what's happening at debug look and you you'll see in here the first thing that happens is we have the menu and we have top menu and we have a bunch of other settings that we might not need right now so all we need to do is get in the menu and that's the ID that we need I'll come back to our na Dash menu and say we need to get the settings at this point and we need to look for the menu item so I'll copy this and I'll do the same right here I'll stop the error log let's save this and go back to our preview I'm going to reload this so that we can see what actually happens so if you go here you'll see that we have top menu if I change this to demo you'll see that this is broken but I'm going to just update it for now so that when we reload you'll see that now we have demo Two showing up with regards to the error that we having right here our error log tells us that there's an undefined variable called settings and that is because in this particular method which now is actually just content template without the underscore that's a fix we need to do for newer element you'll find that this settings is not anywhere described the easiest way would have been having this equal to an empty array and then event eventually call it so you see the editor stops screaming but that's not going to work because we need the settings menu that's coming from here so I'm going to do a little bit of objectoriented programming in here and introduce a private display menu ID now after adding this here as a private ID we are going to set it at the point when we call this function so I'll come back here and add this here and say this display ID should actually equal to our settings menu that we get from here so at this point we can just copy this and replace it in these two areas that we do have so up here and down I'll clean this up just a bit make it easier and I'll remove this settings which we we don't need there it was for demo purposes so let's save this go back and reload so I'll come here click to edit this when I choose to go for the top menu I can actually update this and when I reload we have our home menu and if I change this to the demo menu then we should have this updated now that we have our Dynamic menu working in the next video I'm going to show you how to make Dynamic colors adding typography to be affected how you can change that all that in the next video If you enjoyed it don't forget to subscribe or share with a friend and let me know in the comments what you think thank you and enjoy whatever you're cing