Creating Menus & Pages
Now we're going to start to actually dive in and start to add our content which makes sense okay, so what I decided to do though was I decided to jump into not just adding actual like pictures and text but also setting up things like menus and just different things like that to try and kind of get fill out the page before we jump in adding the contact does these things that are really super important so one of the things we're going to start with is talking about working with menus because men use their super they're very important and as we can tell if I go out to the site itself a menu system or a menu is typically navigation right so it's something that's going to show up late actually let me ask you where do you normally find the navigation on the site of a side along the top or on the side here but I noticed you motion along the side with your left hand so is it's typically along the left? Right, right. Okay, okay, way also see the navigation where sometimes usually like in the fo...
oter let's sit down there ok? You're gonna fight it's kind of funny but um really how funny but when we went in and I actually we usedto work a lot with the web and we started building websites we used to always say that the website itself you started from right up here. This was your static point okay? Because your design always worked out that way it always was built out that way and why would we say that that's the same way that you right? Yeah, right. Brighton read your top left left left to right top to bottom kind of thing, right? The other reason why we did that that's that's exactly good reason. The other reason why we did it is because if you look at it let's say a different screen size for instance you're gonna notice that this corner is always they're your enemies always static meaning the design content in that corner is always there where if we have a different size screen and we change something a little different they're going to notice that yes, things can respond and move around a little bit but those are those are things that are going to come change a bit right? So that's something we used to always talk about and when we talked about navigation menus systems, if you will call him that we used to always say that they're going to be, you know, along the top edge and along the left side here because those air parts of the pages are going to be a little more static always gonna be there at least ok? Does anybody remember how if you went to a website and it wasn't responsive, and I honestly can't even go to a website right now that isn't. But if you closed it up like this, you mean the browser smaller that part of the page got cut off. Okay, we still have sites like that today, that's why we're all trying to learn this stuff, right? But when it gets cut off, you're gonna lose. The navigation is sitting up there. So that's, what we had to think about these days with responsive design, all this stuff is kind of fair game now, I mean, we could put on you're going to find navigation systems and menus and things like that all over the place, because things are going to adjust and fit to within the browser of the device. That's, one of the big, that one of the things we have, if you will now in the theme, the theme itself, and this is kind of a surprise to a lot of people, and it was to me when I first started, the theme actually dictates where the menus go, okay? So in a lot of cases, some teams are like super deluxe, it paid a billion dollars and you may say, do you want to make more? Where do you want to put it, that kind of thing, but that's a little further along in a lot of themes it's going to say you have a place to put it up here in the corner, for instance or up in the top and a lot of places also will put it down in the foot or down here so you get two options basically you will find that some things have a lot more to this depends now when we when we goto look at menus, let me go back over to the admin here um one thing you're gonna do is we're gonna look at the theme itself and kind of decide or see where it is how do you know that? The only real way to know that is if I go over on the left here you're going to see that we have all of our content and we have appearance, which we've already kind of looked at just a little bit we looked at the themes in the customizer but now we're going to start to dig into some of this content we're going to start to dig into menus and widgets in a little bit more we'll talk a little about header and background and things like that I want to talk about menus when we create menus for our page and you guys are going it's really hard to tell right now, but when you create pages and start working with content it's going to create a default menu for you but we don't always want that because we want to determine what's in it you know what I mean? So if I come over to menus here and I click on that and take a look what you're going to be faced with is this which is not a whole lot it's it's literally lets I create a menu okay? And in some ways I kind of don't like this because well okay, well, is this my foot or menus? It's my head or man? You gotta you're going kind of decide okay? Where it is the way we create a new menu if you take a look, can you guys figure out how we create a new menu? Okay, exactly trying to get at their word press kind of lead you down the path a little bit here so I'm gonna see menu name I'll do something like this I know that there's a menu on the header I saw it okay? And if we know I'll understand what a menu is okay it's, how we navigate our pages in our content I'll maybe say that this is gonna be like my header menu. Okay? And you know, stuff you done before technically shows up there and I'm just gonna go over and say let's create it so we make a menu, we actually name it and then we create it and what's. Interesting here. Is that suddenly this thing's going to come in a life and say okay, well, what do you want the menu to do? But the one thing I really want you to notice is right up here manage locations. Now, when we work with menus, let me click on this so you can see what it is you're going to see that your theme will tell you how many men use it supports out of the gate. Okay, sometimes this can be one. Sometimes it could be ten. It really depends on what they decide. Uh, I just decided to go pretty simple and go with head or footer if you want to. You can actually say let's, not really do a menu. You can kind of a blank menu, which is a blank space, essentially. Or we can create a menu and put it in that place. Okay, I this is something that if you stumble into menus and start getting in here and you make one and suddenly you see that you're like, oh, that's cool. This is great and all but what if I want to see in the theme? Like when I first install it, I want to see this, okay, there is a place to see that as well. A lot of themes, if you remember, we went to the customizer, I'm gonna go back there. So this is a lot of things will do customization through this or they'll have a menu item out here that you can click on here's the customizer again. And if if I take a look in here, you're going to see it. Ah lot of themes, I'm sorry, I can't actually scroll down here, but let me try and zoom in a little bit you're going to see navigation, so if I click on that, we'll see you're through seeing theme supports and this when we actually go toe look a theme before we even install it or activated, we can preview it and you'll be able to see this content and see the menus that aeryn, they're usually not. All things are going to do this, but a lot of them well, so you'll see that it's going to say, okay, you have two menus you can put in here, a header in the footer and that's pretty self explanatory, isn't it private figure? And where it's gonna go? Ok, but you're going to go out here now you're going to say, okay, lets go ahead and grab him and you, the thing is here. It's not giving you an option to make a menu you have to actually go make one and come back here if you want to do it that way okay so right now it's just gonna actually if I go in here and say it's just going to say select if I hadn't made one already okay, so this is a way if you first insulting to be able to tell what's supported in some cases let me close that backup I'll click on the exterior and once again we're gonna go in we're going to start to kind of manage these and set these up and I want to take you through all the different settings that we have because this is actually pretty important you're going to see that when we go back over here and we go to manage locations we just if we want a menu to show up we're going to just choose which menu we created obviously we need to create the menus to show up here okay? So I'm going to say ok header and to me honestly when I'm working where press I will make sure that I name something appropriately you know it's going to go on ahead ursula call ahead her name it kind of simple the other thing that consider is that when you are creating a lot of things you may be creating it for someone else so you need to consider someone's coming in here blind what do you call that thing? You know what I'm saying in this case it's dead simple header footer okay so I'll call ahead or choose header rather that's the one we created and I'm gonna click on save changes and to be perfectly honest is not gonna really change much out there I'm gonna click save changes and if I go out to my sight right now it's going to just I refresh it's pretty much going to be you know what we had for the most part but to be honest if you look out here you're going to see that it now goes away because technically we really don't have many pages we've created yet there's not much going on okay we're just kind of setting up the menu system now what I'm going to do is I'm going to create a few pages real quick and we're going to talk about pages and posts and different things like that but I'm just going to make a couple of real quick and then I'll discuss lay a little bit just a little while what they are how they work etcetera I'm going over the pages and you have to take a look a page just quickly is something that's a little more static it's if you think of a website you think of a page in a website that's what this is it's content like a contact page like products page or something that you know was not making maybe even change every day it's not time sensitive okay or based on the time stamp let's say so I'm just going to go in and I would say like, add another little page here we will go over this a little bit more later I'll call this just, you know, contact and I'm gonna publish it don't don't worry we'll kind of cross back over here and get back to it if you take a look you're going to see that I now have a couple pages I could kind of work with ok that's all we needed we'll discuss it later I'm gonna go back over to my appearance and go back over to the menus take a look you can see right there and now when we when we work with a menu system okay, if you look in here going to see that we've already created one and typically what's gonna happen is going to say alright, you're working on the head or menu let's go in and set up the structure it's called now a menu can contain a lot of things a lot of different things ah men you can actually contain things like pages it contain things like part of a block you make like just thoughts you're writing down based on light hey today I walked the dog okay, that kind of thing which is whatever um you could do that if you want, but you're going to see and hear that faras the menu structure that on the left over here we have what are called pages we have our links and we have our categories just to kind of make things clear here I in this class I'm treating this is a website we're not treating it as a block, okay? So we're gonna be working a lot with pages that's gonna be our main focus in here and pages are just content that we can put in there and they're static and it's something that we deal with and we just have okay just like pages in a website if you look here under pages, you can see all the pages that we've created, like a contact page of products page different things like that the idea here is that we're going to add what we want to be in the menu system from here added over here okay, so maybe I want to add and like, I want people to see that we have a contact page so I can select all of them I could slay one two etcetera and you can probably figure that I'm gonna click on add the menu added over there and if you look over here to the right it's gonna put it in the menu now this is this is immediate you guys once we add this stuff over here as soon as we go up here and click save it is going to be live and in the header because we told it to go on a header that location right so I've got a page out there now if I want to a lot of people what they wind up doing is they'll make a header menu and maybe they've only got a few pages on their site keep it you know it's a three four page site kind of simple they'll just go over select them all put him in the manual they're done okay it's pretty easy uh but sometimes we don't want to have certain pages in our menu how many times have you been to a site like look let me actually go out to the the c l site here how many times have you been to a site like this and you don't see a homelink but look the pitch okay no no okay way I have discussions with people about this a lot of discussions because clients are like well people need to know how ghetto go backto home how do you do that? How did they like you just go to the logo up in the left corner and usually that's it that's what I try anyway how many of you that's something you try at least right you may go in logo ok? Yeah, a lot of a lot of sites these days I'm not saying not to put a home like I'm not saying that it's just that I've acted sites where there's so much navigation is so much going on that I'm like green I gotta cut it down a little bit so we're gonna make the link the logo to the home okay so you know, clicking a lot of times you click on navigation and got a contact that comeback I click on the logo and we're back it depends on what you want to do that's all ok so that home link is up to you all right uh so that's one of the things that you might not want to include there might also this is kind of interesting but there might also be pages things that you've created content you created that maybe aren't live yet they're they're an event that you don't want people to know about yet but you've already made this thing this page and put the content on there you know? I mean so that's something also you can actually not include the menu if you want to do that, I'm gonna go and actually include the sample pages well so's I could have done them all of course and to say at the menu and you're going to see it puts it over there okay, now you will see that we also have this is kind of interesting. This kind of freaked me out when I first got in here, but as far as pages are concerned, this is actually just the most recent I never really did you guys notice I didn't even notice when I first got in here? I was like, these are my page. It says pages, those are my pages, but these are just the most recent you've done. So you're going to look in here, and I used to be like, we're all my pages and it's staring you dead in the face, right view. All okay, that was too complicated. So take a look. There's actually, a home page that you give us. Okay, that is something we could also include if we want to. Now, this is a page that that wordpress actually has this kind of our our home, if you will. If we want to, we can create our own home page. We want to do that and just name it home or something like that. This is something gives us that we could use if we wanted to. Okay, so so we can say let's, just look at the recent or the owl, and you can also this is I don't know how many of you I think maybe three times in my entire career have had to search for a page it's such a big site you can't tell where the pages are one of those internet and so but honestly there are big enough sights you've got to kind of you know, do that so these are the pages we can add course if you take a look down here, you're also going to see that we have what is called lynx and categories going over those in just one second okay, let me go over to the right here and let's take a look at this what's called the menu structure now the menu structure itself you're going to see that it's just going to take however you add the pages is just going to put him in that order and if you notice we're all smart people okay? We're all going to kind of move around see what's going on you're going to see oh, look at this what does that usually tell you we would after down or like it around? You're gonna see right here drag each item so I could say let's reorder the pages here someone a reorder okay pretty simple was awesome is that as soon as you save this damn it's live, it goes on the site and it's done ok, now why would I reorder my pages like this? Because a lot of times people are reading from left to right, and if there's a very important site, that our page that you like a by now or something, you'd want that to be one of the first ones that pop up. You got it so it's a lot of times, it's an order of what we consider to be important. You're totally right, something's I actually found we'll have the last if you just have a page at the bottom, which is this is going to be, by the way, this sample page right here is going to be the first on the left, and it works its way left to write, but here, down. Okay, so sample is first on the left. Thank contact is to the right of that. In our case, I know some things that if you put a page in the last position at the bottom it's actually going to take the name of that page and make it a big butt, okay, because that's like a by now type thing, they built that into the theme. If you're selling stuff. Yeah, it just immediately does that as soon as it's the last one. So there's once again it's a theme option that some something's offer so it's kind of cool, yeah. So okay, so we're going to take a look in here now the other thing we can do to is let's suppose that we're creating a menu and we've got a lot of pages okay? And I need to make some some pages we need to make a menu all right? Yeah, right so let me just get over the board just for a second I know a lot of us already know this, okay? But if we have on our site, you know, we have kind of a simple menu system and you know, we've got some text in their etcetera I'm too lazy to write it you'll see like home info, contact services, whatever sometimes we'll actually have the sub menu like this. This is also something I consider with themes because something's handle it a little differently. Okay, I've actually had beams that will not allow some menus because it's such a tight work space in such a tight area that they just don't do it because they're themes I won't allow it it's not it's rare, ok, but as far as creating these sub menu pages like this, what we need to do is we need to actually create those pages in wordpress and then we need to put him in our menu and say they're going to go down here now the way we do that it's just to set up what's called a hierarchy you guys, I'm blabbing over here. This is so simple. Okay, watch. Uh, I've got my contact, paige. And this is a really dumb example. By the way, we don't have many pages here. I'm just gonna kind of dragging around and say, you know what? I want you to go into here, but maybe I want this sample, maybe this sample something we're working on, I can simply drag up or down and if I go into the right, check this up it's now a sub menu and that's it that's all I know that's the kind of thing that it's like you just, you know, I understand I've done it so many times, I can't even tell you so it's, we're press has come such a long way and it's it's so awesome to be able to do it, just make it so dead simple, but you're going to see it actually does say, sub item now you'll find you'll find honestly that sometimes I try to drag this around and I can't get it out. You can't kill like you're you're like let's, drag it out sometimes I can't get it right. I'm like, oh, under sub sub and I always push it over and that's what I've been needing to do this full time so that is now going to be a sub menu under contact. Ok, now your theme you guys you may need teo like there might be colors associated with that submarine you might not like. So hopefully the theme has that built in sometimes they don't etcetera. Okay, so you're going to see here that yeah I'm gonna pull this back out because that's kind of ridiculous. Okay? All right, now once we get the page in there one of the things that's going to happen with pages is once we click on a page and the menu it's going to kind of just do its thing it's going to open the page right? But we have some settings weaken set so for each page and here I could just simply click on the right over here is gonna let me do that there we go. You can actually set what's called a navigation label this is the coolest thing in the world your page could be solid called sample page and I could call this joe it's still going to go to the sample page. Okay, but just what you see in the menu there you go make it smaller, let it fit that's a good reason why we do something like this okay um or if you have a page name so people create pages that's like two thousand fourteen winter carnival, blah and that's like a mile long, like you said, trying to fit it so you can customize the navigation label fitted in there and especially, I gotta be honest with responsive design. If you're looking at a menu system and you're going up here and you're kind of creating this stuff, let me actually save the menu real quick. I'll go back and save it and you're you're creating this menu, guys, you see joe in contact, there we go, if you realize and a lot of themes are going to do this, I suggest you do this to when you're building this out, its students start to add your menu system. You're going to see that at some point now the scroll back up, it's going to switch to a mobile menu. Okay, of some kind. It's gonna be something different. So if you realize and you have to test this, if you realize that the words you have, like fifteen menu items and not fitting, you need to start fixing that. Okay? Figured out you need to either make something some menus. You need to start cutting down the words, doing something to get if it you got to check it out, okay, now, in fact, in this theme, if you had too many pages too long it's gonna break it's going to start to move them down here and look really funky. Okay, that's, why? Honestly, we try to keep how many times you been to a website where the navigation is just it's? Well, first of all, it's horrific. But I mean there's, a lot of sites like that, but you've never been to a site where it's the navigation is very concise and it actually makes sense. And it's not that big. Yeah, you're shaken. No, I no, I get it. It's. You know, it's it's kinda hard to come by sometimes. So quick question. Sure, on the I'm thinking in terms of mobile how do sub menu items look in the mobile? That isn't also question. Okay, you're going to find it with, uh, most themes to be perfectly frank, they're just gonna list them in order. They're just going to do something like this. Let's, go straight down. Okay? Uh, some themes and is not always the case, but a few things actually will. They'll left the line, the menu item and then the sub menu waiting. We'll actually have a margin on lycan in debt on it. That kind of thing okay, depends on the thing. It really depends on the theme. Yeah. Oh, yeah oh, yeah depends on the mat navigation what they've got set up, etcetera. So once we set some of these up, you can see that I've got, you know, joe and contact et cetera. Uh, I'm gonna go in and just look at a few more options here, let me click on page you're going to see that we have what's called a title attributes. Did you guys know what a title is? As faras html title is it's it's something that the user doesn't see it's in the code but it's a lot of times for search engine hits for seo search engine optimization, it's something that you can use a couple ways it can actually for search engine it can give more information about the place they're going, but the link of the page so you can use it is a little bit of marketing maybe to put some words that kind of describe what that thing is don't go nuts with this. This is it's called stuffing, you know as far as key words and things like that don't go crazy it's not rank that high and search engines are gonna like blast you to the top of the google because you have one of these, okay title attributes can also when you hover over, show a little yellow tool tip in some browsers and if you have is anybody ever heard of mystery meat navigation? I'm going to say for a title, let me put a title on their link to jos joe's gym or I don't know whatever, okay, and I'm going to save the menu so that's the title attribute right there and I'll go out and let's see if this weekend actually see this in here? Okay? Yeah. There you go. Okay. See that little yellow dealy bob, let me zoom in. Sorry, museum in. Okay. Think about this. Mystery meat navigation is something we don't intend. And it just is it's a word like joe? What does that mean? We're you going? What are you doing? If you click on that, you know what I mean? Navigation needs to make sense. So at least these titles, some people, some of us, will kind of glance it will be like, ok, look that but sometimes you can give them a little more information about where you're going, what you're doing now. Does everybody look at that? No, so you might be, you know, fruitless, but it's your call, so all right, so we've got our part of our navigation a couple more things to look at here we have a title attribute we had a navigation label let me sorry keep doing this, you're going to see we have move down one. This is kind of interesting. It just kind of reorders things. It moves it down in the menu, okay? Instead of dragging it basically because sometimes you try and drag it and you just mess it up and whatever, okay, you're going to see that there is the original name which I love because if you're ever come back to this six months later, you're going to like, what pages? Joe again, you know, like that. So that's actually a good thing to have on of course we've got this remove and cancel. So remove is gonna totally remove it out of the menu and cancel is just going to say, don't take my changes basically, okay, so get out of there so each paige that we have in here if I click on, let me get to it, I always do this click on the right, there we go, you can go set all this information, okay? We're not gonna do that obviously get the idea, hopefully I'm going to save my menu by clicking on the save menu button over here and just looking down here before we jump back over the left to show you a few settings here, some of these things you've got to be kind of careful of, okay, you're going to see down here, auto ad pages automatically when I make these pages in the word press. Ok, if you go to make another page, if you turn that on its gonna throw it in your menu it's gonna put that? Usually it puts it at the bottom. I think I'm pretty sure about that, so just sticks it in the bottom of the menu. Got to be careful, that right? Because if you're just toying around and you're just thinking about an idea for a page and you start messing with it, it's gonna be live if it's live on the web. Okay, there's also good things to do a reason why you do that. But that's. One of the reasons why not to I always go to the negative first. I don't know if you noticed that butt. Okay, try not to. Okay, so you see right here, theme locations. This is just another way to say take this menu and put it in the header, or put it in the footer, it's, just another place to do it and yes good is that where you would want if you wanted to have your menu on the foot or also because I see some sights like that you're on the bottom of the page you can also see the header she could do above you got it yeah it's a great idea because that way you don't the bill to separate menu systems that don't mean they're the same thing here it's kind of silly so yeah so you can basically tell it wearing the theme you want to put it and like I said before in the theme it's just there's just a whole waiting for your menu and the header and in the footer that's pretty much it you know? So um and honestly what one of the things that really kind of drove me nuts let me save this by clicking save menu was if you look down here you're going to see delete menu I couldn't figure out first of all how to delete a menu forever I don't know why I just kind of blew by me but you know yeah this is something you gotta be careful up so there's delete now we got pages and there we get a couple pages I want to talk to you about what it called lynx on the left hand side over here somebody open these up this to me kind of opens up with a menu khun d'oh okay with a menu system, a lot of us assume and I did forever that inward press it's just picking out like pages in may and saying okay, let's link to those pages and that's it what if, for instance, you have a website for a donut shop and you'd liketo linked to six different recipes that are on different websites? But you want to have it look like a navigation bar or some like that just really simple you don't make it you just put him in there using links we couldn't do that so we can go in and say, you know what? I want a link to let me just go teo go to creative lives so I don't have any surprises I've done that before this link text this is great because this is what's going to show up in the menu just take whatever you want so I say you know creative live that's could be as pretty as you want and then I could say all right let's add this to the menu if you know this is gonna put it over here on the right and I can just drag it where I want to put it you know sob or not you guys can see you like to see the struggle I'm having here let me put it in, put it out there we go, there we go okay, so what I'm gonna do now is I love this too you'll see that this is a page and this is customized or custom I'm gonna open this one up take a look at it and you're going to see it just kind of the same stuff all right? But you're going to notice now that it's going to say let's put it under its put it a top without dragging you could do that okay um I am going to do that someone else save save them in you and just quickly go take a look at it we'll see where we're at we're gonna be having a lot more pages but you could see right there creative life excellent all right when we go back and takes you to that other website but it doesn't have all your stuff in it like some websites do that where they'll bring the content into the website this does not know this is what I was when I was your link you know yeah, this is purely a lake out to another page essentially so uh and if you take a look let me, um let me do this I'm gonna actually click notice see that you can see the page amon right now, but if I click on the link here you're going to see by default it's going to replace the page iran doesn't open and he knew you got it so that's something to think about and you'll test it and you'll see another tab uh that's supporting the code I know if you look in here, you're going to see that it doesn't I don't see that it gives you any way to set a different tab or set it in a window a parent or anything like that. Um I believe I have looked for that before I've been like links where's the you know it's opening by default in itself it's called so self yes if you made a menu item called lynx and then on that page you know you made a page and then you put links in there would it open and other tabs or with those links replace your you could totally do that yeah cause you put your link and you selected open tell what to do okay, that sneaky I like that that's the kind of stuff you gotta think outside, right? You know that's good that's good. Okay, you got a menu last thing I want to take a look at as faras menus or concerned let's look at what are called categories. So I'm gonna click on the categories over here and just show you this we we haven't talked about this yet and be honest, I don't see a lot of sites to do this kind of thing unless they're purely a blawg okay, a category is a way for us to be able to take anybody know what a block post is kind of you see him right out all about the blog's I know I had to ask that but so if you have a bunch of block post you've created in your blawg and these are all just like snippets of thought right? Um what we could do is we could actually assign what's called a category to certain block post and you could like it's like tagging or keyword ing him okay? And you could say, hey, these block post that I created are for an event I'm doing, for instance and what we could do for the menu is you can actually say let's pull in every block post that we tagged with that category so you condone stick that on the menu all the events now what's interesting is it's going to just pull put one link in their toe a page that has those filter that has those sorted on the page does that make sense? Yeah otherwise if you had one hundred posts and it put one hundred things on them forget it you know so you could theoretically have one of your things be a blawg I know this is more website but you know one of the pages of your log and then you can have all the sub categories on the menu that would be a pull down of all the categories of all the different blog's family pictures kid pictures dog whatever that's exactly it you could totally do that yeah cool yeah uh and we will was soon as we get the pages post we're gonna create a few in just a little bit here we will talk about categorizing and kind of what that means and paige first posts and all that so this is something like I said that not a lot of us are gonna use out of the gate if you're not creating a blogger or blood content so I just wanted to throw that out there to show you I want to make sure I save the menu and like I said before I can go in and manage the locations we can tell it to be had her footer we can also if we want to if I want to put on entirely different menu in the foot or now we could go just create that menu okay so you're going to be writing here just creating new menu I can follow the same process call it footer put whatever I want their links etcetera in honestly with footer I don't know it's up to you but when you scroll down you're going to see it like say mazza footer a lot of people that are way down here if there's no sticky header like that if they have to go all the way back up to kind of navigating, that could be really annoying. If you guys have you ever had that before, you got a jump, right, okay, uh, so, so in that case, you probably want a mirror, or these come close to me during that same have. Otherwise, if you have the navigation there, to be honest, it doesn't make a lot of sense to me right here. Unless you're on mobile, the mobile never is not sticky, okay, you scroll up and it goes up. Ok, so that's, something to look out for, something to watch out for, all right, so I'm not going to create a new menu. I think we're just going to kind of keep it, as is, if you will, and we're good to go there.