Right now I’m on the documentation page for the registered now menu function. The first step to getting menus to work is to register them. Just like styles and scripts WordPress requires you to register your menus before you can display them. This function will help you with that. As you can see there are only two required parameters which is the location and a short description of the location can be thought of as a special I.D. If we scroll down further you’ll find that WordPress provides an example. In this example, WordPress uses an action hook called after setup theme. This is the hook.
WordPress recommends for this function as instructed. Let’s open the functions file just like last time. We’re going to organize our code under the hooks section. I’m going to call the ad action function according to the documentation. The most appropriate hook we should use is called after setup theme this hook is called when our theme is loaded internally. I don’t mean that the page itself is loaded but all the functions you defined inside the functions file is loaded. The function that will be called is J you set up theme. This function isn’t defined so we’ll have to do that now. Create a file inside the includes folder called Setup Dot p p and then I want you to define the function. Lastly including the reason we aren’t creating this file inside the front folder is that some of the functions we’ll be using here will be applied to both the front end and the back end. Now that the function is ready let’s call the register now menu function.
We need to provide this function as a location and description. I’m going to call this menu primary and give it a simple description of the primary menu before I continue. I’m going to wrap my description inside a function that doesn’t really have a proper name but it’s called by typing to underscores. This function is a special function created by WordPress. It allows for text to be translated into various languages. We haven’t gone over translations yet but I’ll give you a quick rundown. WordPress comes with various functions for translating strings but the double underscore function is just one of the most commonly used ones. When we start talking about translations I’ll show you the various functions available for now let’s focus on this one function.
This function has two parameters. The first parameter is the string you would like to translate. The second parameter is the text-domain. This translation is using earlier we talked about text domains when we created the file header the text-domain is basically the name of your theme folder. In our case, this would be Udemy. So what does the text domain actually do? Well first of all your theme won’t be the only file that has translations. Users might have various plugins activating those plugins that will most likely have their own translations. You can think of a text-domain as an I.D. If we pass in our text-domain. WordPress will know you want to use a translation from our theme and not some other plugin loaded. Anyway.
We actually haven’t created a translation file and we won’t be doing so right now. If WordPress doesn’t find a translation then WordPress just won’t translate the string and return the original string. You don’t have to translate every string but I highly recommend it. So your plugin or theme can be used by the widens audience possible. All right that’s it for now. If you didn’t understand that’s fine I’ll be going more in-depth in a future lecture. Now that we’ve registered our menu let’s display it in the resources section of this lecture. I’ve included a link to a function called WP. Now many. Let’s take a look at it as you can see WordPress has thoroughly documented this function. It’s very powerful and flexible. We won’t be going over every bit here since we don’t need to use all the options available to us for our theme.
Basically what this function does is generate a menu for us and outputs it onto wherever we call it. Let’s get started by using it open the index template. I want you to search for the navigation tag with the ideas primary menu right above it should be a comment that says primary navigation inside this element. You’ll find an unordered list with a comment above it that says the main menu. I want you to delete this menu like so next open some peach be tagged and create a conditional statement we’re going to check if the current theme has a particular menu. You can do this by calling the has now menu function we can then pass in the name of the location which is primary. If this menu exists then we can continue on inside this conditional statement. We’re going to call the WP NAF menu function this function can be called as is and WordPress will just use its default settings but we don’t want that. We have some things we would like to specify. This function only has one parameter which is an array. So let’s create an array. And in this array, the first item will be theme location this keys value should be the location name we used in the register nav menu function the name of the menu we registered was called primary. So this keys value should be primary next let’s define the container is simply a tag that is wrapped around the navigation H GMO. WordPress will generate the HCM l for our menu. The H team l generated is simply you l and l I tags or simply known as an unordered list. The container key simply asks if we want to wrap this unordered list with a div or NAV tag depending on your needs. You can use either however our theme is using Bootstrap and we already have our navigation wrapped with a div tag so we don’t want either.
Let’s passing false therefore WordPress won’t wrap our unordered list with a div or NAV tag there is
another key we can set which is the menu class key this key allows you to add ADC SS classes to the UL tag. I’m assuming you may want to do this if you’re using your own template to add multiple classes. You just space the class names like so class one class two for this thing. We don’t need to use this key so I’m going to get rid of it. We’re almost done.
The next key I want to set is the fallback CBT in some cases your users will not have any menu setup. This is usually true on a fresh installation of WordPress. This key allows you to call a function to display a default menu. You can set this to false if you don’t want to display a default menu or HCM El. Lastly, we can define the depth the depth is how many sub-menus the user can have. Currently, my C access only allows for a depth of 4 if you want to have more depth. You can do so by adding additional C assets if you want to allow an unlimited number of submenu items. Then you can set this to 0. That’s it. Now if we refresh the page it won’t work as expected. This is because we haven’t created a menu yet. Let’s do that now inside the WordPress dashboard. Go to a parent’s menus and then create a menu take quick notice of the menu settings section you’ll see that there’s some section called display location.
This lists all the display locations we registered in our setup file. Let’s assign this menu to the primary menu. I’m only going to have the about page assigned to this menu after saving the menu. Go back to the front end and refresh. You’ll notice the about menu item being generated properly. You can click this if you like and it will work but it won’t display the content. Will fix that very soon. If you haven’t already removed the static HDL for the menu let’s recap what’s going on. First, we tell WordPress that our theme has a location for menus by using the register now. Menu function. Lastly, we tell WordPress where to load the menu in our template by using the WP NAF menu function something I want you to note is that you don’t have to call these functions from within the hook.
These functions can be called directly inside the functions file. However, I highly advise that you use hooks whenever possible. This is so only code that should be called is called in appropriate locations. If you were to stuff your functions file with loads of code then you make it hard to debug it. Since so much is going on. Another thing I want to note is that on the WordPress menu page you’ll see WordPress output in the phrase primary menu for the display location. Earlier I told you about translations and how they performed WordPress acknowledged that this phrase can be translated and tried to translate it since we don’t have any translations set WordPress than output in the string assets. I just wanted you to notice that before I end this lecture I want you to be aware of how the markup and c assess for my menu.
This is not a bootstrap menu. This is a custom made C Ss menu despite bootstrap coming with it some classes for menus. I decided not to use it. Now, this is just a C Ss preference and not related to WordPress. With that being said bootstrap requires that you set up a menu with certain classes. Unfortunately, the WP nav menu function is pretty limited when it comes to adding classes to certain menus. In these cases, you have to use something called a Walker. Walker’s are a programming concept and not specific to WordPress only. Walker’s are a way to go through an array and if those arrays have arrays inside of them it’ll go through that too. It just keeps going and going until every value has been looped through creating a Walker can be fairly complex.
Luckily there is a developer who has solved the problem of creating a walker with bootstrap markup in the resources section of this lecture. I provide a link to the WP bootstrap nav Walker class.
I won’t be going through this as it’s not necessary for our theme. However, it’s fairly easy to implement. All you have to do is include the file and then modify the WP now menu function in the examples below.
