Welcome to the first aside and aside it’s a lecture that isn’t necessary to watch. It’s more of a bonus lecture for more information about a particular topic. You’re free to skip these lectures and come back to them after you finish this course. In this first assigned lecture I’m going to show you how to create a walker class in the previous lecture. I talked about how to create a menu using the WP now menu function. This function has one extra setting you can set which is the walker key before we get into how the walker key works.
Let’s talk about Walker’s in general Walker’s aren’t specific to just WordPress. Walker’s are a general programming technique. Basically they are a class or function that takes care of looping through an array. What’s so special about Walker’s it that they will loop through nested arrays as well. It doesn’t matter how deep an array it’s a walker will loop through every value. It’s simple as that now that we understand how Walker’s work. Let’s create one ourselves. Just like everything else we’re going to put this code in a separate file inside the includes directory. Create a file named custom dash nav dash Walker dot P HB inside this file. I’m going to create a class named J you underscore custom underscore nav underscore a walker that extends the walker nav menu class all right.
At this point you may be wondering why are we using classes. Well walkers can only be created using object oriented programming. So using regular functions won’t work and you need to parse this video and brush up on your object oriented programming before proceeding the walker nav menu. Class we just extended takes care of the heavy lifting for us all talk more about this class and what it does soon but for now let’s use this class even though it’s empty. It’ll work as it’s back inside the index template search for the menu we created this array we pass into the WP now many function has an extra option called Walker.
Add that in now the value for this must be set to a new instance of the Walker class we created. In this case it would be j you underscore custom underscore NAB underscore Walker. This won’t work just yet. This is because WordPress doesn’t know where to find this class inside the functions file include the walker class file now that we have that set. Let’s refresh the home page and see the final result. If everything worked then you should receive no errors and see the menu working normally. While it may not seem like it.
WordPress is using our Walker class to generate this menu even though our class is empty. The class we’re extending comes with some default stylings and formatting which is similar to word Press’s default menu. With that being said leaving it like this isn’t practical. The point of creating a walker class is to customize the menu. So let’s do that now. Back inside the class I’m going to create a public function called start level. I’m also going to add in some parameters. WordPress allows you to override the four functions inside the walker class. Each of these functions determine when certain h t email is output it will go through each of them one at a time.
The first function is these start level. This function is called When WordPress begins looping through a nested array. This function is passed in three arguments. The first argument is the output. You’ll notice I’m pre fixing this with an ampersand symbol. This value is being passed in as a reference. Usually you would be provided a unique value but since this is passed in as our reference then we’re not provided a unique value.
Instead any changes we make to the output variable will change any instances of the output variable you’ll see that affects us soon enough. Moving on. The second argument is the depth. This is the depth of the menu being generated right now. Our menu has a depth of zero as there are no sub menu items. Lastly the third argument is the arguments. This will be the values you pass into the WP now menu function. This gives you complete control over your menu. You can choose to use or ignore the values you pass in. Now that we understand the basics let’s use this function. In most cases you would just echo out the elements you want to be output ID but that’s not the case here.
Instead you have to make changes directly to the output variable to properly output each GM. I’m going to keep things simple and set the output variable to Hello. This is the incorrect way of doing things but that’s fine for now. This is just an example. I’m going to save my changes and refresh the page after some time. You’ll notice that nothing really changes our menu is still displaying as normal. This is because the walker class only gets applied to nested menu items. First level menu items don’t use the walker class at all. It’s only when you have some menu items is when the walker class will be used. Right now I don’t have any such menu items so the class will not be used. Let’s change that.
I’m going to open the WordPress admin dashboard and navigate to the menus page on this page. I’m going to quickly add a sub menu item to any of these main level menu items. Make sure to save your changes before proceeding. Once that’s done refresh the page one more time. If you look at the menu now you’ll see the hello message being output. This will also break the menu in page but that’s fine. Let’s go back to our editors. Obviously this isn’t the proper way of doing things. Something I want to note is that whenever you make changes to the output variable you should always append the value rather than assigning a new one like we’re doing here. I’m going to change this into an unordered list tag and append the value.
The reason I’m creating an unordered list tag is because this function is called When the menu is about to be generated. This function gives you the opportunity to set things up before the actual menu was created. You’ll notice I’m not closing this tag either since we’re setting things up we don’t want to immediately close the tank before we see this in action. I want to make sure WordPress is using this Walker so I’m going to add a class named special dash class this class isn’t specific to WordPress or my theme it’s just a class I made up on the spot with that set. Refresh the page and see the final result. The page should now be displaying normally even though we didn’t close the unordered list tag WordPress defaults to an unordered list anyway so it closes for us.
If I hover my mouse over the sub menu you’ll see it appearing normally. I’m going to right click and select Inspect. I want to see the HDMI all. As you can see the walker class is being used for the sub menu because we have this unordered list tag being generated with the class we specify. That’s great. We now have more control over the menu and can assign classes I.D. attributes etc.. Let’s learn how to control the rest of the HDMI all generated back inside the editor. I’m going to create a public function called and level just like last time we’re passed in the same arguments with the same values. However the output variable contains all the HDMI all from the previous functions.
If we were to override this value than any H2 e-mail generated before this function will cease to exist we’ll keep it simple and just append a closing unordered list tag so that takes care of the before and after the next step is to work on each individual link. This will require a little more work. Right above. I’m going to create a public function called Start element this function has the same parameters as the previous functions with two additional add ons.
The second parameter contains the item object. This object contains information related to the link itself such as the URL title etc.. Lastly we have the I.D. this variable contains the I.D. from a menu item itself. This may seem strange but WordPress keeps track of all menu items by assigning them an I.D. you can use this to add special features by using their I.D..
We won’t be going that far but you are free to use it if you like. I’m going to start things off by appending a list tag to the output variable with a class of special dash class dash item then I’ll append the variable arguments and access the value before you may be wondering where I’m getting this value the arguments variable contains the values you set inside the WP NAF made you function in the resource section of this lecture I provide a link to this function. If you scroll down to the parameters you’ll find two keys called before and after according to the description you pass in text that will be placed before and after the link. Since we’re creating the walker class we’re responsible for outputting these values. Technically we didn’t set these values but it’s always good practice to set them in your walker class regardless.
WordPress does provide a way for plugin developers to override these values but we’ll get to that soon enough. Back inside the walker class. I’m going to append both the before and after values. In between these two values I’m going to set up an anchor link. First let’s start with setting up the H ref attribute inside this attribute. I’m going to set the value to item you are about the item variable contains information about the specific menu item in the loop. It’s an object where one of the properties is you are out.
If you’re curious on how I know these values then you can just use the prints are a function to output the data. If you never know what values a certain object contains then I always recommend you just output it. Moving right along. Let’s add the text between these two tanks. I’m going to output the link before link after and the title itself. Like before the link before and link after are values that can be set inside the DWP. Now many function the title commas for the item object. That’s all we need to do for the opening element. You’ll notice I’m not closing the list tag that shouldn’t be done here. Instead will need to create a public function called End element this functions purpose is to close the element which will do by closing the list tag. That’s it.
We’re finished with this class. There’s a whole more we should do but I’ll cover that soon. This is usually the minimum set up you’ll find yourself doing. Let’s go to the home page and refresh After refreshing. You should see the menu working as usual. If you inspect the element then you should see that the special class item class is being applied not only is it applied to sub menu items but it’s also being applied to main level items. To be clear these start level and end level functions get applied to sub menu items the start elements and end element functions get applied to all menu items including main level ones.
This is why we see being applied here now that we’re finished with the walker class. Let’s explore what else we can do in the resource section of this lecture. I provide a link to the Walker documentation page. This page goes into detail about what walkers can do. Walkers don’t apply to just menus. They can also be used for creating other types of content. More on that in just a moment.
Let’s read what WordPress has to say. The Walker class was implemented in WordPress two point one to provide developers with a means to traverse tree like data structures for the purpose of rendering HDMI out. This is just another way of saying of being able to loop through a nested array so you can output HDMI out. Let’s scroll down to the very bottom to the section called related classes.
Here is a list of WordPress classes that take advantage of the Walker class. The difference between these classes and the Walker class is that the Walker class simply loops through your data. It doesn’t do anything with it. These classes here take care of using that data and outputting each GM out. Let’s click on the walker nav menu class which we extended in our custom Walker class. You won’t find much written information in this case. We’ll have to study the code ourselves. Click on the link to the file.
Here you’ll find the walker that WordPress uses to generate the many. As you may notice there’s a whole lot more going on than what we had in our own class.I won’t be able to go over every little thing but here’s a few things you should know. First you’ll find a lot of backslash T and backslash N Strings appearing in the HMO out the backslash t tells the browser to tab the H GM out the backslash n tells the browser to put the H GM L on a new line.
These are used for formatting reasons you don’t have to do this as the developer tools are ready. Take care of formatting your out. With that being said if you don’t use these then it’s actually beneficial to you by removing whitespace. You’re essentially making the file size smaller which can allow for faster loading times. It’s up to you whether you want to use them. The first function here is these start level just like in our own function. This will output and unordered list tag. It will also take the time to check if there should be whitespace and it’ll take the time to apply certain attributes.
There are some functions being used here that are WordPress specific. If you’re coming to this lecture after finishing this course then you’re most likely familiar with what these do. If not that’s perfectly fine. I won’t be explaining these functions in this lecture but I will in a future one. Keep in mind that this is an aside.
You don’t have to take this lecture right away. You can always come back to it anytime. Moving on the end level function takes care of closing the unordered list tag and checking for whitespace afterwords. We have these start element function just like last time. This will output a list tag with the link inside. There’s a whole lot more going on here but it’s mostly checking if certain attributes should be applied. It will also take care of generating classes once again. If you don’t understand the functions being used here then that’s fine.
You’ll learn about them as the course progresses. Lastly we have the NS element function which closes Everything. This is the default WordPress menu and will work in most situations if you ever need to override the default HDMI markup. Then you need to use a walker class for the rest of this course. We’re going to continue using the default Walker class so I’m going to comment out the walker key inside the WP NAF menu function once you’ve done that.
