Lessons

Lesson Info

Adding a Custom Menu to Your Site

Now, what I want to do now is I want to go in and do something like this. We're going to start to go down the path of adding more functionality, just adding different things that we have, okay? And we might circle back around a little bit to working with the child themes. We're going to that as we kind of as we progress here, but I want to talk about working with a custom menu this custom, this different types of custom functionality we can work with is so important, and you're going to get your theme and you're going to be like, ok, well, I got my menus, I've got my my widgets and let me do this actually, I'm gonna go back to the the appearance that search area over here, and you're going to see that we've got our themes right, so I got my child team set out. If I look at my left here, I'm sure a lot of you are already aware that when you work with wordpress, you actually have what it called digitized areas, so you typically have areas of your theme that you can stick widgets in, okay...

, it was a kind of set in stone for each team, we also have menus that we can put out there. Okay and and menus are set in stone as well for the theme but these are things we can add to or we can change, which is I love this is what this we're going to start to take it further. So for instance, I'm going to go over the widgets here and take a look and you're going to you're going to see that looking at the creative life theme this is what we have I actually have what's called main side main page sidebar blogged page sidebar footer left and footer, right? Okay, yeah that's great! This is great, but what if I go in and I realize that with my theme that I don't want just to side bar on the main page I wanted on another page or I want to side bar to be on the different side or I want the footer to have three sidebars or just something like that this is we're gonna have to go in and start to customize it okay same thing with menus if I go into my menus over here on the left, I'll click on menus your theme has built in what are called locations menu locations so if I go up here, you're going to see edit menus when you guys first install a theme you're not going to see a lot of this because you've got to make your menu but I've already got a couple made so I'm going to click on managed location shins right up here and if I look you're going to see we have what are called theme locations and assign menu when we first install a theme we look and see ok well where can we stick a menu and the theme has built in a header of footer usually not always sometimes they have menus built in the side bars they diff different places you could have two footer menus depends on the theme itself what I do is I go in and when I create a theme or install a theme I look at the locations and I go make a menu and I'm sure a lot of you have already done this before okay this is this is not new that's something we cover in the basic class but I go in and say ok I want the menu I made header to be in that location right so location you guys just think of it this way I think they get it this is something that when I first started working where press a lot of this stuff was so foreign and I was staring a code and it just didn't make sense I divisional eyes it ok so if I go look at it and say ok here's my page now this is the page that's like already built it's all done you're looking at it the browser the page as we probably know, inward press is composed over comprised of different pieces. We have different little files that make up, like here's header, dot, php, here's, footer dot php and we're actually pulling in all these different pieces to create the word press page. You have that, you see, ok, and we're going, we're going to dig into that a little bit later, okay? But on your page itself, what theme developers will do typically is they'll say, you know what? Okay, I'm stepping back here and I'm saying, you know, I think my client, the person that buys this theme, might want to put a menu here, they might want to put a menu, you know, here, so what they'll do is they'll basically just make a couple holes there and say that these are the locations for them, and then when you get the theme, you just say, ok, let me go, make them and you home, what pages I want, what I want to look like, and then I just say let's other stick it there or stick it there it's not drag and drop that the thing, okay, so that the in the theme it's already decided where you can put them these air called the locations, the theme location so if I'm looking here I'm saying ok, this theme only has to it has header and has footer so I can go in select some kind of men you know like I said before we covered this in the basic class but we're going to need to make a menu and then we assign it to the location okay? So I'm going to say footer here and if I click on safe changes and then go take a look at my site this is pretty typical I go take a look at my site and look and see what I got it may or may not change but you're going to see ok yeah the menu just updated its now pulling in this menu that I made okay so it's kind of cool that's great so this like I said this is relatively basic wordpress management functionality I'm going to click on edit menus you know I'm back in the admin okay I'm going to click on edit menus and this is where I made the menus this is where I first made him I went in and today let's make a menu I said let's create a new menu I called one footer called one header and I set it up and we're going to do that in just a few minutes here but what we're going to do is we're going to make it so that we can actually create a new menu and put it somewhere else if we want so if the theme doesn't have one where you want it or maybe you need another one to go somewhere we can do that so they get this done we're going to go ahead at the files for the theme this is the child don't forget so I go over to appearance editor click on that and if you look in here you're going to see that we've got the style she always comes to the style shoot we want to go to what's called the theme functions file so going to click on theme functions and go in there I said before that everything has a functions file of some sort and it it adds extra functionality and does things like, you know, linc style sheets and different things like that it does a lot of different things we can go in and create a menu for ourself for at least a place for a menu in the functions file here okay, now there's a couple things we need to do here we need to actually go in and do something like add what's called a hook, okay, you know what I'm gonna do is I'm gonna open up a web page here, which is part of the the links that you guys got and you're going to see in the codex here in wordpress they talk about navigation menus if I scroll down a little bit, you're going to see that we have a bunch of things in here and you look at this when you first start with wordpress customizing your like you could kind of get blindsided because there's so much stuff to throw at you, but you're going to see something called register menus register menus and you're going to see something down here display menus on the theme we have to do two things here besides make the menu itself we have to actually do something called register the menu that essentially tells wordpress hate we're gonna have a menu it's going to be called this and you better let me make it ok that's kind of the thing it's called register we have some code we use and we put it in the functions file that's where that goes typically ok then what we do is we say let's then put the thing put the menu that we create let's put it in the theme let's put it in the header let's put in the foot or let's put aside let's put it where we want it that's the next thing we need to do so we've registered we say let's make one ford press we're getting ready to make one ok then we're going to go and say let's put it in the theme somewhere, stick it in there the last step is to go actually make the menu let's, pick the pages let's tell it would do and then just say, stick it where I put it, stick it where I have the whole okay, so in order for us to do this, you guys, you can actually come in here, just copy paste this stuff if you want to, but I already have a file that's in your lesson files that you can download, I have a file set up that I'm gonna open up here, and you're gonna need some kind of text out of there that you can use to open this. Okay, so let me go to file open, and I'm using currently something called sublime text, which is a little bit a lot of developers use this it's just straight coding if you don't like that, then you do something else, I'm gonna goto open and you're going to see we're actually be working with a menu here. So I'm gonna go to admit you're going to see a little file in here called a php file, and this is just code we're going to copy that's the idea here, if you guys already have code from somewhere else, or if you got it from that codex page it's pretty much the same thing. Okay, I'm just giving it to you so I'm gonna open this up and you're going to see that I marked it out and it says that we're going to do something called register the menu and you can see right here it says ok this goes into the child thing functions dot php file and then we're going to we're going to put this into the template the header wherever we wanted to go so like I said we've got these two things to do to start with so what I'm going to do if you follow along here I'm going to copy now be careful copy everything I copy here I'm going to copy this stuff right here. All right click and copy it out of your editor you can typically you could just come back over and let me get back over there sorry come back over to your your admin and you should have the function stop php file open already you should see right here and what we can do is kind of towards the end here now you got to kind of be careful here. You guys should see that there should be a somewhere in here and mine doesn't actually have it right now there should be something that looks like this a little closing question mark and then a little like we call these alligators ok, so we're gonna put it before that if you see that so I'm gonna put it right up here and quick, clear a little bit of space, and I'm gonna paste it right in here. And so this is actually let's take a look at what this says it says let's, register a menu. This right here, this function, this thing right here is saying this is what everybody pretty much uses let's register and have menu let's tell wordpress we're about to make a menu and here's some things we can do with it. Here's what it's called etcetera. You're going to see that? Like, I'm not gonna go through all the stuff you're going through, something called a ray a rage is simply means you guys, you can make a whole bunch just me. They're going to stick him in here, but we're gonna make one. This right here is called the menu I d events now this could be called a lot of things. You could call it like brian's awesome knave if you want to, but we're going to make sure that there's no spaces keep it simple, use hyphens things like that. And then you see a bunch of garbled the group over here going to like, what is this now this is the id that's, how within wordpress within our files we call it we say get the menu called events hyphen f okay that's the idea this right here between these quotes is what it's actually called when you're looking at it in the admin so we don't have to stare at some wacky name it's going to say events men you look really pretty okay this is the theme name that we're working with and you know some of this we don't actually have to have but that's it you guys this is how we register it and I can go in and save this pope's let me go down here and save it update file I almost using my shortcut command astral creek sorry go update file if this thing real quick now what's going to happen is it's going to say ok, we just registered it basically watch this I'm going to go over the menus now and take a look and if you look over here you're not going to see it over here because this is where we make them and you itself I'm gonna go to what's called manage locations and check this out I can just feel that power is not amazing that's like that's one of those things where you just little any code you suddenly have extra functionality and admin which is so cool now we can do is we can go in and say let's make a menu and stick it there but the problem is we're press knows we want to make one but we haven't told it where to put it yet. So now that's, the next step we need to take. Okay, so what we need to do is we need to put it in let's say the footer, the head or something like that. Okay, now this is something that you need to be careful of because we need to do when he's back out one second here we tow actually copy the footer or the header file the actual php file from the parent theme and copied into the child. This one gets a little dicey. Ok, I just want to kind of mention this really quickly because I mentioned the header php the footer these different pieces for your pages, right, what's going to happen here is if I have the parent here, I'll just say p for parent hopeful that makes sense. I'll say ceecee for child ok, if I have the header php, I'm gonna just make it shorter header! Dot php what we're going to do is anything that we want to change like the header, the footer a sidebar, a template. These are actual files that are going to be in our theme we need to actually copy the file itself into our child theme folder there's the child thing folder ok what's gonna happen is if we now have the header php copied in here it is going toe override the parent is going to replace it okay it's not going to switch them together like the styling that's what's different about all this so just something to think about so we need to do is we need to take let's say I want to put it in the head or the foot or I'm gonna put it in the footer we need to take the foot or php and copy it into our child this you guys this is going to require that you either use some kind of ftp program this rick it's a little interesting using fdp program if you've all hopefully used one of those log in your host and you're going to copy paste into the actual folder guys they're going to copy from your parent theme, which right here we're going to copy footer let's say for instance, being to our child theme and have it going there okay? All right, so what I'm gonna do is I'm gonna do that locally so I'm just going to say I'm going to copy the footer put it into our child now you could if you wanted to as faras the fdp and I'm saying it's all scary and all that stuff like this is crazy to do it's not right if you use dreamweaver, for instance you can use that to okay dream weaver is great because you know if you have the creative cloud already got to probably can download it quickly you can just go in, make a site use the fdp built in there it's pretty easy and just log in and kind of see your stuff and kind of move things around that way too okay, you can also do it up on the host if you know how to get around the files that there but okay so I just copied that footer php you going whatever file you want to put in they're gonna copy in your child I am now going to go in and do this once I copied in there we can go back over to our vp admin here goto adnan goto appearance and click on editor and what I should be able to see now is that foot or file showing up we don't have to go to an editor and edit this stuff it's within the admin ok so I'm going to click on footer php there it is just looking in the folder and saying here's all the stuff we have let's go in and make a change you guys going to see tons of stuff in here and it's going to get a little crazy if you don't know php but there's a lot of things that we do here to pull in content from different places, okay what we're going to do is I'm going to go back over to that code, and this is like I said before, this is actually in the lesson files you can download, and you're going to see that same file called custom menu php I've got this content right here that we're now going to insert into wherever we want in this case, we're going to put it in the foot or so we're going to copy all this stuff. This is actually a div with a style on it, and it's got the menu inside of it. Okay, so what I'm gonna do is I'm gonna come in here and right clicking copy, and I'll explain in a second here, okay? This is in my editor. I'm on my hard drive here just to my editor. When text out of there. Now I can go back up, and I mean, might my footer dot php and this is the catch here. We've got to figure out where it goes. This is the hard part because you got a look at your code here and be like, ok, where it is? Where is this thing? What is this thing? Okay, if you see one of the easier things to look at here, you're going to see something like made by this is the creative life theme that all things are gonna have stuff like this you're also going to see things like copyright stuff like that what I would suggest you do is if you're trying to find out where to put this stuff that we're about the pasting look at the code here, look at the foot of the head or whatever you guys copied over go back over to the actual live site and go look at that part of the page go take a look at it, okay? We're going to see things like, ok, two thousand fourteen creative live contact info about us contact book this is a menu I know that's a menu ok, one of the easiest things you guys could do to help yourself right now is to actually see any styles applied to this by using those developer tools. So typically what I will do is come up to something and right click on it and you'll see inspect like we did earlier remember it could also if you don't see that you can also come up to in the browser you're in come up to the developer tools which are using in one of the menu's open that up, ok? And if you open up the developer tools once again scroll down, I'm going to go in and I'm going to say, ok let's, go look at something you're going to see this eye glass all over the place a lot of a lot of these have something similar ill then go out here and like click on one of the things here and even not clicking if you see the see that little yellow banner above it it says copyright that's a class okay, if I go back over and just looking at that styling right there and if I click I can see ok footer text copyright if I go back over to my theme files and just take a look I know I'm jumping I'm sorry, but I go back over here you're going to see a look copyright theme files, okay? So footer text there's a foot or text right there so I know where that stuff is located now kind of pinpointed it so I can kind of get an idea of where this thing is going to go, so now I'm going to say, you know what? I'm going to stick this at the bottom this may be kind of dumb, but you put it where you want it so I'm gonna put it maybe like right at the very bottom here, so I'm going to come down here right click and paste member I copied that from our techs are php file a text file and you're going to see right here there's that stuff this is now saying this is where the menu is going to go there's a couple key factors here that you need to pay attention to because we're doing this using creative life steen it's all set up already but if you're doing this on your own theme, you have to make sure if you take a look here that we have right here here's the name of it right there the key is this right here theme location you have to put in the id from that first code we used in here it has to match exactly ok so that's what we're doing that's that's going to match that code exactly there was in the functions file there's a lot of stuff in here we could go in and out of class and different things we don't need to do that I'll come down here and I'll say let's update file there we go ok, now we told it a hook we said wordpress let's make this menu now we told her where to put it now we need to go make a man you those are the three steps we take so I'm gonna come over here to the left click on menus again and you're going to see that we have our manage locations right up here there's our events menu that's the pretty text we had in there now we could do is you know I don't see a menu I want to use so I'm gonna go in and make one so I click on used new menu and given a name called like events or whatever you guys want it's just for you to recognize which one's which that's the idea and I'll click create menu and now you can go over here and I don't really probably need to go through this but you can go in and add all your pages if you want we can go in at customized links and this is usually why people are making a customized menu system like this because maybe they want to make links to something else that's not pages in their sight okay so I could go in and had a you are all I can say like www dot you know creative live dot com you know something like that and I could actually have a menu item here is this pretty cool I could type in you know, creative live I'll say add to menu and this is what's going to show up in the menu now it's gonna linked to create alive okay so I can then go down a custom and actually make changes here you can see things like titles and different things like that I can add pages I can add categories for post a lot of different things I'm gonna have my pages maybe I'll do that here we go so I just added my pages so I've got a bunch of stuff in the menu now so I can go on kind of reorganize this stuff this is one of the best parts we learned this in the introductory class kind of organize it I can and save the menu they're always got to save don't forget that you were pressing yell it if you don't, which is great takes your very good and then what I could do, I'm pretty much done I could just go to manage locations and this is my own insecurity but I'll go there and say ok, events nice it's events that's where it's going to go? Ok, so say that I didn't have to say if I just did it anyway because I'm a little bit of a nut I'm gonna go back over to my cage now do a little refresh and you guys take a look down there you're going to see there it is right there grave life about us blood awesome great way for us to be able make her own menu put it where we want to go you guys could put it in a template you could put it in different locations, there are some places you don't want to put it, you'll find that out pretty quickly things like the loop and stuff like that, but you'll learn we'll talk about that later and, yes, this is the kind of stuff you're going to deal with a lot, and I just last thing here, I really wanted to just point out, we I kind of mentioned back in the admin here that when we were editing the files, I said, you're going to see all this stuff that's kind of stuck in there and php and you might not understand what it means. I'm going to click on edit there again back in the admin, and we're going to see our files and I'm gonna go back over two footer if you start digging into theme files, we're going to start seeing a lot of stuff. First of all, you're going to see things like this a lot you're going to see php this this is php that's what these files are based on. So you're going to see that a lot, he's our commands that say, do this, okay, run this et cetera you're going to see a lot of things that you're going to get used to, ok? A lot of things you're going to get used to things like those php tags you're also going to see things like this let me scroll down sorry you're going to see stuff like this. A lot of these toward types of little like shorter codes that are stuck in here for php, thes they're things that are built in the word press and is the thing we're going to see all the time stuff like this, you're going to see w p footer essentially means let's take any of the footer stuff that comes from light plug ins and different things like that that are loading scripts and styles, and we're gonna put that stuff in that's where it's going to go right there, it's going to go grab it all into stick it right there, there's a lot of these little things that we are going to take a look at, we're going to be getting used to as we start to work with wordpress and one important thing, I'm not seeing right here in the footer that I want to point out that I think is to kind of crucial. Let me go back out to my files. You don't have to do this, you know? Look at your files if you don't want and I'm gonna open up the header violence want to point out a couple of little things here, the header files got a lot going on, you're going to start to see and let me scroll down a little bit. Right here okay you're going to start to see that there's a lot of short ways to write things and wordpress and like I said, this is just trying to help you get your feet wet gettinto, wordpress, et cetera and understand where things are located, how they work but going to see a little short codes like this that are things like blawg info this is a short way to right things like the payment thing back you earl we could also I could come in here and do something like this I could say for instance, if you ever see something like this uh php I'll go like blawg info and this is not necessarily the right way to write it for everything, but if you see something that looks like this php blawg info you're going to see we can put a lot of things right here. This is wordpress nose with this is and there's a lot of these little codes you can go look up and if you want to you can type in let's say like you are all right there if I type that in just watch one second here I'm going to save this you're not gonna obviously kind of not doing this here, but I'm just going to save it real quick I'm gonna go out to my site and take a look at it just bear with me and if I look at the actual code, check this out now you're not going to do this on your site going, I just wanted to show you this look what it actually put in there, that little bit of code that were pressed knows what it is. I said, let's, go find the block you earl that's essentially what I'm saying that's, what it's stuck in so here's a lesson for you, okay? And this is going to kind of wrap things up here a little bit, but when you're editing and you're, you're doing your css thing, et cetera, and you start taking it further, which we're going to doing mohr of you've got to be careful because one thing we never do is do things like hard code you are else if you go in and you're going to link to something, you're going to type in if you type this in to the head of the foot or wherever you want it's tough to go later on, it might break if you move the folder, do something different. So you're going to find in a word, press we use a lot of these little helper guys to kind of help us out, and if you go out to the web and you do a search in the codex, you're going to find all of them just do a search for things like blood info, and you'll come up with the codex forward press, and you're about to see all the different things that you can utilize. You're going to see a lot of different stuff like that as you kind of run through things like thumb, you earl, a lot of little short things that are probably part of the girl, but just wordpress knows that they do. They just go grab something and stick it in there and make it easier for us later, so we don't have to worry about it. That's. The idea.